Niquelao » Webbloggarkiv » Identifiera länktyper

» Arkiv för webloggen » Identifiera länktyper Niquelao Identifiera länktyper 3 september 2006, av Rumoroso En god sed som positivt påverkar tillgängligheten och användbarheten på våra webbplatser är att identifiera vilken typ av länkar vi har baserat på deras destination. För detta ändamål kan vi, utöver de lämpliga åtgärder som bör vidtas gällande tillgänglighet, skapa stilskillnader med hjälp av CSS (där vi alltid strävar efter att behålla den konsekvens som gör att länkarna fortfarande känns igen som just länkar).

Genom denna metod kan användare med grafiska webbläsare snabbt se om dokumentet de ska öppna exempelvis är en PDF-fil eller om länken leder utanför vår webbplats. Problem Vi måste identifiera varje länktyp genom en klass som möjliggör rätt formatering. I många fall är det innehållsansvariga som lägger in länkarna, och de har ofta inte möjlighet att redigera koden direkt. Lösning Med en enkel JavaScript-funktion, implementerad på ett icke-påträngande sätt, kan vi identifiera dokumenttypen baserat på innehållet i attributet “title” (om det finns) och/eller filändelsen i destinationsadressen.

Notera: Det är god sed att redaktörer och innehållsansvariga följer en gemensam rutin där de anger länkens destinationstyp i attributet “title”, eftersom de flesta redigeringsverktyg stöder detta. Dessutom har skriptet utökats med funktionen att automatiskt lägga till text i “title”-attributet för de länkar som saknar detta, men som pekar på ett dokument som skriptet kan känna igen. Exempellänkar Google Dokument i PDF-format Denna länk saknar attributet “title”, men funktionen lägger till: Word-dokument Skriptet Skriptet presenteras nedan och kan laddas ner direkt Först deklarerar vi en array med den textfragment som redaktören/innehållsansvarig ska ange och som beskriver länkens destinationstyp: var tFormat = [“extern länk”, “PDF-format”, “Word-format”]; Därefter deklarerar vi en länktypologi (i samma ordning som ovan): var Format = [“extern”, “pdf”, “doc”]; Slutligen deklarerar vi klasserna för formatering av varje länktyp (också i samma ordning som ovan).

Dessa måste ha motsvarande stilar definierade i CSS: var classFormat = [“extern”, “pdf”, “doc”]; function enlaces() { // Välj alla länkar i dokumentet var links = document.getElementsByTagName(“a”); for (var i = 0; i < links.length; i++) { // Kontrollera att det inte är ankare if(links[i].href.indexOf(”.”) > -1) { // Kontrollera om de har attributet “title” if(links[i].getAttribute(“title”)) { // Hämta attributet “title” i gemener var title = links[i].getAttribute(“title”).toLowerCase(); // Loopa igenom och kontrollera om “title” innehåller // någon av texterna i arrayen tFormat.

Om så är fallet, // lägg till klassen som finns på motsvarande position // i arrayen classFormat for(var f = 0; f < tFormat.length; f++) if(title.indexOf(tFormat[f]) > -1) links[i].className += ” ” + classFormat[f]; } // Eftersom inte alla länkar har attributet “title” // kontrollerar vi även attributet “href” genom att extrahera // filändelsen från destinationsadressen och jämföra den // med värdena i arrayen 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]; // Om attributet “title” saknas, lägg till det if(!links[i].getAttribute(“title”)) links[i].setAttribute(“title”, tFormat[f]) } } } } Slutligen laddar vi skriptet: window.onload = enlaces; Identifiera länktyper Kategori: CSS, Javascript —> 2 kommentarer Jorge del Casar 14 maj 2007 Jag har läst din webbplats ett tag nu och är verkligen imponerad.

Du har mycket intressant innehåll, grattis! Eftersom jag märkt att du ofta finslipar detaljerna tills allt blir perfekt, vill jag bidra med en tanke. Du har inte tagit hänsyn till att om en länk redan har tilldelats rätt klass innan skriptet körs, kommer denna klass att dupliceras. Det är ingen katastrof, men det vore bättre att först kontrollera om länken redan har en klass från arrayen Format.

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

Om så är fallet hoppar vi över den, annars fortsätter skriptet som vanligt. Det verkar som att denna bugg uppstått vid exempellänken “Dokument i PDF-format”. Grattis igen till ditt fina arbete.

Jag ser fram emot mer här snart. PS: Kolla gärna e-postvalideringen, den godkänner inte min adress. Det kan bero på att inloggningsnamnet innehåller en punkt (eller kanske en upprepad asterisk). Rumoroso 14 maj 2007 Tack för ditt bidrag!

I grund och botten borde vi ändra raden: if(title.indexOf(classFormat[f]) > -1) till följande: if(title.indexOf(tFormat[f]) > -1 && links[i].className.indexOf(classFormat[f])) Jag har inte testat det, men jag tror att det skulle fungera. När det gäller e-postvalideringen antar jag att problemet ligger hos valideringsverktyget självt. Jag ska undersöka saken.

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

Tack igen för ditt bidrag. Jag hoppas att det inte blir det enda! Du kan följa kommentarerna via RSS 2.0-flödet . Du kan också skicka en trackback från din egen webbplats.

Föregående artikel: Skript för att byta CSS Nästa artikel: Justera formulär (avsnitt I) —> —> —> Detta verk är licensierat 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.