Dag 23: Tilby alternativ tekst til bilder

Dette er den viktigste dagen i hele serien, så følg med:

Hvert eneste bilde på hver eneste side av nettstedet ditt burde ha en alternativ tekst, en såkalt «alt-tekst», spesifisert i alt-attributtet til <img>-taggen.

Skjermlesere leser den, tekstbasert nettlesere viser den, Google indekserer den, og visuelle nettlesere kan vise den som et verktøytips eller på statuslinjen (selv om du som designer kan overstyre dette). Vi har allerede sett hvordan man spesifiserer en tom alt-tekst for avstandsbilder, og flere måter å lage tilgjengelige lister med bilde-kuler. Hva gjenstår?

Permalenke-ikoner
«Med kraft fra»-ikoner
Send epost-ikoner
XML-ikoner
Liten grafikk som flyter innenfor meldingenes elementer
Hvilke som helst andre bilder du har lagt til i malen

De trenger alle hensiktsmessige alt-tekster.

Hvem har nytte av det?

Anne har nytte av det. JAWS leser alt-teksten. Uten en gyldig alt-tekst, hører Anne filnavnene i stedet, noe som høres forferdelig ut.
Marius har nytte av det. Som en tekstbasert nettleser viser ikke Lynx noen bilder, bare alt-tekst. Uten alt-teksten viser Lynx filnavnene, noe som ser like ille ut som det i JAWS høres.
Jørgen har nytte av det. Som en tekstbasert nettleser viser ikke Links noen bilder, bare alt-tekst. Uten noen alt-tekst, viser ikke Links noe for et bilde (medmindre bilde er en lenke, som da Links enkelt viser «[IMG]» for). Når han surfer med Opera med bilder avslått, ser Jørgen alt-teksten i plassen til bildet.
Lillian tjener på det. Internet Explorer viser alt-teksten som et verktøytips (selv om du som designer kan overstyre dette).
Google har nytte av det. Googlebot indekserer alt-tekster, noe som ikke bare brukes til sammenligning av nøkkelord i normale søk, men også i bildesøkene. (Hvordan trodde du det virket?)

Hvordan gjøre det

Movable Types standardmal inkluderer ikke noen <img>-tagger. Hvis du bruker et grafisk «Med kraft fra Movable Type»-bilde, burde du forsikre deg om at <img>-taggen inkluderer attributtet alt="Med kraft fra Movable Type".

Greymatters standardmal inkluderer bare ett bilde, generert av {{gmicon}}-malvariabelen. Den genererer en <img>-tagg som inkluderer passende alt-tekst, «Med kraft fra Greymatter».

Radio auto-genererer passende alt-tekst for følgende standard-ikoner:

XML coffee mug: alt="Abonner på <nettstedets navn> i Radio UserLand".
XML icon: alt="Klikk for å se XML-versjonen av denne nettsiden".
Mailto icon: alt="Klikk her for å sende en epost til redaktøren av denne webloggen".

Imidlertid må Radio-brukere manuelt spesifisere alt-tekster for tilpassede bilder. Gå til «Prefs», så «Customized Images» (Templates), og legg til disse alt-attributtene:

Day-level permalink: alt="Permanent lenke: <%longDate%>".
Item-level permalink: alt="Permanent lenke".
Source link icon: alt="kilde".
Enclosure link icon: alt="vedlegg".

Du kan også legge til title="" for å skjule verktøytips i visuelle nettlesere.

Selvfølgelig, uavhengig av ditt publiseringsverktøy, hvis du har lagt egne bilder til din mal, eller hvis du har smågrafikk flytende i dine meldingselementer, så trenger de alle en passende alt-tekst. Fordi jeg best lærer av eksempler, så får du her noen eksempler. Flere generelle prinsipper og eksempler er listet i «Les mer»-seksjonen.

Eksempler på dårlig `alt`-tekst

Enhver HTML-oppmerking. alt-tekst kan kun inneholde ren tekst og bokstavkoder, ingen tagger.
alt="filnavn.jpg". Dette får vi ingenting ut av. Hva er grafikkens funksjon? Vi bryr oss ikke om hva den kalles.
alt="alt-tekst". Satt inn av noen HTML-editorer som en påminnelse, og latt være der av dumme designere.
alt="Klikk her!" Tjener ingen nyttig hensikt (medmindre, selvfølgelig, den er på grafikk som sier «Klikk her!»).
alt="Skru på bilder!" Dette er som å bli spurt av en blind person hvor mye klokken er, og svare, «Bare åpne opp øynene dine!» Det kan være en årsak til at bilder er avslått. (Jørgens lave båndbredde), de kan være utilgjengelige (Marius' tekstbaserte nettleser), eller de er kanskje ikke avslått i det hele tatt (Annes skjermleser, som viser bilder men leser opp alt-tekst).
Flere eksempler på dårlig alt-tekst.

Eksempler på god `alt`-tekst

Jonathon Delacour har grafikk i overskriften på siden sin med et kinesisk symbol. alt="Site logo: xin, the Chinese character for heart".
Leslie Harpold har en grafisk sideoverskrift som inneholder nettstedets navn, «The Historical Present», og slagordet, «Hypermodernism has a posse». alt="the historical present: hypermodernism has a posse".
Simon Willison har et «W3C XHTML 1.0»-merke. alt="Valid XHTML 1.0!"
Jeffrey Zeldman har en navigasjonsmeny med tekst-som-grafikk; på rollover, all grafikk får et lite slagord satt inn i statusfeltet med et Javaskript. Selvfølgelig så får ikke blinde brukere med seg dette, så Zeldman har også satt den samme teksten inn i alt-teksten til grafikken. Smart.
Dean Allen har grafikk i overskriften på nettsiden sin som inkluderer navnet på nettstedet og et slagord. Hans alt-tekst er blant de lange og inkluderer et annet slagord (som er litt forvirrende), men Dean er kul nok til å slippe unna med det. alt="Textism is an ephemeris focused on the composition, design, and reading of text. In addition, there will be pie". Merk deg: Du er sannsynligvis ikke kul nok til å slippe unna med å gjøre dette. Hold deg til det enkle.

Les mer

A. J. Flavell: ALT texts in IMG.
Jukka Korpela: Simple guidelines on using ALT texts in IMG elements.
Ian Hickson: Mini-FAQ about the alternate text of images.
Watchfire.com: Provide alternative text for all images.
All My FAQs Wiki: ALT attribute.
WebAIM: How to Create Accessible Graphics.
Martin Schrode: On accessible advertising.
Section 508 Federal Accessibility Guidelines: What is meant by a text equivalent?

<< Dag 22: Bruke ekte lister (eller etterlikne dem skikkelig) | Innholdsfortegnelse | Dag 24: Tilby alternativ tekst til bildekart >>

Kast deg ut i tilgjengelighet