Vad händer om jag berättade för webbdesigners där ute att det finns människor som kan besöka din webbplats som inte bryr sig om hur det ser ut?
Synsintresserade navigerar på nätet av samma skäl som vi alla gör, för att hitta information, att handla och utföra en rad viktiga uppgifter med webbaserade applikationer. Men synskadade upplever webben annorlunda och vi måste vara känsliga för deras behov när vi utformar och bygger webbplatser.
Enligt US Census Bureau och FN och Världsbanken över 47 miljoner amerikaner, och upp till 650 miljoner människor över hela världen, har någon form av funktionshinder. Varje besökare på de webbplatser du designar behöver för att kunna hitta den information de söker och utföra de uppgifter de avser att utföra oberoende av vad webbsidan eller appen ser ut. Många olika faktorer som går in i skapandet av webbsidan eller applikationen kan påverka tillgängligheten.
Du tar det blå piller - historien slutar, du vaknar i sängen och tror vad du vill tro. Du tar det röda piller - du bor i Underlandet, och jag visar dig hur djupt kaninhålet går. - Matrisen
Är du redo att gå ner med tillgänglighetskanin med mig? Vi måste dyka in på de tekniska aspekterna på webbsidor. HTML är skelettet på en webbsida medan CSS, JavaScript och bilder förbättrar HTML. Ofta misslyckas synskadade människor med alla dessa förbättringar. Även om tillgänglighet är främst en utvecklaruppgift, kan ibland de tekniska kraven som krävs för att bevara eller förbättra tillgängligheten påverka webbplatsens utseende. Det innebär att design, kopiering, användarupplevelse och utveckling alla måste samarbeta för att se till att navigeringskontroller, formulär, knappar, rubriker, knappar, länkar och mer är tillgängliga.
design, kopia, användarupplevelse och utveckling behöver alla samarbeta för att se till att navigeringskontroller, formulär, knappar, rubriker, knappar, länkar och mer är tillgängliga
Människor som är blinda, synskadade, analfabeter eller lärande med hjälp av hjälpteknik för att navigera på Internet. Skärmsläsare är den vanligaste hjälptekniken för webben. Dessa program försöker tolka det som visas på webbsidan och förmedla det till användaren, vanligtvis genom att konvertera texten till tal men ibland genom en Braille-utmatningsenhet. Skärmförstorare används ofta också i samband med en skärmläsare. Vanligtvis försöker en skärmläsare att analysera HTML-filen från toppen av HTML-filen till botten och tala relevanta element till användaren. Helst kan skärmläsaren tillåta användaren att framgångsrikt flytta en virtuell markör nerför sidan för att fylla i formulärfält, klicka på knappar och göra val från rullgardinsmenyer och andra kontroller.
För att testa grundligt för tillgänglighet måste du se till att webbplatsen eller appen fungerar bra på alla de många skärmsläsare som är tillgängliga. Det finns flera populära gratis och / eller öppna källskärmsläsare på varje plattform, inklusive KÄFTAR , och NVDA . Microsoft-användare kan använda NVDA, medan Apple-datorer och iOS-enheter kommer med Dubbning vilket kan förstora tangentbordskontrollerna och läsa skärmens innehåll, och för Unix-enheter finns det späckhuggare . Chrome-webbläsaren har två plugins för hjälpteknik, ChromeVox för skärmavläsning och ChromeVis för förstoring.
De flesta problem med webtillgänglighet uppstår när skärmläsarens virtuella markör infångas i dåligt utformad form eller hoppar över en viktig kontroll eller en viktig del av textinformationen. Att verifiera att webbplatser verkligen är användbara liknar webbläsartestning eftersom varje skärmläsare har olika krav och begränsningar. Därför är det viktigt att förstå beteendet hos varje skärmläsare. Behovet hos olika skärmsläsare kan tillgodoses genom att lägga till olika speciella HTML-taggar till de viktiga elementen på sidan.
Modernt dynamiskt webb-användargränssnitt kan vara särskilt problematiskt för tillgänglighet eftersom viktiga element läggs till sidan dynamiskt med hjälp av JavaScript. Anpassade rullgardinsmenyer, modaler, verktygstips, dragspel innehåll och dynamiska fel och meddelanden kan vara utmanande för användarna av skärmläsare att förstå på grund av en kommunikationsfördelning mellan HTML, JavaScript och skärmläsaren. Native HTML och JavaScript har ingen möjlighet att kommunicera sida (Document Object Model) uppdateringar till skärmsläsare. Utvecklare behöver flytta "fokus" (skärmläsarens virtuella markör) till den del av användargränssnittet som ändrats. När en modal öppnar upp utvecklare måste sätta användarens fokus på den modala så att skärmläsaren kan läsa det innehållet och användaren kan förstå och interagera med det.
WAI-ARIA kan överbrygga mellanrummen mellan vad den råa HTML på sidan säger och vilka synskadade användare ser
Detta görs genom att använda särskilda HTML-taggar som heter WAI-ARIA taggar. WAI-ARIA (Tillgängliga Rich Internet Applications) kan överbrygga luckorna mellan vad den råa HTML-sidan på sidan säger och vilka synade användare ser genom att tillhandahålla ett standardiserat sätt för utvecklare att lägga till extra betydelse för stater, egenskaper, relationer, roller och levande regioner som en skärmläsare skulle annars inte förstå. Utvecklare kan använda aria-nivå för att förklara för skärmläsare hierarkin för varje rubrik på sidan. Med aria-etikettutvecklare kan du lägga till en rubrik för att beskriva syftet med ett diskret element på sidan. Detta hjälper utvecklare att skapa tydliga relationer mellan olika element. Utvecklare kan också uppmärksamma viktiga kontroller genom att märka dem med aria-roll-taggar, till exempel en nedrullningsmeny knapp skulle märkas med följande tagg: Aria-har popup: true.
Se pennan Enkla tillgängliga flikar av Scott Vinkle ( @svinkle ) på CodePen .
I HTML-koden i exemplet ovan skapas flikarna med en oorderad lista med klasser på varje listobjekt. JQuery fångar klickhändelserna när en flik klickas och lägger till 'aria-selected': 'true' och 'tab-widget__tab-content-active' till den valda fliken och döljer de andra flikarna genom att lägga till 'aria-selected': ' falskt "till de återstående flikarna. På rad 127 är de ursprungliga attributen för flikarna inställda, tillsammans med dessa snippets hjälpskärmsläsare känner igen vilken flik som är synlig. JavaScript på rad 35 lägger också till tangentbordsstöd till flikarna. Resten av filen hanterar att fånga klick och tangentbordshändelser så att jQuery kan lägga till attribut "roll" och "presentation" till den aktuella fliken.
Aria-taggar kan hjälpa skärmsläsare att tolka anpassade kontroller som radioknappar när den anpassade kontrollen är märkt med: Aria-roll = radioknapp. När en applikation har ett sandlådaområde som kommunicerar feedback eller uppdateringar till användaren kan det märkas med en live-regionstagg: Aria-live. Detta säkerställer att när texten på detta element ändras kommer det automatiskt att prata med användaren via skärmläsaren.
Siduppdateringar är en viktig del av webben för skärmsläsare, eftersom när en siduppdatering inträffar signalerar den till skärmläsaren att den ska meddela den nya sidan till användaren och läsa om innehållet på sidan till användaren. Det innebär att webbsidor för enstaka sidor utgör speciella utmaningar för tillgänglighet. I en enda sidappapp uppdateras ingen fullständig sida så skärmläsaren och därigenom inte användaren kommer att bli varnad för det uppdaterade innehållet. Resultatet blir att användaren inte får feedback om sina handlingar. Den bästa lösningen är att emulera inbyggt uppdateringsbeteende. Uppdaterad sidtitel och meddelande till användaren.
De fullständiga specifikationerna för WAI-ARIA upprätthålls av W3 som specifikationerna för HTML själv under Web Accessibility Initiative (WAI), men ibland kan riktlinjer vara mer användbara än specifikationer så här är några allmänna riktlinjer för designers:
Det finns flera enkla beslut du kan göra när du utvecklar en webbplats som gör webbplatsen mer tillgänglig utan att bli för djup i särskild tillgänglighetsmarkering eller skärmsläsningstestning. Genom att se till att din HTML förmedlar mening genom sin struktur, hjälper du skärmsläsare att bearbeta information på samma sätt som den visas på sidan för synliga användare. Detta är viktigt för användare som använder en förstoringsglas i samband med en skärmläsare.
Genom att använda lämplig HTML-markering för rubriker, listor, tabeller och andra element kan skärmläsaren kategorisera sidans struktur för användaren på bekant sätt. För mer involverade layouter innehåller HTML5 ytterligare element, till exempel
Vi har gått väldigt långt ner detta kaninhål ihop eftersom de potentiella mottagarna av allt detta arbete är en större grupp än vad du kanske tror. Om du någonsin har försökt att använda en mobilapp med en hand eftersom din andra hand bär någonting, om du någonsin har försökt att använda en mus med din icke dominerade hand på grund av en skada, har du blivit situationsaktiverad. Och är det inte underbart när dina fingrar är klibbiga och du kan fortfarande navigera på en webbplats med ett tangentbord med dina knogar? Vi alla är tyvärr mottagliga för funktionshinder som kommer från att bli äldre som minnesförlust, hörsel, försämrad syn och begränsad rörelse.
Webens kraft är i sin universalitet. Åtkomst av alla oavsett funktionshinder är en viktig aspekt. - Tim Berners-Lee, W3C Director och uppfinnare av World Wide Web
Utvalda bilder, tillgänglighetsbild via Shutterstock.