Omslag van 'WCAG in de praktijk'

3. Waarneembaar

Waarneembaar betekent dat iemand het moet kunnen waarnemen, ook al is hij blind, doof, slechthorend of slechtziend.

3.1 Oriëntatie

Omschrijving

Bij het draaien van je beeldscherm (bijvoorbeeld bij je mobiele telefoon) moet de content ook meedraaien.

Dit is bijvoorbeeld belangrijk voor mensen die hun device in een standaard hebben staan en deze niet makkelijk kunnen draaien.

Device is niet makkelijk draaibaar - Bron: Get Tecla: The Key to Mobile Independence

Er zijn uitzonderingen, bijvoorbeeld bij de weergave van een piano in een piano-app.

Virtuele piano, weergave kan alleen in landscape

Succescriterium

  • 1.3.4 Weergavestand (niveau AA): De content beperkt de weergave en bediening niet tot een enkele presentatie-oriëntatie, zoals staand of liggend, tenzij een specifieke presentatie-oriëntatie essentieel is.

Toepassen

Je kunt dit testen met je mobiele telefoon en enkele populaire browsers. Ook kun je het testen met mobile responsive in inspector in Chrome.

3.2 Afbeeldingen

Omschrijving

Afbeeldingen kunnen betekenis overbrengen of decoratief zijn. Brengt een afbeelding betekenis over, dan moet je zorgen dat deze informatie er ook is voor mensen die de afbeelding niet kunnen zien.

Succescriteria

  • 1.1.1 Niet-tekstuele content (niveau A)
  • 1.4.5 Afbeeldingen van tekst (niveau AA)
  • 2.2.2 Pauzeren, stoppen en verbergen (niveau A)
  • 2.3.1 Drie flitsen of onder de drempelwaarde (niveau A)

Toepassen

Zie hiervoor onze uitleg in ons e-book Webcontent in het hoofdstuk Toegankelijk en vindbaar maken van afbeeldingen.

3.3 Gebruik van kleur voor betekenis

Omschrijving

Niet iedereen kan kleuren goed waarnemen. Daarom mag je niet alleen met kleur betekenis overbrengen.

Succescriteria

  • 1.4.1 Gebruik van kleur (niveau A)

Toepassen

Als je alleen kleur gebruikt om informatie over te brengen, dan kan het zijn dat iemand die kleuren niet goed waarneemt dit niet begrijpt. Denk bijvoorbeeld aan mensen met kleurenblindheid.

Een voorbeeld is de afbeelding hieronder van de afvalkalender van een gemeente. In de bovenste afbeelding de normale kleuren. Met kleur is aangegeven wanneer bepaald afval wordt opgehaald: restafval is grijs, GFT is bruin en papier is groen. De onderste afbeelding is het beeld dat iemand ziet met rood-groen-kleurenblindheid. Het onderscheid tussen GFT en papier is niet of nauwelijks meer zichtbaar.

De oplossingen zijn vaak makkelijk, zoals in het voorbeeld hieronder van een kaart (Bron: Geonovum). Linksboven het origineel (1), linksonder de versie bij kleurenblindheid (2). Het onderscheid dat met rood-groen was aangebracht is verdwenen. Rechtsboven (3) en rechtsonder (4) de aangepaste afbeelding. Hierbij is de betekenis ook met een icoontje van een huis en een boom overgebracht. En zo blijft de afbeelding ook begrijpelijk als je minder goed kleuren ziet.

3.4 Contrast van tekst

Omschrijving

Als er weinig contrast is tussen tekst en achtergrond, dan is de tekst minder goed leesbaar.

Succescriterium

  • 1.4.3 Contrast, minimum (niveau AA)

Contrastratio: een eenduidige maat voor contrast

Voor contrast is een maat: contrastratio. Deze heeft een waarde van 1 tot 21.

Bij geen contrast is de waarde 1 (officieel schrijf je dan 1:1). Bij een maximaal contrast (zwart op wit of wit op zwart) is dat 21 (officieel 21:1).

Contrastratio: 21 = maximaal contrast, 1 = minimaal contrast (wit op wit)

Een handige tool voor het meten van contrast in een pdf is Colour Contrast Analyser. Deze is er voor Windows en de Mac.

Contrast tekst en achtergrond

Binnen WCAG 2 level AA zijn de eisen:

  • Tekst met tekstgrootte kleiner dan 14-punts vetgedrukt of 18-punts normaal: minimale contrastwaarde van 4,5.
  • Tekst met tekstgrootte van ten minste 14-punts vetgedrukt of 18-punts normaal: minimale contrastwaarde van 3.

In de meeste gevallen is minimaal 4,5 de goede waarde om te gebruiken.

Hieronder een voorbeeld van een nieuwsbrief. De fontgrootte is 9 punts. Het contrast van het geel met het wit is 1,7. Veel lager dus dan de vereiste 4,5; het contrast voldoet niet.

Links: afwijkende kleur en vorm van gewone tekst

Het is ook belangrijk dat een link in tekst goed te herkennen is als een link.

Let daarom op het volgende:

  • Contrast tussen de link en de omringende tekst van minimaal 3.
    De kleur van de linktekst heeft een contrastwaarde van minimaal 3,0 met gewone tekst. (WCAG-eis)
  • Linkkleur is anders dan de kleur van koppen.
  • De link wijkt af in vorm van omringende tekst
    Onderstreep daarvoor de link. Die onderstreping mag ook alleen bij mouse-over, maar zeker voor mobiele en tabletgebruikers is dat niet optimaal, want die hebben niet zo makkelijk de mouse-over-variant.

3.5 Contrast van afbeeldingen

Omschrijving

Het contrast voor een afbeelding met achtergrond is minimaal 3,0.

Succescriterium

  • 1.4.11 Contrast van niet-tekstuele content (Niveau AA)

Testen

  • WCAG Contrast Checker
  • Deque Color Contrast Analyzer om te meten in een pdf of documenten

Beide tools bespreken we in Tools in de browser (zoals add-ons).

3.6 Geo-informatie

Omschrijving

Het contrast voor een afbeelding met achtergrond is minimaal 3,0.

Succescriteria

  • verschillende

Kaarten zoals Google Maps zijn heel handig, maar ze zijn niet altijd toegankelijk. Een kaartje mag ontoegankelijk zijn, als je ook een toegankelijk alternatief biedt. Dit toegankelijke alternatief moet wel direct aangeboden worden bij de ontoegankelijke kaart.

Los van dit alternatief moet het kaartje wel zo toegankelijk mogelijk zijn, dus bijvoorbeeld goed contrast.

Meer hierover vind je in het hoofdstuk Kaartinformatie (geo-informatie) in ons e-book Webcontent.

3.7 Semantiek

Omschrijving

Met semantiek bedoelen we dat we duidelijk maken wat de betekenis is van bepaalde informatie. Dan doen we onder andere door de juiste html-code te gebruiken

Succescriteria

  • 1.3.1 Info en relaties
  • 2.4.1 Blokken omzeilen
  • 2.4.6 Koppen en labels
  • 4.1.2 Naam, rol, waarde

Uitleg

Voorbeeld

Je hebt bijvoorbeeld een artikel met als titel “Fietsen in Nederland”. Ziende mensen zien door de opmaak van de pagina dat dit de titel is, maar Google ziet niet of iets groot of vet is en weet dan niet wat de titel is. Met HTML-code kun je wel de betekenis duidelijk maken. De code wordt dan: <h1>Fietsen in Nederland</h1>.

Op deze manier hebben we betekenis toegevoegd aan de tekst. Zo is duidelijk voor Google, maar ook voor gebruikers van spraakuitvoer en braille-uitvoer, dat deze tekst de titel is van de pagina.

Kopstijlen of headings

Wellicht het bekendste voorbeeld voor semantiek is het gebruik van kopstijlen voor alle koppen op je pagina: de titel bovenaan heeft een h1-stijl, de tussenkoppen h2 en de koppen van het volgende niveau h3, zie het voorbeeld hieronder.

Voorbeeld

<h1>Zoogdieren</h1>
<h2>Olifanten</h2>
<h3>Afrikaanse olifant</h3>
<h3>Aziatische olifant</h3>
<h2>Leeuwen</h2>
(enzovoort)

Een uitgebreide uitleg staat op Headings voor betekenisvol opmaken.

Vet en cursief

De html-elementen strong (vet) en emphasis (schuin). Beide hebben de betekenis nadruk. Je mag deze elementen niet gebruiken om hele zinnen of koppen vet of cursief te maken.

Blockquote

Het html-element <blockquote> gebruik je voor een vrijstaand citaat. Met vrijstaand bedoelen we dat het een alinea is, en niet een onderdeel van een alinea.

Meestal is de css van de blockquote ook zo dat je ziet dat het een citaat is.

Het webadres van de bron geef je aan met het cite-attribuut:

<blockquote cite="http://developer.mozilla.org"> Dit is een citaat van het Mozilla Developer Center. </blockquote>
Als een citaat is opgenomen in een lopende zin gebruik je geen blockquote , zoals bijvoorbeeld in onderstaand voorbeeld:

"Kleurrijke politici zijn tegenwoordig alleen in de extreme kampen te vinden", zei de oud-minister in het interview.

De html-code hiervoor is zonder blockquote-element:

<p>"Kleurrijke politici zijn tegenwoordig alleen in de extreme kampen te vinden", zei de oud-minister in het interview.</p>

Andere voorbeelden

Enkele andere voorbeelden van betekenisvol opmaken:

  • Opsommingen
  • Titels van iframes (bij een embedded video)
  • Tabellen: zie Tabellen.

Het op deze manier betekenisvol opmaken van je tekst is belangrijk voor de vindbaarheid in Google, maar ook voor mensen met screenreaders. Er zijn nog veel meer mogelijkheden om betekenis aan teksten toe te voegen, onder andere met rich snippets. Meer daarover in Andere vormen van betekenisvol opmaken.

3.8 Video

Omschrijving

Video met spraak moet ondertiteld zijn. Als er informatie ook in beeld wordt overgebracht, dan is ook audiodescriptie nodig. Bij audio-bestanden is een transcript nodig.

Succescriteria

  • 1.2.1 Geluidsopnames en video-opnames zonder geluid (niveau A)
  • 1.2.2 Ondertiteling bij video-opnames (niveau A)
  • 1.2.3 Tekstalternatief bij video-opnames (niveau A)
  • 1.2.4 Ondertitels voor doven en slechthorenden, live video (niveau AA)
  • 1.2.5 Audiodescriptie bij video-opnames (niveau AA)
  • 1.4.2 Geluidsbediening (niveau A)

Toepassen

Ondertiteling

Video met spraak moet ondertiteld worden, om 3 redenen:

  1. Voor de 1,5 miljoen doven en slechthorenden in Nederland.
  2. Voor een minimaal even grote groep van mensen die geen geluid kunnen gebruiken, bijvoorbeeld omdat ze in de trein zitten of op een werkplek zonder geluid.
  3. Ondertiteling maakt een video beter vindbaar, want de tekst is indexeerbaar en maakt aan een zoekmachine duidelijk waar de video over gaat.

Ondertiteling kan als los bestand bij de video worden aangeboden. De ondertiteling kan dan aan- en uitgezet worden. Deze vorm van ondertiteling heet closed captions. Vergelijk dit met een videofilm, die je huurt of koopt en waarbij je ook kunt kiezen of je ondertiteling aan- of uitzet.

Een andere vorm van ondertiteling is als deze in de video zit. Je kunt deze dan niet aan- of uitzetten. Deze vorm heet open captions.

Closed captions heeft een paar belangrijke voordelen boven open captions:

  1. Op een klein scherm zijn de closed captions relatief wat groter, zodat ze goed leesbaar blijven.
  2. Het aanpassen is veel makkelijker dan met open captions.
  3. Bij closed captions is de ondertiteling in een los bestand. Indexatie door zoekmachines is zo mogelijk.

Een video die niet-talig is hoeft geen ondertiteling of audiodescriptie. Bijvoorbeeld een 360-graden-video van een trouwzaal van een gemeente.

Audiodescriptie

Soms is er in een video ook informatie te zien, bijvoorbeeld de naam van een spreker. Dan moet je audiodescriptie toevoegen. Helaas kun je dit extra geluid niet als los bestand toevoegen.

Heb je audiodescriptie nodig, plaats dan een 2e video waarin de audiodescriptie is opgenomen. Dit is natuurlijk nogal omslachtig, dus voorkom bij de productie van de video al dat audiodescriptie nodig is.

Plaatsing in de site

Voor het aanbieden van video kun je uitstekend gebruik maken van sites als YouTube of Vimeo. De video embedt je dan via een iframe op je eigen site.

Let daarbij op het volgende (met dank aan de tips van Jules Ernst):

  • Voeg het title-attribuut toe aan het iframe-element. Beschrijf in een paar woorden de inhoud van de video (succescriterium 4.1.2).
  • Heb je een 2e video met daarin audiodescriptie, verwijs in het title-attribuut naar deze 2e video.
  • Voeg ondertiteling toe als er gesproken wordt in de video (succescriterium 1.2.3)
  • Voeg audiodescriptie toe indien nodig. (succescriteria 1.2.4 en 1.2.6)
  • Zorg voor genoeg contrast van de tekst in de video (succescriterium 1.4.3)
  • Schakel sneltoetsen uit. Wijzig de standaard van YouTube van disablekb=0 naar 1 (succescriterium 2.1.4):
    src="https://www.youtube.com/watch?v=XXXXXXX&disablekb=1
  • Zet het automatisch afspelen (autoplay) van de video uit. Gebruik de standaardinstelling van YouTube: autoplay=0.
  • Toon Show controls. Hou YouTube's standaard aan: controls=1.
  • Zorg dat volledig scherm mogelijk is. Gebruik YouTube's standaard fs=1.
  • Laat het YouTube-logo staan, zodat de gebruiker eenvoudig de video op YouTube kan bekijken. Gebruik YouTube's standaard modestbranding=0.

Wil je de gegevens van jouw bezoekers niet delen met Google, kies dan voor privacymodus. Dan plaatst YouTube geen cookies en hoef je dus voor de video ook niet een cookiemelder op je site te plaatsen.

Privacy-modus instellen:

  • Ga naar je video in YouTube
  • Kies Delen ▸ Insluiten.
  • Vink aan Privacymodus inschakelen.

Volledig transcript

Het is handig om een volledig transscript aan te bieden. Dat maakt de video ook bruikbaar voor doof-blinden en zoekmachines kunnen de video beter indexeren.

3.9 Tabellen

Omschrijving

Het doel van een tabel is het bondig en overzichtelijk weergeven van een grotere hoeveelheid informatie. Vaak zijn dit getallen, maar het kan ook gewoon tekst zijn.

Succescriteria

  • 1.3.1 Info en relaties (niveau A)

Toepassen

Een tabel, die data presenteert, is in principe heel handig en toegankelijk, mits de tabel goed is opgemaakt. Een tabel goed opmaken is meestal niet erg ingewikkeld. Belangrijk is dat je de tabelopbouw eenvoudig houdt.

Uitgebreide informatie over het toegankelijk maken van tabellen vind je het hoofdstuk Tabellen in ons e-book Webcontent.

top

Wat vind je van dit hoofdstuk?

Feedback

Contact

Vul dit in als je wil dat we contact met je opnemen.