Good Mood

Page Content

terminologi

det finns flera termer som vanligtvis används för att beskriva alt-text. De kan användas i olika sammanhang, även inom denna webbplats.,

• ALT text – konceptet att lägga till en skärmläsare vänlig text alternativ beskrivning av en bild. Detta kan genomföras på olika sätt mellan dokumenttyper.
• ALT – attribut (HTML) – i HTML infogas ALT-texten i alt-attributet i IMG-taggen.
• ALT ”Tag” – Korthandsreferens till ALT-attributet.

Demo av ALT-Text

syfte

ALT-texten lägger till en textbeskrivning till en bild på en webbsida och ska användas för alla bilder, grafiska kulor och grafiska horisontella regler.,

ALT-text nås av skärmläsaranvändare för att ge dem en textekvivalent med bilder. I visuella webbläsare som Firefox visas ALT-texten när en bild är trasig eller när alla bilder har inaktiverats.

WCAG-riktlinje

WCAG 2.0-riktlinje 1.1.1.- ”Alla icke-textinnehåll som presenteras för användaren har ett textalternativ som tjänar motsvarande syfte.”

Bildknappsexempel

Tänk på bilderna för sektioner en hypotetisk utbildningsplats under vilken alla innehåller dekorativ text.,
Obs! all text som används i en bild ska följa läsbarhets-och kontrastriktlinjer.

Skärmläsarutmatning med ALT-tagg

om bilderna inte laddas visar alt-text vad bilderna skulle ha sagt i en webbläsare som Firefox.

Skärmläsarutmatning utan ALT-tagg

utan ALT-texten kan ingen veta vad innehållet i bilden skulle ha varit.

implementera ALT-attributet

nedan följer några exempel på hur alt-text kan implementeras beroende på sammanhanget.

George Washington Painting

visa koden

implementera ALT-texten som ett attribut i IMG-taggen. Se exempel nedan.

Obs! en rekommenderad ALT-textlängd är cirka 125 tecken. Detta passar JAWS skärmläsare ALT textfält. Detta omfattas dock inte av WCAG: s riktlinjer.

bildtexter vs ALT Text

all information om bilden, såsom upphovsrättsinformation, bildkälla eller extra information bör placeras i bildtexten under bilden, inte I ALT-texten. Se exemplet nedan.

Beskrivning: Målning ”Washington och Lafayette vid Valley Forge” av John Ward Dunsmore från 1907. Bild med tillstånd av kongressbiblioteket.,

logotyper

för logotyper, särskilt logotyper som upprepas, är det tillräckligt att identifiera vilken logotyp det är, inte nödvändigtvis helt beskriva det

felaktig användning av ALT-Text

det ska inte användas för att:

• introducera verktygstips text,
• ge upphovsrätt eller källinformation om en bild eller
• förmedla tilläggsinformation om bilden.,
• införa söktermer (detta kan göras via god användning av rubriker).

Töm Alt-Text för dekorativa bilder

vissa bilder används enbart för layoutändamål eller för att förbättra innehållet för siktade användare och ger inget innehåll.

ALT-taggen för dessa bilder kan vara tom (<alt= ”” > eller<alt=” ”>) så att skärmläsare kommer att ignorera dem helt och hållet.,

exemplet nedan kommer att använda en exempelbild av en regnbågsverktygsfält, följt av några tillgängliga och otillgängliga kodexempel.

Rainbow verktygsfält

Antag att en webbsida har utformats med en regnbåge verktygsfält används för att separera bitar av text.

Obs! ALT-attributet med mellanslagstecknet anses vara mindre korrekt, men kan vara det enda alternativet som tillåts i vissa innehållshanteringssystem.

kortfattad Alt-Text

om en textbeskrivning redan finns för en bild i huvudtexten på sidan, kan ALT-taggen bara ge en sammanfattning av bilden, inte en fullständig beskrivning.,

Se komplexa bilder för exempel på hur detta kan användas i olika situationer.

exempeltext med bild

nedan är en bild av en mättad fettmolekyl med 18 kolmolekyler. Observera att de enskilda bindningarna mellan elementen gör kolkedjan relativt rak.,

länkar till utökade beskrivningar

i vissa fall kan det vara nödvändigt att lägga till en länk till en utökad beskrivning av en bild, särskilt i fall där bilder används för att förmedla betydande innehåll. Det finns flera sätt som detta kan åstadkommas—inklusive en LONGDESC-tagg, en D-link eller en mer öppen länk till den längre beskrivningen. Se nedan för exempel

länk till bildtext

om informationen är kritisk kan en öppen bildtext vara den bästa lösningen. Denna metod ger den tydligaste indikationen på att en längre beskrivning är tillgänglig.,

Visa utökad textbeskrivning

d-länkar

vissa experter förespråkar användning av en d-länk för att signalera närvaron av en utökad textbeskrivning. Vissa användare kanske inte känner till konventionen. Denna metod används bäst för att tillhandahålla information som är rent kompletterande.

d

LONGDESC Attribute

detta är ett attribut som är dolt i visuella webbläsare, men som känns igen av vissa skärmläsare. LONGDESC är bäst för att ge extra detaljer som förbättrar innehåll, men är inte kritisk., Det bör noteras att LONGDESC har ofullständigt stöd bland både visuella webbläsare och skärmläsare och är föråldrad i HTML5.

länkar och knappar

för bilder som används som navigeringselement för att utlösa funktioner som utskrift, uppladdning eller sparande ska ALT-texten beskriva destinationen eller funktionen, inte bilden.

Clickable vs Non-Clickable Penn State Shield

När en Penn State shield används på en webbsida beror ALT-texten som används på om den är klickbar (dvs. länkar till Penn State-hemsidan) eller inte.,

om en Penn State shield-bild används för att tillhandahålla en klickbar länk till startsidan ska ALT-texten ange destinationen (dvs. ALT=”Penn State Home Page”) Observera att IMG-taggen är inbäddad i en a-tagg för länken.

Obs! Om skärmen inte är klickbar kan ALT-texten vara ”Penn State” eller ”Penn State shield”.

titelattribut för verktygstips

TITELATTRIBUTET för en IMG-text kan användas för att generera ett verktygstips för siktade användare. Men var medveten om det.,

• TITELATTRIBUTET läses inte högt som standard i de flesta skärmläsare.
• ALT-texten visas vanligtvis inte som ett verktygstips i de flesta webbläsare.

om ett verktygstips behövs för siktade användare kan både en titel och ALT-attribut med samma information användas för att säkerställa att samma information levereras till båda målgrupperna.

se det här exemplet nedan

favoriter hjärta knapp med verktygstips

överväga en version av hjärtat bilden nedan som kan användas i ett gränssnitt för att välja favoritobjekt (t.ex. favoritlåtar eller e-böcker).,

både ALT-texten och TITELATTRIBUTET är ”favoriter”

visa koden