Designervejledningen til det grundlæggende i Web Accessibility Design

Internettet skal være et sted, hvor alle kan få adgang til det samme indhold fra hele verden. Responsive teknikker har gået langt enhed-agnostiske design. Men hvad med tilgængelighed-agnostiske designs?

Webtilgængelighed har eksisteret i årevis, men implementeringen kræver nye fremskridt inden for teknologi og webudvikling. Mange udviklere ønsker at hjælpe, men det er svært at forstå, hvordan man designer for tilgængelighed, fordi der er så mange bevægelige dele. Dette omfatter høj kontrasttekst, lydsider til blinde, optimerede medier og fallbacks til ikke-JS / CSS browsere.

I dette indlæg vil jeg dække det grundlæggende i tilgængelighed design, hvad det er, hvad det har til formål at løse, og skridt du kan tage for at komme i gang. Bemærk, dette er et utroligt detaljeret emne, og det vil tage måneder eller år med praksis at forstå fuldt ud. Men fordelene er værd at gøre, og alle dine web-projekter vil forlade hver besøgende med et varigt indtryk af tilgængeligt indhold.

Intro til tilgængelighed

Generelt er tilgængelighed ideen om at bygge indhold, så det det kan forbruges af nogen. Dette kan omfatte blinde personer, der ikke kan læse, og det kan omfatte personer med fysiske handicap, som ikke kan betjene en mus eller et tastatur (eller en af ​​dem).

Men det kan også omfatte folk med små mangler i vision. Det kan omfatte folk med dysleksi eller forståelse spørgsmål. Faktisk ideen om “web tilgængelighed” omfatter enhver mulig forringelse, der kan påvirke, hvordan nogen interagerer med eller bruger et websted.

Måske er det endnu vigtigere, hvad webtilgængelighed kan tilbyde, som beskrevet her i en Wikipedia-definition:

Alligevel hævder Anne Gibson i sin List Apart-post, at Wikipedia's definition er for vag, og det er det ikke lige om mennesker med handicap. Det handler virkelig om alle sammen på nettet fra hele verden det Måske har ikke optimal adgang til internettet.

Mange devs mener, at tilgængelighed er kun for blinde mennesker, som ikke kan læse. Men der er faktisk fire primære kategorier af webtilgængelighed:

1. Visuel - lavsyn eller dårlig / ingen syn
2. auditiv - hørehæmmede eller døve
3. Kognitiv - problemer med at forstå eller forbruge oplysninger
4. Motor - fysiske tilgængelighedsproblemer, der kan kræve specielle input enheder som tastaturer eller talekommandoprogrammer

Disse kategorier har hver især omfattende teknikker ændre lige så hurtigt som webstandarder. Men der er en følelse af stabilitet med disse standarder ratificeret i WCAG (Web Content Accessibility Guidelines).

Nogle websteder, som offentlige institutioner er forpligtet ved lov at følge disse retningslinjer. De anvender internationalt gennem W3C.

Lad os se på bureaukratiet bag webtilgængelighed, og dykk derefter ind i nogle relevante designtips.

Den W3C & Accessible Design

Der er et par stykker akronymer relateret til web tilgængelighed. Disse kan være komplicerede, hvis du er helt ny i emnet, men en gang forenklet håber jeg, at de bliver mere fornuftige.

• W3C (World Wide Web Consortium) - En international gruppe, der definerer webstandarder for protokoller, sprog og regler. Alle officielle retningslinjer for tilgængelighed er omfattet af denne organisation.
• WAI (Web Accessibility Initiative) - Et officielt program, der dækker alt om tilgængelighed. Dette paraply udtryk indeholder alle regler, retningslinjer og teknikker til moderne tilgængelighed.
• WCAG (Retningslinjer for webindholdsadgang) - En gruppe af standarder og regler for at hjælpe designere vurderer deres websites baseret på niveauet for tilgængelighed.
• ARIA (Tilgængelige Rich Internet-applikationer) - En specifik standard, der definerer, hvordan man bygger tilgængelige tilgængelige applikationer, der er afhængige af JavaScript / Ajax og lignende teknologier. Læs mere om dette i dette indlæg af Anna Monus.

Der findes andre retningslinjer under WAI-paraplyen, herunder UAAG for brugeragenter og ATAG til webforfatterværktøjer. I øjeblikket bør du være mest interesseret i WAI's forslag og retningslinjerne fra WAI's regelsæt under navnet WCAG.

En stor ressource til at lære mere er dette indlæg fra W3C om handicap og deler historier om, hvordan handicappede mennesker får adgang til internettet. Det kan være svært at forstå alle de indviklede problemer, endsige forstå, hvordan man løser dem. Men den bedste kilde er fra mennesker, der står over for disse problemer dagligt.

Et andet vigtigt emne du bør forstå er WCAG overensstemmelse. Dette vedrører et websteds niveau for tilgængelighed dækker en lang række faktorer. Niveauer er baseret på overensstemmelse med et ratingsystem af A, AA og AAA. Du kan tjekke dette med et web tilgængelighed checker værktøj. Den bedste score er AAA.

For at lære mere om disse retningslinjer, se W3C's Introduktion til forståelse af WCAG 2.0 artiklen. Se også disse relaterede links for flere detaljer:

• WCAG 2.0 Forenklet
• Afsnit 508 WCAG Performance

Fremgangsmåde til tilgængelig design

Jeg anbefaler stærkt at besøge A11Y-projekts websted for praktiske tilgængelighedstips. A11Y (som også er et tal) er et gratis open source-projekt hostet på GitHub, tilbyder teknikker til tilgængeligt webdesign.

Du kan gennemse deres tjekliste over tilgængelighedsartikler eller endda en flok designmønstre til elementer som dropdowns, faner, accordeoner, knapper og modal vinduer (blandt andre elementer).

Det er svært at lære alle disse ting og at gennemføre det på samme tid. Tag det trin for trin, og vær villig til at undersøge mere, hvis du bliver forvirret.

Tjek A11Ys vejledninger og hurtige tips til at komme i gang. Du vil støde på specifikke forslag som jump-to-content links og høj kontrast farveskemaer. Disse teknikker har hver deres eget detaljeringsniveau, så implementeringen handler mest om at teste for at se, hvad der virker.

Overvej blinde brugere, der muligvis bruger en automatiseret indholdslæser. De kan også have en lydoversætter eller endda et specielt tastatur til at navigere på nettet med nøgler frem for en mus. Det er derfor korrekt semantisk HTML (se et kig på denne artikel) er så vigtigt med egenskaber som tabindex og accesskey.

Hvis du vil dykke ind, så overvej at hente et tilgængelighedsklar tema. Du kan studere arkitekturen og tilpasse designet til at passe til dit projekt.

Accessibility Testing Tools

Hvis du vil komme i gang, skal du bare vælge et område med tilgængelighed og prøve det ud. Derefter kan du bruge testværktøjer til at måle dit niveau af succes.

Det er værd at nævne denne proces kan være frustrerende. Der er så meget at overveje, og WCAG-retningslinjerne er så svært at forstå, at du kan ende med information overbelastning.

Det vigtige er at bare flytte. Vælg et område med tilgængelighed, og gør det til dit fokus. Brug derefter disse værktøjer til at hjælpe dig med at tilpasse og forbedre dit arbejde.

For eksempel kan du prøve at arbejde med WCAGs kontrastspecifikationer til forbedre læsbarheden. Når du har valgt dine farver, skal du blot bruge denne gratis kontrast ratio checker for at se om de arbejder sammen.

Desværre er WCAG 2.0 retningslinjerne så forvirrende, at du måske har svært ved at forstå kravene. Men jo mere du prøver jo mere du vil lære, og jo mere vil du forstå.

For at teste et websted, der allerede er online, tjek WAVE. Det er en gratis visuel checker der viser fejl, advarsler, kontrastproblemer og andre specifikationer på et websted. Du får en visuel visning og en liste over problemer i sidepanelet.

Der er en anden gratis app på Cynthia Says hjemmeside, som kan tjek hjemmesider for WCAG succes ratings af A, AA, AAA, og afsnit 508 for overholdelse af regeringsret.

Og hvis du er i open source, kig på disse gratis tilgængelighed test værktøjer på GitHub.

• HTML CodeSniffer
• Automatiseret tilgængelighedstestværktøj
• WCAG Validator

Browser-tilføjelser

Browser-tilføjelser giver sandsynligvis de hurtigste og nemmeste metoder til tilgængelighedstestning. Du kan køre disse fra enhver computer på enhver hjemmeside for at få virkelig nyttige resultater.

AInspector for Firefox anses for at være en nødvendighed for tilgængelighed. Dette kontrollerer alt, og det er meget mere grundigt end WAVE testeren.

Mozilla-brugere kan også lide WCAG Contrast Checker, som også er en gratis tilføjelse.

Chrome-brugere har ikke AInspectoren, men de har Accessibility Developer Tools, der er oprettet officielt af Google. Dette tilføjer ekstra værktøjer i inspektionsvinduet for at kontrollere tilgængelighedsretningslinjer.

Chrome-brugere har også lysstyrkecheckere til farvekontrast og nogle andre gratis udvidelser.

Desværre kunne jeg ikke finde meget for Safari-brugere, men jeg fandt en udvidelse til Opera, der kontrollerer overholdelse af WCAG 2.0. Hvis du er villig til at søge Google nok nok, kan du finde flere værktøjer derude.

Yderligere læsning

Hvis du er seriøs om at lære webadgang, så vær forberedt på en lang vej. Det er ikke let, men det er meget tilfredsstillende.

Nu skal du forstå mere om den egentlige definition af webtilgængelighed, hvorfor den eksisterer, og mindre detaljer om, hvad udviklere forventes at gøre for at forbedre deres websites. Det næste skridt er yderligere forskning og praksis for at inddrage disse principper i din arbejdsgang.

Tjek de følgende stillinger for mere information, og sørg for at konsultere WCAG retningslinjerne, hvis du vil have viden direkte fra kilden.

• Sådan forbedres HTML Table Accessibility med Markup
• Tilgængeligt design til brugere med handicap
• 6 tips til forbedring af tilgængelighed på hjemmesiden
• Sørg for, at dit websted er tilgængeligt for det synshæmmede