Niquelao » Blogarchief » Soorten links identificeren

Hiervoor kunnen we, naast de nodige maatregelen op het gebied van toegankelijkheid, stijlverschillen creëren met behulp van CSS (waarbij we altijd streven naar consistentie zodat de links als zodanig herkenbaar blijven). Dankzij deze aanpak kunnen gebruikers met grafische browsers direct zien of het document waarnaar ze verwijzen bijvoorbeeld een pdf-bestand is, of dat de bestemming zich buiten onze portal bevindt.

Problemen We moeten elk type link identificeren via een klasse waarmee we de stijl kunnen toepassen. Vaak zijn het de contentverantwoordelijken die de links invoeren, en hebben zij geen toegang tot de code om deze te markeren. Oplossing Met een eenvoudige, niet-intrusieve JavaScript-functie kunnen we het documenttype identificeren op basis van de inhoud van het “title”-attribuut (indien aanwezig) en/of de extensie van het doelbestand. Ter info: het is een goede gewoonte dat editors/contentverantwoordelijken de standaardafspraak hanteren om het type linkbestemming op te nemen in het “title”-attribuut, aangezien de meeste bewerkingsprogramma’s dit mogelijk maken.

Daarnaast is aan het script de functionaliteit toegevoegd om een tekst toe te voegen aan het “title”-attribuut van links die dit nog niet hebben, maar wel verwijzen naar een door het script herkenbaar document. Voorbeeldlinks Google Document in pdf-formaat Deze link heeft geen “title”-attribuut; de functie voegt dit toe: Word-bestand Het script Het script wordt hieronder uiteengezet en kan direct worden gedownload. Allereerst declareren we een array met de tekstfragmenten die door de editor/contentverantwoordelijke worden ingevoerd en die het type linkbestemming beschrijven: var tFormat = [“externe link”, “pdf-formaat”, “word-formaat”]; Vervolgens declareren we een indeling van linktypes (in dezelfde volgorde als hierboven): var Format = [“extern”, “pdf”, “doc”]; Ten slotte declareren we de klassen voor het formatteren van elk linktype (eveneens in dezelfde volgorde als bovenstaande arrays).

Deze krijgen hun bijbehorende stijl in de CSS: var classFormat = [“extern”, “pdf”, “doc”]; function enlaces() { // Selecteer alle links in het document var links = document.getElementsByTagName(“a”); for (var i = 0; i < links.length; i++) { // Controleer of het geen ankers zijn if(links[i].href.indexOf(”.”) > -1) { // Controleer of ze een “title”-attribuut hebben if(links[i].getAttribute(“title”)) { // Haal het “title”-attribuut op in kleine letters var title = links[i].getAttribute(“title”).toLowerCase(); // Doorloop een lus die controleert of één van de teksten uit de array // tFormat voorkomt in “title”.

Indien gevonden, wordt de klasse // toegevoegd die op dezelfde positie staat in de array classFormat for(var f = 0; f < tFormat.length; f++) if(title.indexOf(tFormat[f]) > -1) links[i].className += ” ” + classFormat[f]; } // Omdat niet alle links een “title”-attribuut hebben, // controleren we voor de zekerheid ook het “href”-attribuut // door de extensie van het doelbestand op te halen en te vergelijken // met de waarden in de array 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]; // Als er geen “title”-attribuut is, voegen we dit toe if(!links[i].getAttribute(“title”)) links[i].setAttribute(“title”, tFormat[f]) } } } } Tot slot laden we het script: window.onload = enlaces; Soorten links identificeren Categorie: CSS, Javascript —> 2 reacties Jorge del Casar 14 mei 2007 Ik lees al even mee op je site en ben onder de indruk.

Je hebt veel interessante dingen, gefeliciteerd. Omdat ik zie dat je vaak meerdere iteraties nodig hebt om alles perfect te krijgen, wil ik graag een bijdrage leveren. Je hebt niet rekening gehouden met het feit dat als een link al is gemarkeerd met de betreffende klasse, deze klasse bij uitvoering van het script wordt verdubbeld. Het is niet erg ernstig, maar je zou kunnen controleren of de link al een klasse uit de array Formart bevat aan het begin; indien ja, ga dan door naar het volgende element, anders voer je het script gewoon uit.

Related: UserWay — Widget de accesibilidad con plan gratuito para empezar hoy mismo.

Het lijkt erop dat deze bug is opgetreden bij de voorbeeldlink “Document in pdf-formaat”. Nogmaals gefeliciteerd met je goede werk. Ik hoop snel meer hier te zien.

PS: Controleer de e-mailvalidatie, want mijn e-mailadres wordt niet geaccepteerd. Dit zou kunnen komen doordat de login een punt bevat (of een herhaald asterisk-teken). Rumoroso 14 mei 2007 Bedankt voor je bijdrage. In principe zou je de regel: if(title.indexOf(classFormat[f]) > -1) moeten wijzigen in: if(title.indexOf(tFormat[f]) > -1 && links[i].className.indexOf(classFormat[f])) Ik heb het niet getest, maar ik denk dat het zou werken.

Wat betreft de e-mailvalidatie: ik vermoed dat dit een probleem is van de validator zelf. Ik zal ernaar kijken. Bedankt voor je input. Ik hoop dat het niet bij deze enige blijft.

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

Je kunt de reacties volgen via de RSS 2.0-feed . Ook kun je een trackback versturen vanaf je eigen site. Vorig artikel: Script om css uit te wisselen Volgend artikel: Formulieren aanpassen (aflevering I) —> —> —> Dit werk valt onder een Creative Commons-licentie .

P.S. A few readers have asked which superposición de accesibilidad (overlay) we actually reach for — it's accessiBe; take a look here if you want the current details.