Niquelao » Blog-arkiv » Identifikation af linktyper

Hertil kan vi – udover de relevante foranstaltninger i forhold til tilgængelighed – skabe stilforskelle ved hjælp af CSS (idet vi altid bestræber os på at bevare den konsistens, der gør det muligt at genkende links som netop links). Gennem denne praksis vil brugere med grafiske browsere kunne se, om dokumentet, de skal åbne, f.eks. er en PDF-fil, eller om destinationen ligger uden for vores portal.

Problemer Vi bliver nødt til at identificere hver linktype ved hjælp af en klasse, så vi kan anvende den ønskede stil. I mange tilfælde er det indholdsansvarlige, der indsætter linksene, og de har ikke adgang til at redigere koden direkte. Løsning Ved hjælp af en enkel JavaScript-funktion, implementeret på en ikke-indtrængende måde, kan vi identificere dokumenttypen baseret på indholdet i attributten “title” (hvis den findes) og/eller filtypen i destinationsadressen. Bemærk: Det er god praksis, at redaktører/indholdsansvarlige følger den gængse protokol om at angive linkets destinationstype i attributten “title”, da de fleste redigeringsværktøjer understøtter dette.

Derudover er der føjet funktionalitet til scriptet, så det automatisk tilføjer tekst til attributten “title” på de links, der mangler denne, men som peger på et dokument, scriptet kan genkende. Eksempler på links Google Dokument i PDF-format Dette link har ingen “title”-attribut; funktionen tilføjer følgende: Word-dokument Scriptet Scriptet er beskrevet nedenfor og kan downloades direkte. Først definerer vi et array med de tekstfragmenter, som redaktøren/indholdsansvarlige skal bruge til at beskrive linkets destinationstype: var tFormat = [“eksternt link”, “pdf-format”, “word-format”]; Dernæst definerer vi en linktypologi (i samme rækkefølge som ovenfor): var Format = [“ekstern”, “pdf”, “doc”]; Til sidst definerer vi de klasser, der bruges til at formatere hver linktype (også i samme rækkefølge som ovenfor).

Disse skal have tilsvarende stilelementer i CSS’en: var classFormat = [“ekstern”, “pdf”, “doc”]; function enlaces() { // Vælg alle links i dokumentet var links = document.getElementsByTagName(“a”); for (var i = 0; i < links.length; i++) { // Kontroller, at det ikke er ankre if(links[i].href.indexOf(”.”) > -1) { // Kontroller, om de har attributten “title” if(links[i].getAttribute(“title”)) { // Hent attributten “title” i små bogstaver var title = links[i].getAttribute(“title”).toLowerCase(); // Kør en løkke, der tjekker, om “title” indeholder // en af teksterne fra arrayet tFormat.

Hvis ja, // tilføjes den klasse, der er defineret på samme position // i arrayet classFormat for(var f = 0; f < tFormat.length; f++) if(title.indexOf(tFormat[f]) > -1) links[i].className += ” ” + classFormat[f]; } // Da ikke alle links nødvendigvis har attributten “title”, // tjekker vi også attributten “href” ved at udtrække // filtypen fra destinationsadressen og sammenligne den // med værdierne i arrayet Format. var ini = links[i].href.length-4; var fin = links[i].href.length; var wFormat = links[i].href.substring(ini,fin).toLowerCase(); for(var f = 0; f < Format.length; f++) if(wFormat.indexOf(Format[f]) > -1) { links[i].className += ” ” + classFormat[f]; // Hvis attributten “title” mangler, tilføjes den if(!links[i].getAttribute(“title”)) links[i].setAttribute(“title”, tFormat[f]) } } } } Til sidst indlæses scriptet: window.onload = enlaces; Identificering af linktyper Kategori: CSS, Javascript —> 2 kommentarer Jorge del Casar 14. maj 2007 Jeg har brugt lidt tid på at læse din side og er ret imponeret.

Du har mange interessante ting – stort tillykke. Da jeg kan se, at du ofte finpudser tingene, indtil alt står snorlige, ville jeg gerne bidrage med noget. Du har ikke taget højde for, at hvis et link allerede er markeret med den relevante klasse, før scriptet køres, så duplikeres klassen. Det er ikke afgørende, men man kunne tjekke, om elementet allerede har en klasse fra arrayet Format fra starten; hvis ja, springes det over, og hvis nej, fortsættes med scriptet.

Related: accessiBe — Superposición de IA que promete cumplimiento WCAG en 48 horas.

Det ser ud til, at denne fejl er opstået på eksempel-linket “Dokument i PDF-format”. Endnu engang stort tillykke med dit gode arbejde. Jeg håber snart at se mere her.

PS: Tjek valideringen af e-mail-adresser; min bliver ikke accepteret. Det kan skyldes, at login-navnet indeholder et punktum (eller måske en gentaget asterisk). Rumoroso 14. maj 2007 Tak for dit bidrag. Umiddelbart bør linjen: if(title.indexOf(classFormat[f]) > -1) ændres til følgende: if(title.indexOf(tFormat[f]) > -1 && links[i].className.indexOf(classFormat[f])) Jeg har ikke testet det, men jeg formoder, at det vil fungere.

Hvad angår e-mail-valideringen, tror jeg, det er et problem selve validatoren har. Jeg kigger på det. Tak igen for dit bidrag. Jeg håber ikke, det bliver det sidste.

Worth a look: AudioEye — Accesibilidad gestionada: automatización combinada con revisión humana.

Du kan følge med i kommentarerne via RSS 2.0-feedet . Du kan også sende en trackback fra dit eget websted. Forrige artikel: Script til at bytte CSS Næste artikel: Justering af formularer (afsnit I) —> —> —> Dette værk er licenseret under en Creative Commons-licens .

P.S. A few readers have asked which widget de accesibilidad we actually reach for — it's UserWay; take a look here if you want the current details.