Skrive effektive Alt-tekst For bilder

Alle som vet noe om web accessibility vet at bilder trenger alternative eller ALT, tekst som er tilordnet. Dette skyldes at skjermlesere ikke kan forstå bilder, men heller lese høyt den alternative teksten som er tilordnet. I Internet Explorer kan vi se denne ALT-tekst ved mousing over bildet, og se på det gule verktøytipset som blir vist. Andre nettlesere (riktig) gjør ikke dette. HTML for å sette inn ALT-tekst er:

img src="filename.gif" alt = "Alternative her akt"

Men sikkert det kan ikke være en ferdighet å skrive ALT-tekst for bilder? Du bare pop en beskrivelse der, og du er flink til å gå, rett? Vel, type. Husk, det er ikke rakett vitenskap, men det finnes noen retningslinjer du må følge...

Underlagsskive bilder og manglende ALT-tekst

Underlagsskive bilder skal alltid være tilordnet null ALT-tekst eller alt = "". Denne måten de fleste skjermlesere vil fullstendig ignorere bildet, og vil ikke engang annonsere sin tilstedeværelse. Underlagsskive bilder er usynlig bilder som ganske de fleste nettsteder bruker. Hensikten med dem er, som navnet antyder, for å lage plass på siden. Noen ganger er det ikke mulig for å opprette skjermvisningen du trenger, slik at du kan feste et bilde i (å angi høyde og bredde) og volià, du har ekstra plassen du trenger.

Ikke alle bruker denne null ALT-tekst for bilder på underlagsskive. Noen nettsteder feste i alt = "bilde underlagsskive". Tenk deg hvor irriterende dette kan være for en skjermen reader-bruker, spesielt når du har ti av dem i en rad. En skjermleser vil si, "Bildet, underlagsskive bildet" ti ganger på rad (skjermlesere si vanligvis ordet, "Image", før du leser ut ALT-tekst) - nå som ikke er nyttig!

Andre webutviklere lar ut ALT-attributtet for underlagsskive bilder (og kanskje andre bilder). I dette tilfellet de fleste skjermlesere lese ut filnavnet, som kan være 'newsite/images/onepixelspacer.gif'. En skjermleser ville annonsere dette bildet som "Bildet, newsite skråstrek bilder slash én piksel dot-gif for Radavstand". Forestille seg hva det ville høres ut som om det var ti av disse i en rad!

Punktmerking og ikoner

Punktmerking og ikoner bør behandles mye på samme måte som informasjonsverdi, så bør tilordnes null alternativ tekst eller alt = "". Tenk på en liste over elementer med et fancy punkt fortsetter hvert element. Hvis ALT-tekst "Bullet" er tilordnet til hvert bilde deretter, "Image, punkt" vil bli lest høyt av skjermlesere før hvert listeelement, noe som gjør det ta at litt lenger for å arbeide gjennom listen.

Ikoner, som vanligvis brukes til å utfylle koblinger, bør også tilordnes alt = "". Mange nettsteder, som plasserer du ikonet ved siden av koblingsteksten, bruke koblingsteksten som ALT-tekst for ikonet. Skjermlesere vil først kunngjøre denne ALT-tekst, og deretter koblingsteksten, så vil deretter si koblingen to ganger, noe som åpenbart ikke er nødvendig.

(Ideelt sett punktmerking og ikoner bør bli innkalt som bakgrunnsbilder gjennom CSS-dokument - dette ville fjerne dem fra HTML-dokumentet, og derfor fjerne behovet for alle ALT beskrivelse.)

Dekorative bilder

Dekorative bilder også bør tilordnes null alternativ tekst eller alt = "". Hvis et bilde er ren fryd for øyet er det ikke behov for en skjermen reader-bruker å aften vite det er der og blir informert om sin tilstedeværelse bare legger til støy-forurensning.

Derimot kan du hevder at bildene på webområdet ditt, skape en merkeidentitet og ved å skjule dem fra skjermen reader-brukere er du nekte denne gruppen av brukere den samme opplevelsen. Tilgjengelighet eksperter pleier å favoriserer argumentet tidligere, men det absolutt er en gyldig sak for sistnevnte også.

Navigering & tekst innebygd i bilder

Navigeringsmenyer som krever dekorativ tekst har ikke annet valg enn å bygge inn teksten i et bilde. I denne situasjonen, bør ikke ALT-teksten brukes til å utvide bildet. Under ingen omstendigheter skal ALT-teksten si, 'Lese alt om våre fantastiske tjenester som er utformet for å hjelpe deg med alt du gjør'. Hvis menyelementet sier, må 'Services' og deretter ALT-teksten også si 'Services'. ALT-teksten alltid bør beskrive innholdet i bildet, og skal gjenta teksten ord for ord. Hvis du vil utvide navigasjon, kan som i dette eksemplet du bruke tittelattributtet.

Det samme gjelder for en hvilken som helst annen tekst som er innebygd i et bilde. ALT-teksten bør bare gjenta, ord for ord, teksten inne i bildet.

(Med mindre skriften som brukes er spesielt unikt er det ofte nødvendig å bygge inn tekst i bilder - Avansert navigering og bakgrunn effekter kan nå oppnås med CSS.)

Firmalogo

Nettsteder har en tendens til å variere i hvordan de gjelder ALT-tekst for logoer. Noen sier, "Firmanavn", andre 'Firmalogo navnet' og andre beskrive funksjonen til bildet (vanligvis en kobling tilbake til hjemmeside), 'tilbake til Hjem'. Husk, ALT-tekst alltid bør beskrive innholdet i bildet så det første eksemplet, alt = "Firmanavn", er sannsynligvis best. Hvis logoen er en kobling tilbake til hjemmesiden og deretter dette effektivt kan kommuniseres gjennom tittelkodeverdi.

Konklusjon

Skrive effektive ALT-tekst er ikke for vanskelig. Hvis det er en dekorative bildet og deretter null alternativ tekst eller alt = "" skal være aldri, noen gang brukt - utelater ALT-attributtet. Hvis bildet inneholder tekst bør deretter ALT-teksten bare gjenta denne teksten ord for ord. Husk, ALT-tekst bør beskrive innholdet i bildet og ingenting mer.

Også være at du også holde ALT-tekst som kort og fyndig som mulig. Lytte til en webside med en skjermleser tar mye lenger enn tradisjonelle metoder, så ikke gjør overflate erfaring smertefullt for skjermen reader-brukere med oppsvulmet og unødvendig ALT-tekst.