15. Maak het Toegankelijk: over Accessibility

Accessibility wordt meestal gezien als “het toegankelijk maken van sites voor blinden en slechtzienden en mensen die moeilijk een muis kunnen bedienen”. Ik heb me in deze guideline bijvoorbeeld ook gefocust op visuele, auditieve en motorische problemen. Maar accessibility gaat veel verder dan dat. Het gaat b.v. ook om mensen met dyslexie of andere leesmoeilijkheden. In toekomstige blogposts zal ik je nog veel meer vertellen over dat soort accessibility, maar voorlopig concentreren we ons dus op de strikte definitie.

Nog een leuk weetje voor we eraan beginnen: Alle voorgaande guidelines die het over algemene usability hebben, dragen ook bij tot een betere accessibility!

“Maak het scanbaar” waar wordt aangeraden teksten kort te houden en te structureren: Maakt het veel gemakkelijker voor blinden om de site met een screen reader te ‘lezen’

“Laat mensen toe via het toetsenbord te werken”: Heel handig voor mensen met motorische moeilijkheden

Als je de usability guidelines volgt, heb je dus al heel wat gedaan aan je accessibility. Maar er kan natuurlijk nog veel meer gedaan worden. En je zal het meteen merken: die extra maatregelen vergen echt niet zo veel inspanning en ze zijn een enorme stap vooruit voor die grote groep van de bevolking met één of andere stoornis.

Genoeg gezeverd nu, op naar de guidelines:

Voor mensen met een Visuele stoornis

• Maak het gemakkelijk om de lettergrootte aan te passen
• Voorzie een AAA link. Deze link moet niet per se de letters groter maken, zoals meestal het geval is. Een uitleg van hoe men de browserfunctionaliteit daartoe kan gebruiken is ook goed. Klik bijvoorbeeld maar eens op de AAA link bovenaan deze pagina.
• Encodeer nooit in absolute font sizes. Dan werken die ‘tekst groter’ en ‘tekst kleiner’ commando’s van de browser niet.
• Gebruik nooit kleur alleen om onderscheid aan te duiden

Ongeveer 8% van de mannen (dat is 1 op 12!) en 0,5% van de vrouwen kunnen moeilijk kleuren onderscheiden.
De meesten hiervan kunnen moeilijk complementaire kleuren onderscheiden. Zo kan 1 op 20 mannen het verschil tussen rood en groen niet goed zien.
Moeilijk te geloven dat het er zo veel zijn hé. En wat dan met stoplichten? Hoe zien die mannen wanneer ze moeten stoppen? Interessant weetje: In België heeft men net om deze reden de kleur ‘rood’ van het verkeerslicht iets naar het violet verschoven en de kleur ‘groen’ iets naar het blauw. En natuurlijk is ook de vaste positie heel belangrijk (rood bovenaan).

Maar we wijken af, we regels zijn dus:

• Gebruik naast kleur ook vorm, structuur, positie,… om iets duidelijk te maken
• Zorg ervoor dat er een hoog wit-contrast is tussen tekst en achtergrond(maximum witcontrast is zwart – wit). Dit maakt tekst trouwens voor iedereen leesbaarder, zoals reeds aangehaald in guideline 3: “Maak tekst scanbaar”
• Ondersteun screen readers (die de pagina voorlezen aan blinden)
• Voorzie bovenaan de pagina een link waarmee de navigatie kan worden overgeslagen (het is irritant als die steeds opnieuw wordt voorgelezen)
• Gebruik de juiste HTML markup
  h1, h2, h3, p, …
• Gebruik indicatieve tags:
• ‘ALT attributes’ die beschrijven wat de image voorstelt
• ‘th scope= “col”‘ voor kolom headers en ‘th scope= “row”‘ voor rij headers
• Een table ‘caption’ voor de data table
• ‘label’ om labels aan controls te linken
• ‘fieldset’ voor elementen die bij elkaar horen (b.v. checkboxen en radio buttons)

Voor mensen met een Auditieve stoornis

• Zorg voor een tekst-versie bij gesproken audio clips
• Voorzie ondertiteling bij video’s

Deze zaken zijn ook weer goed voor alle andere mensen. Vaak is audio op het net van slechte kwaliteit en moeilijk te verstaan.

Voor mensen met een motorische stoornis

• Verg geen gedetaileerde muisbewegingen (b.v. mousing-over bij een menu zoals uitgelegd in guideline 4 over navigatie)
• Maak het niet noodzakelijk om meerdere toetsen tegelijkertijd in te houden
• Zorg voor grote aanklikbare ruimtes
  In menu’s moet je b.v. vaak expliciet op de tekst van het ‘label’ te klikken, terwijl het echt niet zo veel extra werk vraag om heel de ‘menu-knop’ aanklikbaar te maken
• Het moet steeds mogelijk zijn de site zonder muis te bedienen (zoals in de inleiding van deze guideline al vermeld: zie guideline 13 over het gebruik van het toetsenbord)

Zo, daarmee zitten de 15 usability guidelines erop. Nog meer weten over usabality? Neem dan eens een kijkje bij het User Experience Creation Process!