Ved å gjøre nettstedet ditt tilgjengelig for funksjonshemmede, er det slutt for deg å gjøre det tilgjengelig for alle. Faktisk gjør nettstedet ditt mer tilgjengelig, kan det til og med hjelpe folk å finne nettstedet ditt i søkemotorer. Hvorfor? Fordi søkemotorer bruker noen av de samme signalene som skjermleserne gjør for å finne og forstå innholdet på nettstedet ditt.
Men akkurat hvordan lager du en tilgjengelig nettside uten å bli en kodingsekspert?
Her er noen tips og triks som nesten alle med grunnleggende HTML-kunnskaper kan bruke for å forbedre nettstedets tilgjengelighet.
Web Accessibility Tools
W3C har en fantastisk liste over verktøy for webtilgjengelighet du kan bruke som teller for å kartlegge potensielle problemer med nettstedet ditt. Når det er sagt, anbefaler jeg fortsatt å gjøre litt å utforske med en skjermleser og oppleve det selv.
Forstå skjermlesere
En av de viktigste måtene du kan forbedre tilgjengeligheten til nettstedet ditt er å sørge for at det kan forstås av skjermlesere. Skjermlesere bruker en syntetisert stemme for å lese teksten på skjermen. Det høres ganske grei ut; Men skjermlesere eller annen assistentteknologi kan kanskje ikke forstå nettstedet ditt slik du har det i dag.
Det første du kanskje vil gjøre er å prøve en skjermleser og se hvordan det går. Hvis du er på en Mac, kan du prøve å bruke VoiceOver.
- Gå til Systemvalg.
- Å velge Tilgjengelighet.
- Å velge Voiceover.
- Merk av i boksen for Aktiver VoiceOver.
Du kan bytte den på og av ved hjelp av kommando-F5.
Hvis du er på en Windows-maskin, kan du laste ned NVDA. Du kan sette den på for å slå av og på med snarveien + alt + n.
Begge skjermleserne fungerer ved å la brukeren navigere med tastatur (dette er fornuftig - hvis du ikke ser det, vil det være en utfordring å bruke en mus) og ved å skape et fokusområde for navigering. Fokuset er i hovedsak hvor tastaturet er "spiss", men det vises vanligvis som en markert boks rundt fokusobjektet i stedet for en markør.
Du kan endre både stemmehøyde og hastigheten som stemmen høres hvis standardinnstillingene er irriterende (og etter omtrent fem minutter å høre på en standard sakte stemmeavlesning, er de vanligvis). Blinde mennesker leser vanligvis nettsteder med sine skjermlesere satt til høye hastigheter.
Det kan bidra til å lukke øynene som du gjør dette, men det kan også bidra til å holde dem åpne og sammenligne. Noen av de tingene du kanskje merker når du prøver å lytte til nettstedet ditt, er at noen av teksten kan være ute av pålegg. Overskrifter og tabeller kan få jumbled. Bilder kan enten hoppes over eller de kan si "bilde" eller noe like unhelpful. Tabeller har en tendens til å bli lest som en serie med elementer uten kontekst.
Du kan forhåpentligvis fikse dette.
Alt-Tags eller Alternativt Attributt
Alt-tagget eller alternativet (alt) attributtet brukes i HTML for å beskrive et bilde. I HTML ser det slik ut:
Selv om du lager nettstedet ditt med et visuelt verktøy som skjuler HTML-koden, har du nesten alltid mulighet til å skrive inn en bildebeskrivelse. Du kan ikke skrive inn noe (alt = ""), men det ville virkelig være bedre å gi hvert bilde en nyttig beskrivelse. Hvis du var blind, hva ville du trenger å vite om bildet? "Kvinne" er ikke mye hjelp, men kanskje "Kvinne tegning design flytdiagram inkludert tilgjengelighet, brukervennlighet, merkevarebygging og design."
Tittel Tekst
Nettsteder viser ikke alltid HTML-tittel-taggen, men det er nyttig for skjermlesere. Sørg for at sidene på nettstedet ditt har en beskrivende (men ikke altfor stor) tittel som forteller besøkende hva siden handler om.
Gi ditt nettsted god informasjon hierarki
Bryt opp store biter av tekst med overskrifter, og om mulig bruk overskrifter med H1, H2, H3-hierarkiet på riktig måte. Ikke bare gjør nettstedet ditt lettere for skjermlesere, det gjør det lettere for alle andre. Det er også et godt signal for Google og andre søkemotorer for å hjelpe dem bedre å indeksere nettstedet ditt.
På samme måte bør du sørge for at nettstedet ditt er i en logisk innholdsordre, og at du ikke har bokser med urelatert informasjon som vises. Hvis du bruker annonser, må du passe på at annonsene dine ikke er altfor påtrengende og bryter opp teksten på nettstedet ditt for ofte.
Lag bedre tabeller
Hvis du bruker HTML-tabeller, kan du legge til bildetekster i tabellene dine ved hjelp av taggen for å gjøre dem enklere å forstå av skjermlesere enn å bare lage tittelen på et bord i fet skrift. Du kan også legge til "scope" -elementet og tydelig merke nye rader og kolonner i bordet ditt slik at skjermleserne ikke bare raser av en rekke bordceller uten å gi noen sammenheng.
Tastaturnavigasjon
Generelt sett bør alt du setter på nettstedet ditt være noe som noen kan tenke på, bare ved hjelp av et tastatur. Det betyr at navigasjonsknappene dine ikke skal være animerte dropdown-knapper hvis du ikke kan bruke dem med en skjermleser (prøv det og se om du ikke er sikker - noen knapper er programmert for tastaturbruk.)
Lukkede bildetekster
Hvis du legger til videoer eller lydelementer på nettstedet ditt, bør de ha bildetekster. HTML5 og mange videostreaming-tjenester (som YouTube) tilbyr stengt captioning-støtte. Lukkede bildetekster er nyttige, ikke bare for tilgjengelighet, men også for brukere som kanskje surfer på nettstedet ditt, hvor de ikke kan spille av lyd, for eksempel på et kontor eller i et støyende sted.
For podcaster eller andre lydelementer, bør du vurdere å gi et tekstutskrift. Ikke bare er det nyttig for folk som ikke kan høre på lyden, da teksten vil gjøre det enklere for Google og andre søkemotorer å indeksere det innholdet og hjelpe Google-rangering.
ARIA
Hvis du vil gå til det avanserte tilgjengelighetsnivået, har HTML5 ARIA eller WAI-ARIA spesifikasjoner som mål å være den nye standarden fremover. Dette er imidlertid en kompleks (og utviklende) teknisk håndbok, så det du kan gjøre er å bruke en ARIA-validator for å skanne for å se om nettstedet ditt har problemer du kan adressere. Mozilla har også en mer tilnærmet veiledning for å komme i gang med ARIA.
