Hvordan utforme nettsteder for skjermlesere

En skjermleser lar synshemmede brukeren å nyte webinnhold ved å lese den høyt ved hjelp av syntetisk tale. Å designe et nettsted spesielt for en skjermleser, eller bygge en normal nettsted med denne tilgjengelighet i tankene, krever fokus på overordnede strukturen, gyldig markering og innhold organisasjon. Selv om visuelle elementer kan fortsatt brukes i en design bestemt for skjermlesere for å appellere til seende besøkende, vil den generelle utformingen av siden bli diktert primært av behovene til skjermen reader.For denne grunn bør utformingen sentrum rundt HTML og CSS funksjonalitet eksklusivt.

Bruksanvisning

1 Lag et nettsted struktur som er minimalt og organisert på en klar og lineær måte. Et eksempel kan være et rutenett-basert layout består av en header, meny og søkelinjen øverst etterfulgt av hovedinnholdsområdet på venstre side og en sidebar til høyre. Unngå å inkorporere visuelle eller illustrerende elementer som bilder glidere som ikke kan representeres av tekst.

2 Bygg en hovednavigeringsmenyen som bare inkluderer toppnivå lenker. Siden en svaksynt brukeren har menyen lese for dem hver gang, kan flere nivåer av sub-nivå lenker bli tungvint. Inkluder en lenke før menyen som tillater dem å hoppe til hovedinnholdet området og kaller det "Gå til hovedinnhold" eller "Skip Menu". Ordlyden er viktig, da den syntetiserte talen må være i stand til å lese og uttale ordene riktig.

3 Designelementer som kuler, grenser, knapper og navigeringsmenyer med CSS i stedet for bilder. Dette gjør at skjermleseren til å forstå tekst komponenter av disse elementene enklere. For eksempel, i stedet for å bruke en knapp for "Registrer deg", bruke en lenke i stedet, og stilen den med CSS hvis nødvendig.

4 Legg til "ALT" attributter til bilder i innhold til å representere dem, men holde det kort. For eksempel, "house bilde" er mer passende enn en hel setning som beskriver hva som skjer i bildet eller en fellesbetegnelse for eksempel "bilde." Ikke bruk ALT attributter for designelementer med mindre de representerer en kobling. Selv om dette er i strid med XHTML, det sparer skjermleseren fra å måtte lese ut ALT markering på hvert design element som ikke er en relevant del av innholdet.

5 Plasser overskrifter, overskrifter eller titler på venstre side av siden. Skjermlesere lese siden fra topp til bunn, venstre til høyre. Overskrifter bør være beskrivende, med nøkkelordet, kategori eller emne i begynnelsen av tittelen. Hold selve innholdet lineære og bruke gyldige overskriften koder (H1, H2, etc.) for å strukturere teksten.

6 Lag innhold som er konsis og brutt opp i korte avsnitt. Bruk grunnleggende språk og unngå slang eller oppdiktede ord som skjermleseren ikke kan uttale, og at brukeren ikke kan være i stand til å forstå. Skrive sammensatte ord som to ord, for eksempel "hjemmeside", "trene" eller "huset". Bruk nummererte eller punktlister når det er mulig å organisere innholdet.

7 For sider med mye innhold, inkluderer en table-of-contents-stil liste over anker koblinger før innholdet. Inkluder en "Top of Page" linken nederst på lange sider. Vurdere en layout som bruker bøtter eller bokser under innhold som inneholder lenker til relevant innhold på bestilte lister; Men unngå styling innholdet i disse områdene på en konvensjonell måte som inkluderer tidsstempler, antall kommentarer eller utdrag som kuttes midt i en setning. Har noen lese innholdet i hvert område høyt til deg å forstå hvordan skjermleseren vil tolke det slik at den er så enkel og omfattende som mulig.

8 Bruk <label> -taggen når designe former, og alltid plassere skjemaet øverst til venstre på siden. Legg beskrivelser ved å bruke tittelen attributt innenfor etiketten tag i stedet for å plassere tekst over eller under et skjema element. Husk at visuelle indikatorer som stjerner eller standardfelt tekst er meningsløst å skjermleseren og må være representert i etiketten i stedet.

Hint

• Bruk <acronym> og <abbr> koder for å fortelle skjermleseren til å lese et akronym eller forkortelse som bokstaver i stedet for et ord.
• Ikke bruk fragmenter som "les mer" eller "klikk her" i lenker. Lag en link vilkår som står på egen hånd, for eksempel "fortsette å lese Hvordan å designe for skjermlesere" eller "Registrer deg her".
• Unngå markering som fører til siden for å oppdatere når brukere utfører en handling er beregnet på samme side. Løsninger som AJAX kan hjelpe.