Niquelao » Bloggarkiv » Identifisering av lenketyper

For dette formålet kan vi, i tillegg til de nødvendige tiltakene knyttet til tilgjengelighet, skape stilforskjeller ved hjelp av CSS (samtidig som vi alltid sørger for å beholde konsistensen som gjør at lenkene gjenkjennes som lenker). Gjennom denne praksisen vil brukere med grafiske nettlesere kunne se om dokumentet de skal åpne for eksempel er en PDF-fil, eller om destinasjonen ligger utenfor vårt eget nettsted.

Problemer Vi må identifisere hver lenketype ved hjelp av en klasse som tillater anvendelse av riktig stil. Ofte er det innholdsansvarlige som legger inn lenkene, og disse har ikke alltid adgang til å redigere koden direkte. Løsning Ved hjelp av en enkel funksjon skrevet i JavaScript, implementert på en ikke-intrusiv måte, kan vi identifisere dokumenttypen basert på innholdet i «title»-attributten (hvis den finnes) og/eller filtypen i destinasjonslenken. Til orientering: Det er god praksis at redaktører og innholdsansvarlige følger en felles standard for å angi lenkens destinasjonstype i «title»-attributten, siden de fleste redigeringsverktøy støtter dette.

I tillegg er det lagt til funksjonalitet i skriptet som automatisk legger til tekst i «title»-attributten for lenker som mangler denne, men som peker til et dokument skriptet gjenkjenner. Eksempler på lenker Google Dokument i PDF-format Denne lenken mangler «title»-attributt, og funksjonen legger til følgende: Word-dokument Skriptet Skriptet er beskrevet nedenfor og kan lastes ned direkte Først definerer vi en array med tekstfragmenter som redaktøren/innholdsansvarlig skal bruke for å beskrive lenkens destinasjonstype: var tFormat = [“ekstern lenke”, “pdf-format”, “word-format”]; Deretter definerer vi en liste over lenketyper (i samme rekkefølge som ovenfor): var Format = [“ekstern”, “pdf”, “doc”]; Til slutt definerer vi klassene som brukes til å formatere hver lenketype (også i samme rekkefølge).

Disse må ha tilsvarende stildefininger i CSS-en: var classFormat = [“ekstern”, “pdf”, “doc”]; function enlaces() { // Henter alle lenker i dokumentet var links = document.getElementsByTagName(“a”); for (var i = 0; i < links.length; i++) { // Sjekk at det ikke er ankerlenker if(links[i].href.indexOf(”.”) > -1) { // Sjekk om lenken har “title”-attributt if(links[i].getAttribute(“title”)) { // Hent “title”-attributten og konverter til små bokstaver var title = links[i].getAttribute(“title”).toLowerCase(); // Loop gjennom tFormat-arrayen for å sjekke om // noen av tekstene forekommer i “title”.

Hvis ja, // legges klassen fra classFormat-arrayen (på samme posisjon) til. for(var f = 0; f < tFormat.length; f++) if(title.indexOf(tFormat[f]) > -1) links[i].className += ” ” + classFormat[f]; } // Siden ikke alle lenker har “title”-attributt, // sjekker vi også “href”-attributten for å hente ut // filtypen og sammenligne med verdiene i Format-arrayen. 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 “title”-attributten mangler, legges den til if(!links[i].getAttribute(“title”)) links[i].setAttribute(“title”, tFormat[f]) } } } } Til slutt lastes skriptet: window.onload = enlaces; Identifisering av lenketyper Kategori: CSS, Javascript —> 2 kommentarer Jorge del Casar 14. mai 2007 Jeg har brukt litt tid på å lese gjennom nettstedet ditt, og jeg er ganske imponert.

Du har mye interessant innhold – gratulerer! Siden jeg ser at du bruker mye tid på å få alt helt riktig, ville jeg komme med et bidrag. Du har ikke tatt høyde for at hvis en lenke allerede har blitt tildelt riktig klasse før skriptet kjøres, vil klassen bli duplisert når skriptet løper. Det er ikke kritisk, men det kunne vært lurt å sjekke om lenken allerede har en klasse fra Format-arrayen ved start.

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

Hvis ja, hopp over elementet; hvis nei, fortsett med skriptet. Det ser ut til at denne feilen har oppstått på eksempellenken «Dokument i PDF-format». Gratulerer igjen med godt arbeid.

Jeg håper å se mer fra deg snart. PS: Sjekk valideringen av e-postadresser, den aksepterer ikke min. Det kan skyldes at brukernavnet inneholder et punktum (eller kanskje en gjentatt asterisk). Rumoroso 14. mai 2007 Takk for bidraget!

I utgangspunktet bør linjen: if(title.indexOf(classFormat[f]) > -1) endres til følgende: if(title.indexOf(tFormat[f]) > -1 && links[i].className.indexOf(classFormat[f])) Jeg har ikke testet det selv, men jeg antar at det vil fungere. Når det gjelder valideringen av e-post, tror jeg problemet ligger i selve valideringsverktøyet. Jeg skal se nærmere på det.

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

Takk igjen for innspillet ditt. Jeg håper ikke dette er det eneste bidraget vi får. Du kan følge med på kommentarer via RSS 2.0-feeden . Du kan også sende en trackback fra ditt eget nettsted.

Forrige artikkel: Skript for bytte av CSS Neste artikkel: Justering av skjemaer (episode I) —> —> —> Dette verket er lisensiert under en Creative Commons-lisens .

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.