Designer's Guide to the Basics van Web Accessibility Design

Het web moet een plaats zijn waar iedereen overal ter wereld toegang heeft tot dezelfde inhoud. Responsieve technieken hebben een lange weg afgelegd apparaat-agnostische ontwerpen. Maar hoe zit het met toegankelijkheid-agnostische ontwerpen?

Webtoegankelijkheid bestaat al jaren, maar de implementatie ervan vereist nieuwe ontwikkelingen in technologie en webontwikkeling. Veel ontwikkelaars willen helpen, maar het is moeilijk om te begrijpen hoe je moet ontwerpen voor toegankelijkheid, omdat er zoveel bewegende delen zijn. Dit omvat tekst met hoog contrast, audiopagina's voor blinde, geoptimaliseerde media en fallbacks voor niet-JS / CSS-browsers.

In deze post behandel ik de basisbeginselen van toegankelijkheidsontwerp, wat het is, wat het beoogt op te lossen en stappen die u kunt nemen om van start te gaan. Let op, dit is een ongelooflijk gedetailleerd onderwerp en het zal maanden of jaren duren voordat je het volledig begrijpt. Maar de voordelen zijn de moeite waard en al uw webprojecten zullen elke bezoeker een blijvende indruk geven van toegankelijke inhoud.

Inleiding tot toegankelijkheid

Over het algemeen is toegankelijkheid het idee om inhoud te bouwen, zodat het kan door iedereen worden geconsumeerd. Dit kunnen blinde mensen zijn die niet kunnen lezen, en het kan mensen met een fysieke handicap omvatten die geen muis of toetsenbord kunnen bedienen (of geen van beiden).

Maar het kan ook mensen omvatten lichte tekortkomingen in visie. Het kan mensen omvatten problemen met dyslexie of begrijpend lezen. In feite is het idee van “webtoegankelijkheid” omvat elke mogelijke beperking die van invloed kan zijn op hoe iemand met een website omgaat of deze gebruikt.

Misschien nog belangrijker is wat webtoegankelijkheid kan bieden, zoals hier beschreven in een Wikipedia-definitie:

Toch betoogt Anne Gibson in haar List Apart bericht dat de definitie van Wikipedia te vaag is, en dat is het niet net over mensen met een handicap. Het gaat echt over iedereen op internet van over de hele wereld dat mogelijk geen optimale toegang tot internet hebben.

Veel ontwikkelaars denken dat toegankelijkheid alleen voor blinde mensen is die niet kunnen lezen. Maar er zijn eigenlijk vier hoofdcategorieën van webtoegankelijkheid:

1. zichtbaar - slechtziend of slecht / geen zicht
2. gehoor- - gehoorgestoorden of doof
3. cognitieve - moeite met het begrijpen of consumeren van informatie
4. Motor - fysieke toegankelijkheidsproblemen waarvoor speciale invoerapparaten zoals toetsenborden of spraakopdrachtprogramma's nodig kunnen zijn

Deze categorieën hebben elk uitgebreide technieken die dat zijn verandert net zo snel als webstandaarden. Maar er is een gevoel van stabiliteit met deze standaarden geratificeerd in de WCAG (Web Content Accessibility Guidelines).

Sommige websites, zoals overheidsinstellingen zijn wettelijk verplicht om deze richtlijnen te volgen. Ze zijn internationaal van toepassing via het W3C.

Laten we eens kijken naar de bureaucratie achter webtoegankelijkheid en vervolgens een kijkje nemen in een aantal toepasselijke ontwerptips.

Het W3C & toegankelijk ontwerp

Er zijn er nogal wat acroniemen met betrekking tot webtoegankelijkheid. Deze kunnen ingewikkeld zijn als je helemaal nieuw bent, maar eenmaal vereenvoudigd hoop ik dat ze logischer zullen zijn.

• W3C (Wereldwijde web consortium) - Een internationale groep die webstandaarden definieert voor protocollen, talen en voorschriften. Alle officiële richtlijnen voor toegankelijkheid vallen onder deze organisatie.
• WAI (Web Accessibility Initiative) - Een officieel programma dat alles over toegankelijkheid omvat. Deze overkoepelende term bevat alle regels, richtlijnen en technieken voor moderne toegankelijkheid.
• WCAG (Web Content Accessibility Guidelines) - Een groep normen en regels om ontwerpers te helpen bij het beoordelen van hun websites op basis van de toegankelijkheid.
• ARIA (Toegankelijke Rich Internet-toepassingen) - Een specifieke standaard die definieert hoe u toegankelijke rijke applicaties kunt bouwen die afhankelijk zijn van JavaScript / Ajax en vergelijkbare technologieën. Lees hier meer over in dit bericht door Anna Monus.

Andere richtlijnen bestaan ​​onder de WAI-paraplu, waaronder UAAG voor user-agents en EEN LABEL voor web authoring tools. Voor nu zou je het meest geïnteresseerd moeten zijn in de suggesties van de WAI en de richtlijnen van de WAI-regelset onder de naam WCAG.

Een geweldige bron voor meer informatie is deze bijdrage van W3C over handicaps, waarbij verhalen worden gedeeld over hoe mensen met een handicap toegang hebben tot internet. Het kan moeilijk zijn om alle ingewikkelde problemen te begrijpen, laat staan ​​om te begrijpen hoe ze op te lossen. Maar de beste bron is van mensen die dagelijks met deze problemen worden geconfronteerd.

Een ander belangrijk onderwerp dat u moet begrijpen, is de conformiteit van WCAG. Dit heeft betrekking op de toegankelijkheid van een website voor een breed scala aan factoren. Niveaus zijn gebaseerd op overeenstemming met een classificatiesysteem van A, AA en AAA. U kunt dit controleren met een tool voor het controleren van de webtoegankelijkheid. De beste score is AAA.

Voor meer informatie over deze richtlijnen, bekijk W3C's Introduction to Understanding WCAG 2.0-artikel. Bekijk ook deze gerelateerde links voor meer details:

• WCAG 2.0 vereenvoudigd
• Sectie 508 WCAG-prestaties

Stappen naar toegankelijk ontwerp

Ik raad ten zeerste aan om de A11Y-projectwebsite te bezoeken voor praktische toegankelijkheidstips. A11Y (dat ook een numeroniem is) is een gratis open-sourceproject dat wordt gehost op GitHub, het aanbieden van technieken voor toegankelijke webdesign.

Je kunt bladeren in hun checklist van toegankelijkheidsitems, of zelfs een aantal ontwerppatronen voor elementen zoals vervolgkeuzelijsten, tabbladen, accordeons, knoppen en modale vensters (naast andere items).

Het is moeilijk om al deze dingen te leren en tegelijkertijd te implementeren. Neem het stap voor stap en wees bereid om meer te onderzoeken als je in de war raakt.

Bekijk de instructies van de A11Y en snelle tips om aan de slag te gaan. U komt specifieke suggesties tegen zoals jump-to-content links en contrastrijke kleurenschema's. Deze technieken hebben elk hun eigen detailniveau, dus implementatie gaat meestal over testen om te zien wat werkt.

Overweeg blinde gebruikers die mogelijk een geautomatiseerde inhoudlezer gebruiken. Ze kunnen ook een audio-vertaler hebben, of zelfs een speciaal toetsenbord voor het navigeren op het web met toetsen in plaats van een muis. Dit is waarom juiste semantische HTML (bekijk dit artikel) is zo belangrijk met eigenschappen zoals tabindex en toegangssleutel.

Als je wilt duiken, overweeg dan om een ​​toegankelijkheidsgereed thema op te pakken. U kunt de architectuur bestuderen en het ontwerp aanpassen aan uw project.

Accessibility Testing Tools

Als je wilt beginnen, kies dan een toegankelijkheidsgebied en probeer het uit. Vervolgens kunt u testtools gebruiken om uw succesniveau te bepalen.

Het is de moeite waard om te vermelden dat dit proces kan frustrerend zijn. Er is zoveel te overdenken en de WCAG-richtlijnen zijn zo moeilijk te begrijpen dat je met informatie-overload kunt eindigen.

Het belangrijkste is om gewoon door te gaan. Kies een bereikbaar gebied en maak er je focus van. Gebruik vervolgens deze hulpmiddelen om u te helpen uw werk aan te passen en te verbeteren.

U kunt bijvoorbeeld proberen om met de contrastspecificaties van de WCAG te werken de leesbaarheid verbeteren. Zodra u uw kleuren hebt gekozen, gebruikt u deze gratis controler voor de contrastverhouding om te zien of ze samen werken.

Helaas zijn de WCAG 2.0-richtlijnen zo verwarrend dat je misschien moeite hebt om de vereisten te begrijpen. Maar hoe meer je probeert, hoe meer je leert en hoe meer je zult begrijpen.

Ga voor het testen van een site die al online is naar WAVE. Het is een gratis visuele checker die fouten, waarschuwingen, contrastkwesties en andere specifieke kenmerken van een website weergeeft. U krijgt een visuele weergave en een lijst met problemen in de zijbalk.

Er is nog een gratis app op de website van Cynthia Says die dat kan controleer websites voor WCAG-succesbeoordelingen van A, AA, AAA, en sectie 508 voor naleving door de overheid.

En als je van open source houdt, bekijk deze dan eens testprogramma's voor gratis toegankelijkheid op GitHub.

• HTML CodeSniffer
• Geautomatiseerd hulpmiddel voor toegankelijkheidstoetsen
• WCAG Validator

Browser add-ons

Browser-add-ons bieden waarschijnlijk de snelste en gemakkelijkste methoden voor testen op toegankelijkheid. U kunt deze vanaf elke computer op elke website uitvoeren om echt nuttige resultaten te krijgen.

AInspector voor Firefox wordt beschouwd als een must-have voor toegankelijkheid. Dit controleert alles, en het is veel grondiger dan de WAVE-tester.

Mozilla-gebruikers kunnen ook de WCAG Contrast Checker waarderen, die ook een gratis add-on is.

Chrome-gebruikers hebben de AInspector niet, maar ze hebben de Accessibility Developer Tools officieel gemaakt door Google. Dit voegt extra hulpmiddelen toe aan het inspectievenster om de toegankelijkheidsrichtlijnen te controleren.

Chrome-gebruikers hebben ook helderheidscontroles voor kleurcontrast en enkele andere gratis extensies.

Helaas kon ik niet veel vinden voor Safari-gebruikers, maar ik vond wel een extensie voor Opera die compliant is met WCAG 2.0. Als u bereid bent om Google hard genoeg te doorzoeken, vindt u mogelijk meer tools.

Verder lezen

Als je serieus bent over het leren van webtoegankelijkheid, wees dan voorbereid op een lange weg. Het is niet gemakkelijk, maar het is erg bevredigend.

Inmiddels zou u meer moeten weten over de feitelijke definitie van webtoegankelijkheid, waarom deze bestaat en over kleine details van wat ontwikkelaars geacht worden te doen om hun websites te verbeteren. De volgende stap is verder onderzoek en oefening om deze principes in uw workflow op te nemen.

Bekijk de volgende berichten voor meer informatie en raadpleeg de WCAG-richtlijnen als je kennis direct van de bron wilt.

• Hoe HTML Table Accessibility met Markup te verbeteren
• Toegankelijk ontwerp voor gebruikers met een handicap
• 6 Tips voor het verbeteren van de toegankelijkheid van websites
• Zorg ervoor dat uw site toegankelijk is voor slechtzienden