Designerens guide till grunderna för webb Accessibility Design

Webben ska vara en plats där alla kan komma åt samma innehåll från var som helst i världen. Responsiva tekniker har gått långt enhet-agnostiska mönster. Men vad sägs om tillgänglighet-agnostiska mönster?

Web accessibility har funnits i flera år, men genomförandet kräver nya framsteg inom teknik och webbutveckling. Många utvecklare vill hjälpa, men det är svårt att förstå hur man designar för tillgänglighet, eftersom det finns så många rörliga delar. Detta inkluderar högkontrasttext, ljudsidor för blinda, optimerade media och fallbacks för icke-JS / CSS-webbläsare.

I det här inlägget täcker jag grunderna för tillgänglighetsdesign, vad det är, vad det syftar till att lösa och åtgärder du kan ta för att komma igång. Observera, det här är ett otroligt detaljerat ämne, och det tar månader eller år med övning att förstå fullständigt. Men fördelarna är värda ansträngningen, och alla dina webbprojekt kommer att lämna varje besökare med ett bestående intryck av tillgängligt innehåll.

Intro till tillgänglighet

Generellt sett är tillgängligheten tanken att bygga innehåll så att det kan konsumeras av någon. Det kan innebära blinda personer som inte kan läsa, och det kan innehålla personer med funktionshinder som inte kan använda mus eller tangentbord (eller endera).

Men det kan också inkludera personer med små brister i syn. Det kan inkludera personer med dyslexi eller läsförståelse frågor. Faktum är att idén om “webbtillgänglighet” innefattar alla möjliga nedskrivningar som kan påverka hur någon interagerar med eller konsumerar en webbplats.

Kanske viktigare är vad webbtillgänglighet kan erbjuda, som beskrivs här i en Wikipedia-definition:

Ändå argumenterar Anne Gibson i sin lista Apart post att Wikipedias definition är för vag, och det är det inte bara om funktionshindrade. Det handlar verkligen om alla på webben från hela världen som kanske inte har optimal åtkomst till Internet.

Många devs tycker att tillgänglighet bara är för blinda människor som inte kan läsa. Men det finns faktiskt fyra primära kategorier av webbtillgänglighet:

1. Visuell - nedsatt syn eller dålig / ingen syn
2. Auditiv - hörselskadad eller döv
3. Kognitiv - problem med att förstå eller konsumera information
4. Motor - fysiska tillgänglighetsproblem som kan kräva speciella inmatningsenheter som tangentbord eller röstkommandoprogram

Dessa kategorier har var och en omfattande tekniker som är ändras lika snabbt som webbstandarder. Men det finns en känsla av stabilitet med dessa standarder ratificerade i WCAG (Web Content Accessibility Guidelines).

Några webbplatser, som statliga institutioner är skyldiga enligt lag att följa dessa riktlinjer. De gäller internationellt genom W3C.

Låt oss ta en titt på byråkratin bakom webtillgänglighet, och dyka sedan in i några tillämpliga designtips.

W3C & Tillgänglig Design

Det finns en hel del akronymer relaterade till webbtillgänglighet. Dessa kan vara komplicerade om du är helt ny i ämnet, men en gång förenklad hoppas jag att de blir mer meningsfulla.

• W3C (World Wide Web Consortium) - En internationell grupp som definierar webbstandarder för protokoll, språk och föreskrifter. Alla officiella riktlinjer för tillgänglighet omfattas av denna organisation.
• WAI (Web Accessibility Initiative) - Ett officiellt program som täcker allt om tillgänglighet. Detta paraplyterminal innehåller alla regler, riktlinjer och tekniker för modern tillgänglighet.
• WCAG (Riktlinjer för webbinnehålls tillgänglighet) - En grupp av standarder och regler som hjälper designers att betygsätta sina webbplatser baserat på tillgängligheten.
• ARIA (Tillgängliga Rich Internet Applications) - En specifik standard som definierar hur man bygger tillgängliga rika applikationer som är beroende av JavaScript / Ajax och liknande teknik. Läs mer om detta i det här inlägget av Anna Monus.

Andra riktlinjer finns under WAI-paraplyet, inklusive UAAG för användaragenter och EN TAGG för webbverktygsverktyg. För tillfället borde du vara mest intresserad av WAI: s förslag och riktlinjerna från WAI: s regelsätt under namnet WCAG.

En bra resurs för att lära sig mer är detta inlägg från W3C om funktionshinder och delar berättelser om hur funktionshindrade personer får tillgång till Internet. Det kan vara svårt att förstå alla invecklade problem, än mindre förstå hur man löser dem. Men Den bästa källan är från människor som står inför dessa problem dagligen.

Ett annat viktigt ämne du borde förstå är WCAG-överensstämmelse. Detta gäller en webbplatsens tillgänglighetsnivå som täcker en mängd olika faktorer. Nivåerna är baserade på överensstämmelse med ett betygssystem av A, AA och AAA. Du kan kontrollera detta med ett verktyg för tillgänglighet för webbåtkomst. Den bästa poängen är AAA.

För att lära dig mer om dessa riktlinjer, kolla in W3C: s Introduktion till Förståelse WCAG 2.0 artikeln. Titta även på dessa relaterade länkar för mer information:

• WCAG 2.0 förenklad
• Avsnitt 508 WCAG Prestanda

Åtgärder för att få tillgång till design

Jag rekommenderar starkt att du besöker webbplatsen A11Y för praktiska tips om tillgänglighet. A11Y (som också är en talord) är ett gratis open source-projekt värd på GitHub, erbjuder tekniker för tillgänglig webbdesign.

Du kan bläddra i deras checklista över tillgänglighetsobjekt eller till och med en massa designmönster för element som dropdowns, flikar, dragspel, knappar och modala fönster (bland annat).

Det är svårt att lära sig alla dessa saker och att genomföra det samtidigt. Ta det steg för steg, och var villig att undersöka mer om du blir förvirrad.

Kolla in A11Ys tips och snabba tips för att komma igång. Du stöter på specifika förslag som länkar till hoppa till innehåll och färgtoner med hög kontrast. Dessa tekniker har var sin egen detaljnivå, så genomförandet handlar oftast om att testa för att se vad som fungerar.

Överväga blinda användare som kanske använder en automatisk innehålls läsare. De kan också ha en ljud översättare, eller till och med ett speciellt tangentbord för att navigera på webben med nycklar snarare än en mus. Det här är varför korrekt semantisk HTML (titta på den här artikeln) är så viktig med egenskaper som tabindex och accesskey.

Om du vill dyka in kan du överväga att ta upp ett tillgänglighetsberedt tema. Du kan studera arkitekturen och anpassa designen för att passa ditt projekt.

Tillgänglighetstestverktyg

Om du vill komma igång bara välj ett område med tillgänglighet och prova det. Då kan du använda testverktyg för att mäta din framgångsnivå.

Det är värt att nämna att denna process kan vara frustrerande. Det finns så mycket att överväga, och WCAG-riktlinjerna är så svåra att förstå att du kan hamna med information överbelastning.

Det viktiga är att bara fortsätta flytta. Välj ett område med tillgänglighet och gör det till ditt fokus. Använd sedan dessa verktyg för att hjälpa dig att tweak och förbättra ditt arbete.

Till exempel kan du försöka arbeta med WCAGs kontrastspecifikationer till förbättra läsbarheten. När du väl valt dina färger, använd bara den här kontrollen för fri kontrast för att se om de fungerar tillsammans.

Tyvärr är WCAG 2.0-riktlinjerna så förvirrande att du kan ha svårt att förstå kraven. Men ju mer du prövar ju mer du lär dig och ju mer du förstår.

För att testa en webbplats som redan är online, kolla in WAVE. Det är en fri visuell kontroller som visar fel, varningar, kontrastproblem och andra specifikationer på en webbplats. Du får en visuell vy och en lista med problem i sidofältet.

Det finns en annan gratis app på Cynthia Says webbplats som kan kolla webbplatser för WCAG-framgångsbetyg på A, AA, AAA, och avsnitt 508 för regeringens överensstämmelse.

Och om du är öppenkälla ta en titt på dessa gratis tillgänglighet testverktyg på GitHub.

• HTML CodeSniffer
• Automated Accessibility Testing Tool
• WCAG Validator

Tillägg till webbläsare

Tilläggsprogram för webbläsare ger troligtvis de snabbaste och enklaste metoderna för tillgänglighetsprovning. Du kan köra dessa från vilken som helst dator på vilken webbplats som helst för att få riktigt användbara resultat.

AInspector for Firefox anses vara ett måste för tillgänglighet. Detta kontrollerar allt, och det är mycket grundligare än WAVE-testaren.

Mozilla-användare kanske också gillar WCAG Contrast Checker som också är en gratis tillägg.

Chrome-användare har inte AInspector, men de har verktygen Accessibility Developer som skapats officiellt av Google. Detta lägger till extra verktyg i inspektionsfönstret för att kontrollera tillgänglighetsriktlinjer.

Chrome-användare har också ljusstyrka kontroller för färgkontrast och några andra fria extensions.

Tyvärr kunde jag inte hitta mycket för Safari-användare, men jag hittade en förlängning för Opera som kontrollerar WCAG 2.0-överensstämmelse. Om du är villig att söka på Google tillräckligt hårt kan du hitta fler verktyg där ute.

Vidare läsning

Om du är seriös om att lära dig webbåtkomst, var då förberedd för en lång väg. Det är inte lätt men det är mycket uppfyllande.

Nu borde du förstå mer om den faktiska definitionen av webbtillgänglighet, varför den existerar och mindre detaljer om vilka utvecklare som förväntas göra för att förbättra sina webbplatser. Nästa steg är ytterligare forskning och övning för att integrera dessa principer i ditt arbetsflöde.

Kolla in följande inlägg för mer information och var noga med att konsultera WCAGs riktlinjer om du vill ha kunskap direkt från källan.

• Så här förbättrar du HTML-tabellens tillgänglighet med Markup
• Tillgänglig design för användare med funktionshinder
• 6 tips för att förbättra tillgängligheten på webbplatsen
• Se till att din webbplats är tillgänglig för det visuellt försämrade