Designerhåndboken til grunnlaget for Web Accessibility Design

Internett skal være et sted hvor alle kan få tilgang til det samme innholdet fra hvor som helst i verden. Responsive teknikker har gått langt Enhets-agnostisk design. Men hva med tilgjengelighet-agnostisk design?

Webtilgjengelighet har eksistert i mange år, men implementeringen krever nye fremskritt innen teknologi og webutvikling. Mange utviklere vil hjelpe, men det er tøft å forstå hvordan å designe for tilgjengelighet, fordi det er så mange bevegelige deler. Dette inkluderer tekst med høy kontrast, lydsider for blinde, optimerte medier og fallbacks for ikke-JS / CSS-nettlesere.

I dette innlegget vil jeg dekke grunnleggende om tilgjengelighetsdesign, hva det er, hva det skal løse, og skritt du kan ta for å komme i gang. Merk, dette er et utrolig detaljert emne, og det vil ta måneder eller år med praksis å forstå fullt ut. Men fordelene er verdt innsatsen, og alle dine webprosjekter vil forlate hver besøkende med et varig inntrykk av tilgjengelig innhold.

Intro til tilgjengelighet

Generelt sett er tilgjengeligheten ideen om å bygge innhold slik at det kan bli konsumert av noen. Dette kan inkludere blinde personer som ikke kan lese, og det kan inkludere personer med fysiske funksjonshemninger som ikke kan betjene en mus eller et tastatur (eller en av dem).

Men det kan også inkludere folk med små mangler i syn. Det kan inkludere folk med dysleksi eller leseforståelse problemer. Faktisk, ideen om “web tilgjengelighet” inkluderer alle mulige nedskrivninger som kan påvirke hvordan noen samhandler med eller bruker et nettsted.

Kanskje viktigere er hva nettilgjengelighet kan tilby, som beskrevet her i en Wikipedia-definisjon:

Likevel argumenterer Anne Gibson i hennes Liste Apart post at Wikipedias definisjon er for vag, og det er det ikke bare om mennesker med funksjonshemninger. Det handler egentlig om alle på internett fra hele verden det Det kan hende at den ikke har optimal tilgang til Internett.

Mange devs tror at tilgjengelighet er bare for blinde mennesker som ikke kan lese. Men det er faktisk fire primære kategorier av web tilgjengelighet:

1. Visuell - lavsyn eller dårlig / ingen syn
2. auditiv - hørselshemmede eller døve
3. kognitiv - problemer med å forstå eller forbruke informasjon
4. Motor - fysiske tilgjengelighetsproblemer som kan kreve spesielle innspillingsenheter som tastaturer eller talekommandoprogrammer

Disse kategoriene har hver en omfattende teknikk som er endrer like raskt som webstandarder. Men det er en følelse av stabilitet med disse standardene ratifisert i WCAG (Web Content Accessibility Guidelines).

Noen nettsteder, som statlige institusjoner kreves ved lov å følge disse retningslinjene. De søker internasjonalt gjennom W3C.

La oss se på bureaukratiet bak webtilgjengelighet, og dykk deretter inn noen aktuelle designtips.

The W3C & Accessible Design

Det er ganske mange akronymer relatert til web tilgjengelighet. Disse kan være kompliserte hvis du er helt ny i emnet, men en gang forenklet håper jeg de vil gjøre mer fornuftig.

• W3C (World Wide Web Consortium) - En internasjonal gruppe som definerer webstandarder for protokoller, språk og forskrifter. Alle offisielle retningslinjer for tilgjengelighet er under denne organisasjonen.
• WAI (Web Accessibility Initiative) - Et offisielt program som dekker alt om tilgjengelighet. Denne paraply sikt inneholder alle regler, retningslinjer og teknikker for moderne tilgjengelighet.
• WCAG (Retningslinjer for webinnholds tilgjengelighet) - En gruppe standarder og regler for å hjelpe designere til å rangere sine nettsteder basert på tilgjengelighetsnivået.
• ARIA (Tilgjengelig Rich Internet Applications) - En spesifikk standard som definerer hvordan man bygger tilgjengelige rike applikasjoner som er avhengige av JavaScript / Ajax og lignende teknologier. Les mer om dette i dette innlegget av Anna Monus.

Andre retningslinjer finnes under WAI-paraplyen, inkludert UAAG for brukeragenter og ATAG for webforfatterverktøy. For nå bør du være mest interessert i forslagene fra WAI og retningslinjene fremsatt av WAIs regelsett under navnet WCAG.

En stor ressurs for å lære mer er dette innlegget fra W3C om funksjonshemminger, og deler historier om hvordan funksjonshemmede mennesker får tilgang til Internett. Det kan være vanskelig å forstå alle de intrikate problemene, enda mindre forstå hvordan de skal løses. Men Den beste kilden er fra folk som står overfor disse problemene daglig.

Et annet viktig emne du bør forstå er WCAG overensstemmelse. Dette gjelder et nettsteds nivå av tilgjengelighet dekker et bredt spekter av faktorer. Nivåene er basert på samsvar med et klassesystem av A, AA og AAA. Du kan sjekke dette med et verktøy for webtilgjengelighetskontroll. Den beste poengsummen er AAA.

For å lære mer om disse retningslinjene, se W3Cs introduksjon til forståelse av WCAG 2.0 artikkelen. Se også på disse relaterte linkene for flere detaljer:

• WCAG 2.0 forenklet
• Seksjon 508 WCAG Performance

Fremgangsmåte for å få tilgang til design

Jeg anbefaler på det sterkeste å besøke A11Y-prosjektets nettsted for praktiske tilgjengelighetstips. A11Y (som også er et talesignal) er et gratis åpen kildekodeprosjekt på GitHub, tilbyr teknikker for tilgjengelig webdesign.

Du kan bla gjennom sjekklisten over tilgjengelighetsartikler, eller til og med en mengde designmønstre for elementer som dropdowns, tabs, trekkspill, knapper og modalvinduer (blant annet elementer).

Det er vanskelig å lære alt dette, og å implementere det samtidig. Ta det steg for steg, og vær villig til å undersøke mer hvis du blir forvirret.

Ta en titt på A11Ys tips og tips for å komme i gang. Du støter på konkrete forslag som hopp-til-innhold-koblinger og farger med høy kontrast. Disse teknikkene har hver sin egen detaljnivå, så implementeringen er for det meste om testing for å se hva som fungerer.

Tenk på blinde brukere som kanskje bruker en automatisk innholdsleser. De kan også ha en lydoversetter, eller til og med et spesielt tastatur for å navigere på nettet med taster i stedet for en mus. Det er derfor riktig semantisk HTML (se på denne artikkelen) er så viktig med egenskaper som tabindex og tilgangsnøkkel.

Hvis du vil dykke inn, så vurder å hente et tilgjengelighet-klar tema. Du kan studere arkitekturen og tilpasse designet slik at det passer ditt prosjekt.

Tilgjengelighetstestverktøy

Hvis du vil komme i gang, velg et område med tilgjengelighet, og prøv det. Deretter kan du bruke testverktøy til å måle nivået på suksess.

Det er verdt å nevne at denne prosessen kan være frustrerende. Det er så mye å vurdere, og WCAGs retningslinjer er så vanskelig å forstå at du kan ende opp med overbelastning av informasjon.

Det viktigste er å bare fortsette å bevege seg. Velg et område med tilgjengelighet, og gjør det ditt fokus. Bruk deretter disse verktøyene for å hjelpe deg med å justere og forbedre arbeidet ditt.

For eksempel kan du prøve å jobbe med WCAGs kontrastspesifikasjoner til forbedre lesbarheten. Når du velger dine farger, kan du bare bruke denne gratis kontrastforholdskontrollen for å se om de jobber sammen.

Dessverre er WCAG 2.0-retningslinjene så forvirrende at du kanskje har problemer med å forstå kravene. Men jo mer du prøver jo mer du vil lære og jo mer du vil forstå.

For å teste et nettsted som allerede er online, sjekk ut WAVE. Det er en gratis visuell kontroller som viser feil, varsler, kontrastproblemer og andre spesifikasjoner av et nettsted. Du får en visuell visning og en liste over problemer i sidefeltet.

Det er en annen gratis app på Cynthia Says nettside som kan sjekk nettsteder for WCAG suksessgrader for A, AA, AAA, og § 508 for overholdelse av regjeringen.

Og hvis du er i åpen kilde, ta en titt på disse gratis tilgjengelighet testverktøy på GitHub.

• HTML CodeSniffer
• Automatisert tilgjengelighet Testing Tool
• WCAG Validator

Nettleser tillegg

Browser-tilleggsprogrammer gir sannsynligvis de raskeste og enkleste metodene for tilgjengelighetstesting. Du kan kjøre disse fra hvilken som helst datamaskin på hvilken som helst nettside for å få virkelig nyttige resultater.

AInspector for Firefox regnes som en nødvendighet for tilgjengelighet. Dette kontrollerer alt, og det er mye grundigere enn WAVE testeren.

Mozilla-brukere kan også like WCAG Contrast Checker, som også er et gratis tillegg.

Chrome-brukere har ikke AInspectoren, men de har tilgjengelighetsutviklerverktøyene opprettet offisielt av Google. Dette legger til ekstra verktøy i inspektørvinduet for å sjekke tilgjengelighetsretningslinjer.

Chrome-brukere har også lysstyrkekontrollere for fargekontrast, og noen andre gratis utvidelser.

Dessverre kunne jeg ikke finne mye for Safari-brukere, men jeg fant en utvidelse for Opera som kontrollerer WCAG 2.0-samsvar. Hvis du er villig til å søke Google hardt nok, kan du finne flere verktøy der ute.

Videre lesning

Hvis du er seriøs om å lære nettilgjengelighet, vær forberedt på en lang vei. Det er ikke lett, men det er veldig tilfredsstillende.

Nå bør du forstå mer om den faktiske definisjonen av webtilgjengelighet, hvorfor den eksisterer, og mindre detaljer om hva utviklere forventes å gjøre for å forbedre sine nettsteder. Det neste trinnet er videre forskning og praksis for å gripe disse prinsippene inn i arbeidsflyten din.

Sjekk ut følgende innlegg for mer info, og sørg for å konsultere WCAGs retningslinjer hvis du vil ha kunnskap direkte fra kilden.

• Slik forbedrer du HTML Table Accessibility med Markup
• Tilgjengelig design for brukere med funksjonshemninger
• 6 tips for forbedring av tilgjengeligheten til nettstedet
• Sørg for at nettstedet ditt er tilgjengelig for synshemmede