Toegankelijkheid voor ontwerpers

KleurpotlodenEen toegankelijke website of applicatie begint met een goed ontwerp. Sommige ontwerpers denken dat toegankelijkheid remmend werkt op creativiteit en design, maar daar hoef je niet bang voor te zijn. Wel is het belangrijk dat je een aantal basisregels toepast in het ontwerp.

Algemeen

Als ontwerper begin je het liefst met het ideaalplaatje. Dat is volkomen logisch en prima. Maar vraag jezelf als ontwerper regelmatig af: “Is dit zo toegankelijk voor iedereen?” Zo niet, in welke vorm dan wel?

  • Bespreek alle belangrijke ontwerpkeuzes met het team. Laat ontwerpen eerst intern beoordelen op toegankelijkheid voordat je het presenteert aan de klant. Een feature achteraf toegankelijk maken kost veel meer tijd dan het meteen goed doen.
  • Houd rekening met je doelgroep. Hulpmiddelen als een voorleesfunctie of knoppen voor tekstschaling zijn niet verplicht voor toegankelijkheid, maar zijn wel nuttig voor bv. laaggeletterden, mensen met dyslexie en ouderen.
  • Ontwerp in lagen. Wat ziet iemand die geen Silverlight of Flash gebruikt? Hoe werkt dit het beste op een mobiele telefoon? Je hoeft geen creatieve, interactieve interfaces overboord te gooien, maar denk wel na over hoe de interface toegankelijk blijft als iemand niet de meest rijke interactie kan beleven.
  • Minimaliseer elementen die de aandacht afleiden van de eigenlijke inhoud. Op veel websites wordt geprobeerd de bezoeker zoveel mogelijk interessante informatie of functionaliteit(en) aan te bieden. Dit bemoeilijkt het scannen van de pagina, o.a. voor mensen met een verstandelijke beperking, visuele beperking of attentiestoornis.

Navigatie en interactie

  • Zorg voor een consistente interface. Bij mensen met een verstandelijke of visuele handicap duurt het meestal langer voordat ze door hebben hoe de navigatie, lay-out en interactie van een site in elkaar steekt. Als de interface niet consistent is, moeten deze bezoekers op iedere pagina weer opnieuw uitvinden hoe en wat.
  • Zorg dat pop-up vensters of dynamische lagen gesloten kunnen worden op een standaard manier. Bijvoorbeeld door een sluitknop in de rechterbovenhoek en eventueel met de escape-toets.
  • Maak van de interactie geen precisiewerk voor de bezoeker. Ouderen, lichamelijk gehandicapten, maar ook mensen met een verstandelijke beperking hebben vaak moeite om nauwkeurig een muis te bedienen. Zorg bijvoorbeeld dat uitklapmenu’s niet direct inklappen als de muis net even een fractie buiten het menu raakt.
  • Presenteer zoekresultaten zoveel mogelijk volgens de conventie. Werken met standaardweergaven zoals bij Google- of Bing-resultaten kunnen mensen met een verstandelijke beperking aanleren.

Afbeeldingen

  • Maak gebruik van afbeeldingen om de begrijpelijkheid van content te vergroten. Mensen met een verstandelijke handicap, dyslectie of andere leesproblemen kunnen baat hebben bij visuele ondersteuning van de content. Gebruik alleen geen ondersteunende afbeeldingen bij korte instructies.
  • Maak iconen of andere aanklikbare elementen herkenbaar en voldoende groot. Iconen, thumbnails en andere ondersteunende grafische elementen zijn pas functioneel als je het uitgebeelde direct kunt identificeren. Te ver ingezoomd op een detail of te klein is dus niet zinvol.

Kleur

Eén op de 12 mannen is kleurenblind. Bij vrouwen komt het minder voor. De meest voorkomende vorm van kleurenblindheid is dat men het verschil tussen rood en groen niet ziet. Dit heet Protanopia. Maar ook andere vormen komen geregeld voor.

  • Breng informatie niet uitsluitend door kleur over.Stel, je wilt in een webwinkel in de productoverzicht direct een indicatie van de levertijd geven. Dan ligt het voor de hand dit met kleuren aan te geven: groen voor direct leverbaar, oranje voor een paar dagen en rood voor niet leverbaar. Heel helder, behalve voor een kleurenblinde.

    Levertijden normaal zicht vs kleurenblind

    Test je ontwerp altijd voor kleurenblinden. Met behulp van de volgende kleurenfilters kun je zelf door de ogen van een kleurenblinde  kijken:

    groen vinkje en rood kruisjeEr is overigens niets op tegen om de kleuren groen en rood naast elkaar te gebruiken, zolang de kleur maar niet de enige onderscheidende factor is. Je kunt prima een groen vinkje voor ‘goed’ en een rood kruisje voor ‘fout’ gebruiken.

  • Wees consistent met kleurgebruik bij het geven van betekenis aan informatie. Consistent kleurgebruik, bijvoorbeeld voor hyperlinks, is voor iedereen belangrijk, niet alleen belangrijk voor mensen met een visuele beperking. Hoe consistenter, hoe sneller men vertrouwd raakt met de user interface.
  • Zorg voor voldoende contrast tussen tekstkleur en achtergrondkleur.Mensen die slechtziend zijn, hebben moeite met lezen als het contrast laag is.

    Test de kleurcontrasten in het ontwerp. Houd hierbij de volgende richtlijn aan:

    • Grote tekst (groter dan 14pt bold of 18pt normaal) heeft een contrastverhouding van minimaal 3.
    • Overige tekst heeft een contrastverhouding van minimaal 4,5.
    • Voor tekst in logo’s, in decoratieve of in inactieve elementen gelden geen contrasteisen.

Video en audio

Steeds vaker wordt informatie overgebracht door middel van video’s, animaties, podcasts en andere multimedia. Dit kan problemen opleveren voor visueel en auditief gehandicapten, maar in sommige gevallen ook voor mensen met epilepsie. Los hiervan is informatie die wordt verteld in een video niet vindbaar voor zoekmachines. Gelukkig is een toegankelijke video maken niet moeilijk.

  • Zorg ervoor dat belangrijke informatie die alleen maar visueel wordt overgebracht, ook voorgelezen wordt. Blinden en slechtzienden ontgaat anders die informatie.
  • Geef een ondertiteling van wat er gezegd wordt en van eventuele geluidseffecten. Doven en slechthorenden begrijpen anders niet waar de video over gaat.
  • Vermijd snel knipperende fragmenten. Content die meer dan 3x per seconde flitst, is riskant voor mensen met een bepaalde vorm van epilepsie. Als het toch noodzakelijk is, meld dit dan van tevoren.
  • Laat video en audio niet automatisch starten. Voor mensen die gebruikmaken van voorleessoftware, is het irritant als de audio van multimedia en de voorleessoftware door elkaar heen lopen.
  • Gebruik niet enkel geluid als feedback. Combineer dit altijd met een tekstuele melding.

Alles over het toegankelijk maken van video en audio

Toetsenbord en touchscreen

Het gebruik van internet, e-mail en applicaties op mobiele telefoons en tablet pc’s neemt een vogelvlucht. De meeste van deze apparaten hebben een touchscreen of toetsenbord, maar geen muis. Toch worden er nog veel interfaces ontworpen (zoals uitklapmenu’s) die alleen met de muis bedienbaar zijn.

  • Zorg ervoor dat alle pagina-elementen met een toetsenbord benaderd kunnen worden. Ontwerp geen interactieve componenten die alleen maar met een muis bediend kunnen worden.

Taalkeuze

Vlaggetjes in de rechterbovenhoek van websites zien we gelukkig steeds minder. En dat is maar goed ook, want vlaggetjes zijn niet de ideale manier om een taalkeuze aan te bieden. Een Amerikaan of Australiër zal zich namelijk niet aangesproken voelen door een Britse vlag. En zou iedere Congolees de Franse vlag herkennen?

  • Schrijf links voor taalkeuze voluit in hun corresponderende taal.
  • Presenteer links voor taalkeuze consistent op iedere pagina.

Alternatieve navigatie

Soms hebben gebruikers moeite hun weg te vinden binnen een website. Dan is het handig als zij alternatieve navigatiemiddelen tot hun beschikking hebben om de content toch te vinden.

  • Bied meer dan één manier om content te vinden, bijvoorbeeld door een zoekfunctie of sitemap.

Formulieren en contact

Niemand houdt van formulieren invullen, maar voor mensen met een beperking vormen formulieren vaak een extra uitdaging.

  • Houd formulieren zo kort mogelijk en beperk het verplicht invullen van formuliervelden. Voor mensen die bijvoorbeeld hun handen niet of nauwelijks kunnen gebruiken, is het invoeren van tekst een grote opgave. Afgezien daarvan, vindt iedereen een kort formulier prettiger.
  • Voorzie in alternatieve contactmogelijkheden, zoals adresgegevens, telefoonnummers of e-mailadressen, als deze beschikbaar zijn. Mensen die moeite hebben met formulieren invullen, willen wellicht liever bellen. Omgekeerd versturen doven en slechthorenden liever een e-mail of contactformulier.
  • Voorzie formulieren van labels en instructies voor de bezoeker waar nodig. Hiermee voorkom je zoveel mogelijk dat gebruikers fouten maken. Met name voor mensen met een beperking kost het corrigeren van een formulier veel moeite.
  • Plaats labels zo dicht mogelijk bij het invoerveld. Slechtzienden die hun beeldscherm sterk moeten vergroten of die kokervisie hebben, zien maar een klein gedeelte van wat er op het scherm staat. Daarom is het handig om formuliervelden en hun bijbehorende labels dicht bij elkaar te plaatsen.
  • Gebruik zoveel mogelijk meerkeuzevragen. Voor veel mensen met een beperking is dit gemakkelijker in te vullen dan tekst.
  • Geef bij het automatisch signaleren van invoerfouten duidelijk aan waar de fout optreedt en wat er precies fout is.
  • Stel gebruikers bij transactionele formulieren in de gelegenheid hun invoer te controleren en te verbeteren.

Zie ook

10 gedachten over “Toegankelijkheid voor ontwerpers”

  1. Hoi Ferry, leuk artikel! Het viel me op dat je px gebruikt. Het lijkt me dat je hier verwijst naar de formaten die in WCAG 2 worden genoemd. Het gaat daar echter om ‘points’ niet pixels. Ik meen me te herinneren dat 14pt zo’n 19px is, en 18pt is 24px, voor de volledigheid zeg maar.

  2. Ik kan me vinden in de meeste punten. Behalve met de taal vlaggetjes. 🙂

    Taalkundig zit het inderdaad niet lekker: een vlag vertegenwoordigt meestal geen taal, wel een land.

    Maar er zijn wel meer dingen die taalkundig fout zitten of onlogisch zijn, maar wél het meest efficiënt zijn.

    Je ziet die vlaggen nog steeds best veel, hierdoor hebben mensen ondertussen wel geleerd wat de associatie is.

    Bovendien gebruik je meestal wel meerdere vlaggen, waardoor de associatie nog groter is en vanzelf wel komt.

    Feit is dat die vlaggen een stuk meer opvallen, waardoor gebruikers ze eerder zien en er dan ook meer gebruik van maken. Hyperlinks lijken immers te veel op tekst.

    Een bezoeker die een website bezoekt in een taal die hij niet machtig is maakt een besluit in enkele seconden. Kan hij niet direct een taal optie vinden dan is hij of zij weg.

    In een bescheiden studie met 3 websites was het verschil meer dan het dubbel. Ik ga die studie nog uitbreiden naar meer websites (ook in andere landen) en eens kijken naar invloed op conversie cijfers ed.

    Je kan ze uiteraard niet altijd gebruiken: bv. een Zuid-Afrikaans vlag is onbruikbaar omdat dit land meerdere talen heeft.

    Je kan ze beter ook niet gebruiken wanneer je veel talen wil aanbieden. Anders verstoren ze de aandacht van de meer belangrijkere dingen.

    Vlaggen hebben dus wel degelijk nadelen, maar laten we niet blind zijn voor hun ‘magische’ krachten. 🙂

    In geval van twijfel: testen!

    Meer over die vlaggen kan je hier vinden:

    Vlaggen gebruiken om een taal te selecteren kan wel

  3. Ha Edwin, dit soort onderwerpen blijven leuke discussies he? Ik ben het met je eens dat vlaggen meer aandacht trekken dan tekstlinks. Toch blijf ik liever vasthouden aan een ‘English’ link.

    Naast het punt dat bv. Amerikanen zich niet identificeren met een Britse vlag, is er nog een punt. Bij het vlaggetje is het onduidelijk of het gaat om een vertaalde variant van de website, of een gelokaliseerde. Voor lokalisering vind ik een vlag logischer dan voor een vertaling.

    Overigens, Nederlandse sites hebben zelden andere taalvarianten naast het Engels.

  4. Ferry,

    Zalig onderwerp 🙂

    In het geval van Amerikanen, zou ik het advies van Nielsen opvolgen: als je doelgroep vooral uit Amerikanen bestaat, gebruik dan een Amerikaanse vlag.

    Ik ga dat zeker binnenkort uitmeten of specifiek Amerikanen nu wel of niet klikken op UK vlaggen.

    In Nederland zal dat zo wel zijn dat er meestal alleen een Engelse versie is. In België komt daar nog zeker de Franse en soms de Duitse taal bij.

    Ik hou je zeker op de hoogte.

    Groeten.

  5. Wat ik erg mis in je artikel is het werkelijk testen van al je werk voor het meer accesible maken. Het is erg makkelijk om JAWS of NVDA te instaleren en gewoon te testen.

  6. Hoi Bojhan, prima voorstel. In het artikel wijs ik naar tools om voor kleurenblinden te testen en op kleurcontrast. Ik zal het woord testen hier expliciet in opnemen.

    Wat zijn volgens jou andere testen die interactieontwerpers en grafisch ontwerpers gemakkelijk zelf kunnen testen? Waarop/hoe kunnen zij hun ontwerp met JAWS of NVDA testen?

  7. In aanvulling op je opmerking over gebruik van kleur: rood en groen zijn misschien niet voor iedereen te zien, maar voor de niet-kleurenblinden wel erg duidelijk. Er is niets mis met het gebruik van deze kleuren, mits de informatie ook maar op een andere manier wordt weergegeven.

    Bijvoorbeeld: een rood kruis en een groen vinkje zijn duidelijker dan een zwart kruis en een zwart vinkje om aan te geven wat goed en fout is. Zeker voor mensen met een verstandelijke beperking kan zo’n kleur enorm helpen bij snel snappen wat er aan de hand is.

  8. Een aanvulling. Ontwerpers bedenken vaak de mooiste mouseover-effecten, maar:
    – focus en eventuele andere mogelijkheden worden vergeten,
    – alle effecten moeten voldoende contrast hebben.

    Ook moet men in een mooi grafisch design al rekening houden met de beperkte set aan lettertypes die beschikbaar zijn op de verschillende computers. Beschouw dit niet als remmend. De uitdaging hier ligt in de witruimtes tussen regels, woorden en letters.

Geef een reactie