Eerder schreef ik een artikel over toegankelijke filmpjes en geluidsfragmenten. Naast de inhoud van een filmpje of geluidsfragment kan ook de mediaspeler van YouTube toegankelijk(er) worden gemaakt.
Insluitcode
Met een code voor het insluiten van een video (de insluitcode of embed-code) kunnen filmpjes van YouTube een webpagina worden geplaatst. Deze code ziet er ongeveer zo uit:
<iframe width="560" height="315" src="https://www.youtube.com/embed/[VIDEO_ID]" title="YouTube video player" ... ></iframe>
De URL van het filmpje staat in het src-attribuut van het <iframe>-element. Aan deze URL kunnen parameters worden toegevoegd. Een aantal parameters heeft invloed op de toegankelijkheid van de mediaspeler. Met behulp van een waarde 1 of 0 kunnen deze opties worden in- of uitgeschakeld.
autoplay: Zorgt dat een filmpje automatisch kan worden afgespeeld. Automatisch afspelen staat standaard uit (autoplay=0). Schakel deze bij voorkeur ook niet in.
controls: Zorgt dat de bedieningselementen van de mediaspeler kunnen worden verborgen. Bedieningselementen zijn standaard zichtbaar (controls=1). Verberg deze ook niet.
disablekb: Zorgt dat sneltoetsen kunnen worden gebruikt. Sneltoetsen zijn standaard ingeschakeld (disablekb=0). Schakel sneltoetsen bij voorkeur uit. Voeg daarvoor de parameter disablekb=1 toe aan de URL.
fs: Zorgt dat een filmpje in volledig scherm kan worden afgespeeld. Volledig scherm staat standaard ingeschakeld (fs=1). Laat deze bij voorkeur ook aan staan.
Na het aanpassen van de insluitcode ziet deze er zo uit:
<iframe width="560" height="315" src="https://www.youtube.com/embed/[VIDEO_ID]?disablekb=1" title="YouTube video player" ... ></iframe>
Toegankelijke naam
Geef het <iframe>-element ook een toegankelijke naam. Schermlezers kunnen (onder andere) <iframe>-elementen presenteren in een handig overzicht. Zo kunnen mensen die gebruik maken van een schermlezer snel en efficiënt navigeren in de content.
Gebruik hiervoor het title-attribuut van het <iframe>-element. Standaard is de waarde van dit attribuut “YouTube video player”. Vervang dit door een beschrijving van wat er in het filmpje te zien is.
Na het aanpassen van de insluitcode ziet deze er (bijvoorbeeld) zo uit:
<iframe width="560" height="315" src="https://www.youtube.com/embed/[VIDEO_ID]?disablekb=1" title="Teckel en Border Collie spelend in een open weide" ... ></iframe>
Ondertitels
Na het uploaden van een filmpje op YouTube, kan YouTube zelf ondertitels genereren. Deze ondertitels zijn vaak nog onvolledig en niet helemaal juist. Het kan wel een groot deel van het werk overnemen. Controleer daarom de gegenereerde ondertitels en verbeter ze waar nodig. Beschrijf in deze ondertitels ook de belangrijke geluiden, zoals een deurbel, een explosie of belangrijke muziek.
YouTube gebruikt deze ondertitels ook voor het maken van een transcript bij het filmpje.
Tips voor een toegankelijke mediaspeler
Tot slot nog een paar tips voor een toegankelijke mediaspeler:
Gebruik geen geluid dat automatisch speelt, of zorg voor een mechanisme om geluid dat automatisch speelt te pauzeren, te stoppen of zacht te zetten.
Gebruik geen sneltoetsen, of zorg voor een mechanisme om sneltoetsen uit te zetten of opnieuw in te stellen.
Gebruik geen automatisch bewegende content, of zorg dat automatisch bewegende content kan worden gepauzeerd, gestopt of uitgezet.
Gebruik geen content dat meer dan 3 keer per seconde flitst.
Koppen geven structuur aan een tekst. Vaak is de structuur van een tekst goed zichtbaar in de vormgeving. Ze hebben vaak een iets grotere letter en zijn vaak dikgedrukt. Dit is vooral handig voor mensen die dit kunnen zien. Deze structuur in de content moet ook door software te begrijpen zijn. Dan kan ook iemand die een schermlezer gebruikt een pagina snel scannen.
Koppen hebben meerdere functies:
Koppen geven structuur aan de content.
Schermlezers kunnen een overzicht van alle koppen op een webpagina presenteren. Op deze manier kan snel worden genavigeerd naar de content.
Schermlezers hebben een ingebouwde sneltoets waarmee snel van kop naar kop kan worden genavigeerd.
Zoekmachines gebruiken de koppen bij het beoordelen van de inhoud van een webpagina.
In een CMS kunnen koppen meestal makkelijk worden toegevoegd in de editor op de pagina. Geef aan welke tekst een kop is en bepaal het niveau van de kop. De editor zorgt dat de juiste HTML-elementen worden toegevoegd aan de tekst. Koppen worden opgemaakt met de HTML-elementen <h1> tot en met <h6>.
Gebruik het kop-element niet om alleen een bepaalde presentatie van de tekst te bereiken. Tekst die géén kop is, mag niet worden opgemaakt met een HTML kop-element.
Gebruik een logische kop-volgorde
Zorg dat koppen worden gebruikt volgens in een logische kop-volgorde. Gebruik hiervoor een juiste hiërarchie: de <h1> is de belangrijkste kop op een pagina, een <h6> is het minst belangrijk.
Gebruik de <h1> voor de paginatitel, de <h2>’s voor de belangrijke koppen in de content en, als dat nodig is, de <h3>’s en misschien zelfs <h4>, <h5> of <h6> voor de tussenkoppen om de content verder in secties te verdelen. Sla geen kopniveau’s over en zorg dat iedere kop content heeft.
Schermlezers kunnen deze koppen presenteren in een handig overzicht. Dit werkt net zoals de inhoudsopgave van een boek; De pagina wordt verdeeld in hoofdstukken, paragrafen en subparagrafen. Zo kunnen mensen die gebruik maken van een schermlezer snel en efficiënt navigeren in de content.
Zorg dat de koppen en de tussenkoppen een goed beeld geven van de content. Beschrijvende koppen zorgen dat het mogelijk is om een tekst goed te scannen en te voorspellen waar de relevante content staat.
Tips voor toegankelijke koppen
Tot slot nog een paar tips voor het gebruiken van koppen:
Gebruik maximaal één <h1> per pagina.
Zorg dat de <h1> aan het begin van de content wordt geplaatst.
Zorg dat de koptekst van de <h1> hetzelfde is als de titel van de pagina.
Houd kopteksten zo veel mogelijk beknopt.
Zoek je een hulpmiddel om snel de koppen en kop-volgorde van een pagina te controleren? De browser extensie headingsMap geeft een overzicht van alle koppen en kopniveaus op een webpagina. Download op Windows of macOS voor Mozilla Firefox, Google Chrome of Microsoft Edge.
Voorleessoftware kan tekst omzetten in spraak. Het gebruikt hier verschillende stemmen voor. Iedere stem is gemaakt om in een bepaalde taal te spreken. Om te bepalen in welke taal er moet worden gesproken is voorleessoftware afhankelijk van taal die in de code is vastgelegd.
Het vastleggen van de taal in de code heeft meerdere functies:
Voorleessoftware kan woorden en zinnen in de juiste taal uitspreken.
Browsers kunnen letters en karakters op de goede manier weergeven.
Zoekmachines gebruiken de taal van een webpagina om te bepalen of een pagina wordt opgenomen in zoekresultaten.
In dit artikel wordt uitgelegd hoe taal in de code kan worden vastgelegd.
Taal instellen
De taal van de website kan meestal alleen door een ontwikkelaar worden ingesteld. Soms kan het ook worden toegevoegd in de instellingen van het CMS.
Voor onderdelen van een webpagina kan in een CMS de taal meestal makkelijk worden toegevoegd in de editor op de pagina.
Code van taal instellen
Taal kan worden toegevoegd met het lang-attribuut. Gebruik als waarde van dit attribuut alleen een taalcode die voorkomt in de IANA Subtag Registry.
Een aantal veelgebruikte taalcodes:
Taalcode
Taal
nl
Nederlands
en
Engels
fr
Frans
de
Duits
pl
Pools
it
Italiaans
es
Spaans
pt
Portugees
Voorbeelden van taalcodes
Taal van de pagina
De standaard taal van een webpagina wordt aangegeven in het <html>-element. Voeg het lang-attribuut toe aan het <html>-element en gebruik de juiste taalcode.
<html lang="nl">
Taal van onderdelen
Een taalwissel, bijvoorbeeld een woord of zin die in een andere taal is geschreven, moet worden vastgelegd in de code. Voeg hiervoor het lang-attribuut toe aan het HTML-element van het onderdeel dat in een andere taal is geschreven en gebruik de juiste taalcode.
Het lang-attribuut kan worden gebruikt op block-elementen (<div>, <p>, <ul>, enz.) maar ook op inline-elementen (<span>, <a>, <strong>, enz.).
Voorbeeld van een taalwissel met een block-element:
<p lang="en">The quick brown fox jumps over the lazy dog.</p>
<ul lang="fr">
<li>Langue de la page</li>
<li>Langue d’un passage</li>
</ul>
Voorbeeld van een taalwissel met een inline-element:
<p>In het Verenigd Koninkrijk zeggen ze <span lang="en">It’s raining cats and dogs.</span>.</p>
Met filmpjes en geluidsfragmenten kan informatie op een snelle en eenvoudige manier worden overbracht. Maar deze media zijn niet door iedereen goed te gebruiken, bijvoorbeeld als iemand niet (goed) kan horen of zien door een functiebeperking. Zorg daarom altijd voor een toegankelijk alternatief.
Ook voor mensen zonder functiebeperking is zo’n alternatief vaak gewenst. Zo kan een filmpje met ondertiteling ook goed worden gevolgd in de stiltecoupé van de trein.
In de richtlijnen voor toegankelijkheid van webcontent (de WCAG) wordt onderscheid gemaakt tussen verschillende vormen van media:
Geluidsfragmenten
Animaties (of andere bewegende beelden zonder geluid)
Filmpjes
Elementen van toegankelijke media
De elementen van toegankelijke geluidsfragmenten, animaties en filmpjes bestaan onder andere uit:
Tekstalternatief
Ondertitels
Audiodescriptie
Transcript
Gebarenvertolking
Tekstalternatief
Media valt onder de noemer ‘niet-tekstuele content’ en moet daarom, net zoals afbeeldingen, ook een tekstalternatief krijgen. Met een kort tekstalternatief kunnen mensen bepalen waar het stukje media over gaat en wat ze er mee willen doen. Ook als ze gebruik maken van een schermlezer of andere vorm van hulptechnologie.
Een kort tekstalternatief kan bijvoorbeeld worden toegevoegd met een goede koptekst boven het bestand of een korte beschrijving in de omringende tekst.
Audiodescriptie
Een audiodescriptie is een gesproken tekst, of een voice-over, die de belangrijke zichtbare informatie in een filmpje beschrijft als deze niet uit alleen het geluid te begrijpen is. Dat kan bijvoorbeeld gaan over tekst die in het filmpje te zien is, maar ook over veranderingen in omgeving of personage of over handelingen die worden uitgevoerd.
Een audiodescriptie maakt filmpjes toegankelijker voor mensen met een visuele beperking.
Een audiodescriptie kan worden toegevoegd in het geluid van het filmpje of eventueel als tweede geluidsspoor. Een tweede geluidsspoor wordt helaas nog niet (goed) ondersteund op de grote videoplatformen.
Zorg dat audiodescripties:
duidelijk verstaanbaar zijn;
zo veel mogelijk gelijk lopen met het beeld;
alle zichtbare tekst in beeld bevatten;
alle belangrijke beelden en gebeurtenissen beschrijven;
alle namen van de sprekers bevatten.
Ondertitels
Ondertitels zijn een tekstuele versie van de gesproken tekst in een filmpje dat gelijktijdig met het beeld wordt getoond. In ondertitels voor doven en slechthorenden worden óók alle belangrijke geluiden beschreven. Dat kunnen bijvoorbeeld geluidseffecten zijn, maar ook achtergrondgeluiden als ze belangrijk zijn om het filmpje goed te begrijpen.
Ondertitels maken filmpjes toegankelijker voor mensen met een auditieve beperking.
Ondertitels kunnen worden toegevoegd aan het beeld van een filmpje (open captions) of worden toegevoegd met een apart ondertitelbestand (closed captions).
Zorg dat ondertitels:
duidelijk zichtbaar zijn;
zo veel mogelijk gelijk lopen met het geluid;
geen andere informatie bedekken;
alle gesproken tekst bevatten;
alle belangrijke geluiden beschrijven;
alle namen van de spreker bevatten (als er meerdere mensen zijn die spreken);
het volume van de spreker benadrukken (als dit belangrijk is voor de context).
Transcript
Een transcript is een uitgeschreven versie van de gesproken tekst en de belangrijke geluiden in een filmpje of geluidsfragment. Het beschrijft wat er te zien en te horen is, wat er gezegd wordt en ook door wie.
Een transcript maakt geluidsfragmenten en animaties toegankelijker voor mensen met een visuele of auditieve beperking.
Dit kan bijvoorbeeld door een uitgebreide beschrijving toe te voegen in de buurt van het mediabestand.
Zorg dat transcripten:
in de buurt van het bijbehorende mediabestand worden getoond;
alle gesproken tekst bevatten;
alle belangrijke geluiden beschrijven;
alle zichtbare tekst in beeld bevatten;
alle belangrijke beelden en gebeurtenissen beschrijven;
alle links uit het filmpje bevatten;
alle namen van de sprekers bevatten.
Gebarenvertolking
Gebarenvertolking is een vertaling van gesproken tekst naar gebarentaal. Deze taal wordt uitgedrukt met bewegingen van de handen en armen en met gezichtsuitdrukkingen.
Door gebarenvertolking toe te voegen aan een filmpje worden filmpjes ook toegankelijk voor mensen met een auditieve beperking.
WCAG
Niet alle onderdelen zijn verplicht volgens de WCAG niveau AA. Niveau AA is de geldende verplichting vanuit de Nederlandse wetgeving. De onderdelen die wel verplicht zijn:
Geef mediabestanden een kort tekstalternatief.
Geef geluidsfragmenten een transcript.
Geef animaties (of andere bewegende beelden zonder geluid) een transcript of audiodescriptie.
Geef filmpjes ondertitels voor doven en slechthorenden.
Geef filmpjes een audiodescriptie als niet alle zichtbare details uit het geluid te begrijpen zijn.
Geef filmpjes een transcript als het interactieve elementen heeft.
Uitzonderingen
Voor live uitgezonden filmpjes bestaat een uitzondering in de Nederlandse wetgeving. Als het filmpje ná de uitzending online blijft staan of ergens opnieuw wordt gepubliceerd dan moet deze wél toegankelijk worden gemaakt.
Ook media dat is gepubliceerd vóór 23 september 2020 valt onder de uitzonderingen. Ook hiervoor geldt; als het ergens opnieuw wordt gepubliceerd dan moet deze wél toegankelijk worden gemaakt.
Andere tips voor toegankelijke media
Tot slot nog een paar tips voor het maken van toegankelijke filmpjes en geluidsfragmenten:
Gebruik geen geluidsfragmenten, animaties of filmpjes die automatisch starten, of zorg voor een mechanisme om deze content te pauzeren, te stoppen of zacht te zetten.
Gebruik geen content dat meer dan 3 keer per seconde flitst.
Gebruik genoeg contrast voor tekst in animaties en filmpjes.
Gebruik genoeg contrast voor niet-tekstuele bedieningselementen in de videospeler.
Zorg dat alle functionaliteit van de videospeler te bereiken en bedienen is met het toetsenbord.
Op websites staan vaak blokken met content die op iedere pagina terug komen, zoals een logo, een zoekveld en een navigatie met een lijst van links. Mensen die alleen het toetsenbord gebruiken moeten eerst door deze blokken navigeren voordat ze bij de hoofdcontent van de webpagina komen, en dat op iedere pagina opnieuw.
Succescriterium 2.4.1 Blokken omzeilen vereist dat dit soort herhalende blokken met content overgeslagen kunnen worden. Dit kan redelijk eenvoudig met een zogenaamde skiplink. Een skiplink is een ankerlink aan het begin van een webpagina die direct verwijst naar de hoofdcontent. Een ontwikkelaar kan skiplinks toevoegen in de code van een website.
Een skiplink is bedoeld om het navigeren over een website prettiger te maken voor mensen die:
geen muis kunnen gebruiken door bijvoorbeeld een motorische beperking;
een schermlezer gebruiken, zoals voorleessoftware of een brailleleesregel;
de voorkeur hebben om alleen met het toetsenbord te navigeren.
Code van een skiplink
Skiplinks worden in de code opgemaakt met een <a>-element. Het href-attribuut van dit element verwijst naar een id-attribuut van een element lager op de pagina, bijvoorbeeld het <main>-element.
<a href="#primary" class="skip">Naar de inhoud</a>
<main id="primary">
Skiplinks hoeven niet altijd zichtbaar te zijn. Verberg de skiplink bijvoorbeeld met CSS zodat het alleen voor hulptechnologieën te zien is. Dit kan met de volgende CSS:
Bij een ingewikkelde website kunnen meerdere skiplinks worden toegevoegd, zoals een skiplink naar de navigatie en naar de content. In de meeste gevallen is 1 skiplink genoeg.
Voorbeeldcode
In een stuk pagina-code ziet een skiplink er zo uit:
Skiplinks kunnen ook in de content van een webpagina met veel tekst of links worden gebruikt. Gebruik hier een ankerlink aan het begin van de content die verwijst naar sectie in de content van de webpagina.
Tabellen zijn een goede manier om complexe gegevens overzichtelijk weer te geven. Als ze goed zijn opgemaakt dan zijn tabellen door iedereen goed te gebruiken. Zorg daarom dat de tabellen gebruik maken van de juiste elementen in de code. Als de relaties tussen de gegevens ook in de code staan dan kan een schermlezer, zoals voorleessoftware of een brailleleesregel, de informatie uit de tabel op een logische manier presenteren.
In dit artikel staan handvatten voor het maken van een toegankelijke tabel.
Tabellen gebruiken
Een tabel kan in een CMS meestal makkelijk worden toegevoegd in de editor op de pagina. Geef aan welke cellen tabelkoppen zijn en in welke cellen gegevens staan.
Gebruik tabellen alleen als het de informatie duidelijker maakt. Zorg voor simpele en overzichtelijke tabellen.
Code voor tabellen
Tabellen worden in de code opgemaakt met het <table>-element. Dit element heeft onderliggende <tr>-, <th>-, en <td>-elementen:
Het <tr>-element wordt gebruikt voor een tabelrij.
Het <th>-element wordt gebruikt voor een tabelkop.
Gegevenscellen worden opgemaakt met <td>-elementen.
Het <caption>-element geeft de inhoud van de tabel in het kort weer. Het <caption>-element is optioneel.
Eenvoudige tabellen
In eenvoudige tabellen, zoals een tabel met 1 kolom of 1 rij met koppen, kan hulptechnologie de onderlinge relaties zelf bepalen. Gebruik de juiste HTML-elementen voor de tabelkoppen en de gegevenscellen.
Voorbeeld van een tabel met 1 kolom met koppen:
<table>
<caption>Beschrijving van de tabelgegevens</caption>
<tr>
<th>Tabelkop van rij 1</th>
<td>Gegevenscel 1</td>
<td>Gegevenscel 2</td>
</tr>
<tr>
<th>Tabelkop van rij 2</th>
<td>Gegevenscel 3</td>
<td>Gegevenscel 4</td>
</tr>
</table>
Voorbeeld van een tabel met 1 rij met koppen:
<table>
<caption>Beschrijving van de tabelgegevens</caption>
<tr>
<th>Tabelkop van kolom 1</th>
<th>Tabelkop van kolom 2</th>
</tr>
<tr>
<td>Gegevenscel 1</td>
<td>Gegevenscel 2</td>
</tr>
<tr>
<td>Gegevenscel 3</td>
<td>Gegevenscel 4</td>
</tr>
</table>
Complexe tabellen
Sommige tabellen zijn wat moeilijker. Bijvoorbeeld doordat er koppen in 2 richtingen staan. In deze tabellen moet in de code expliciet worden aangegeven welke kop bij welke cellen hoort. Dit kan met het scope-attribuut of het headers-attribuut.
scope-attribuut
Gebruik het scope-attribuut om aan te geven welke cellen bij de kop horen. Voeg het scope-attribuut toe aan de tabelkop van een rij of kolom. Het attribuut kan de waarde row of col hebben:
scope="col": Geeft aan dat de cel een kop is voor de kolom.
scope="row": Geeft aan dat de cel een kop is voor de rij.
Voorbeeld van een tabel met 1 kolom en 1 rij koppen met het scope-attribuut:
<table>
<caption>Beschrijving van de tabelgegevens</caption>
<tr>
<td></td>
<th scope="col">Tabelkop van kolom 1</th>
<th scope="col">Tabelkop van kolom 2</th>
</tr>
<tr>
<th scope="row">Tabelkop van rij 1</th>
<td>Gegevenscel 1</td>
<td>Gegevenscel 2</td>
</tr>
<tr>
<th scope="row">Tabelkop van rij 2</th>
<td>Gegevenscel 3</td>
<td>Gegevenscel 4</td>
</tr>
</table>
headers-attribuut
Gebruik het headers-attribuut om aan te geven welke kop bij de cel hoort. Dit kunnen meerdere koppen zijn. Het headers-attribuut koppelt de cel met het id-attribuut aan de cel.
Voorbeeld van een tabel met 1 kolom en 1 rij koppen met het headers-attribuut:
<table>
<caption>Beschrijving van de tabelgegevens</caption>
<tr>
<td></td>
<th id="kolom1">Tabelkop van kolom 1</th>
<th id="kolom2">Tabelkop van kolom 2</th>
</tr>
<tr>
<th id="rij1">Tabelkop van rij 1</th>
<td headers="rij1 kolom1">Gegevenscel 1</td>
<td headers="rij2 kolom1">Gegevenscel 2</td>
</tr>
<tr>
<th id="rij2">Tabelkop van rij 2</th>
<td headers="rij2 kolom1">Gegevenscel 3</td>
<td headers="rij2 kolom2">Gegevenscel 4</td>
</tr>
</table>
Nog complexere tabellen
Het is mogelijk om complexere tabellen te gebruiken. Bijvoorbeeld met koppen voor meerdere rijen en kolommen. Pas hier wel wel op; met te veel informatie in een tabel kan het onoverzichtelijk worden. Kies dan liever voor 2 of meerdere eenvoudige tabellen.
<thead>-, <tbody>- en <tfoot>-elementen
Voor het opbouwen van een tabel met meerdere rijen met koppen kunnen <thead>-, <tbody>-, en <tfoot>-elementen worden gebruikt.
Het <thead>-element wordt gebruikt voor de rijen met koppen.
Het <tbody>-element wordt gebruikt voor de rijen met gegevenscellen.
Gebruik het <tfoot>-element voor het resultaat van de bovenliggende gegevenscellen.
De <thead>-, <tbody>-, en <tfoot>-elementen kunnen ook goed gebruikt worden om stijlkenmerken toe te voegen aan onderdelen van de tabel.
<table>
<caption>Beschrijving van de tabelgegevens</caption>
<thead>
<tr>
<td rowspan="2"></td>
<th colspan="2">Tabelkop van kolom 1 en 2</th>
<th colspan="2">Tabelkop van kolom 3 en 4</th>
</tr>
<tr>
<th scope="col">Tabelkop van kolom 1</th>
<th scope="col">Tabelkop van kolom 2</th>
<th scope="col">Tabelkop van kolom 3</th>
<th scope="col">Tabelkop van kolom 4</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">Tabelkop van rij 1</th>
<td>Gegevenscel 1</td>
<td>Gegevenscel 2</td>
<td>Gegevenscel 3</td>
<td>Gegevenscel 4</td>
</tr>
<tr>
<th scope="row">Tabelkop van rij 2</th>
<td>Gegevenscel 5</td>
<td>Gegevenscel 6</td>
<td>Gegevenscel 7</td>
<td>Gegevenscel 8</td>
</tr>
</tbody>
<tfoot>
<th scope="row">Tabelkop van rij 3</th>
<td>Som gegevens 1 en 5</td>
<td>Som gegevens 2 en 6</td>
<td>Som gegevens 3 en 7</td>
<td>Som gegevens 4 en 8</td>
</tfoot>
</table>
De <thead>-, <tbody>-, en <tfoot>-elementen kunnen ook worden gebruikt in eenvoudige tabellen.
colgroup-attribuut en rowgroup-attribuut
Als een kop geldt voor meerdere kolommen of rijen, gebruik dan de waarden:
scope="colgroup": Geeft aan dat de cel een kop is voor meerdere kolommen.
scope="rowgroup": Geeft aan dat de cel een kop is voor meerdere rijen.
Om deze opzet goed te gebruiken moet eerst de kolomstructuur worden vastgelegd. Deze wordt aan het begin van de tabel gedefinieerd met het <colgroup>-element. Hierin wordt een kolom gedefinieert met het <col>-element. Zorg dat de som van het totaal aantal vastgelegde kolommen gelijk is aan het aantal kolommen in de tabel.
Het <col>-element kan ook goed gebruikt worden om stijlkenmerken toe te voegen aan een kolom.
<table>
<caption>Beschrijving van de tabelgegevens</caption>
<colgroup>
<col span="2">
<col span="2" style="background-color:tomato;">
<col span="2">
</colgroup>
<tr>
<td rowspan="2" colspan="2"></td>
<th colspan="2" scope="colgroup">Tabelkop van kolom 1 en 2</th>
<th colspan="2" scope="colgroup">Tabelkop van kolom 3 en 4</th>
</tr>
<tr>
<th scope="col">Tabelkop van kolom 1</th>
<th scope="col">Tabelkop van kolom 2</th>
<th scope="col">Tabelkop van kolom 3</th>
<th scope="col">Tabelkop van kolom 4</th>
</tr>
<tr>
<th rowspan="2" scope="rowgroup">Tabelkop van rij 1 en 2</th>
<th scope="row">Tabelkop van rij 1</th>
<td>Gegevenscel 1</td>
<td>Gegevenscel 2</td>
<td>Gegevenscel 3</td>
<td>Gegevenscel 4</td>
</tr>
<tr>
<th scope="row">Tabelkop van rij 2</th>
<td>Gegevenscel 5</td>
<td>Gegevenscel 6</td>
<td>Gegevenscel 7</td>
<td>Gegevenscel 8</td>
</tr>
</table>
Deze tabel ziet er zo uit:
Beschrijving van de tabelgegevens
Tabelkop van kolom 1 en 2
Tabelkop van kolom 3 en 4
Tabelkop van kolom 1
Tabelkop van kolom 2
Tabelkop van kolom 3
Tabelkop van kolom 4
Tabelkop van rij 1 en 2
Tabelkop van rij 1
Gegevenscel 1
Gegevenscel 2
Gegevenscel 3
Gegevenscel 4
Tabelkop van rij 2
Gegevenscel 5
Gegevenscel 6
Gegevenscel 7
Gegevenscel 8
Grote tabellen
Voeg een horizontale scroll toe als een webpagina niet breed genoeg is om de inhoud van een tabel volledig weer te geven. Deze wordt toegevoegd in de code. Voeg hiervoor overflow-x:auto toe aan de stijlkenmerken van de container rondom de tabel.
Zorg dan ook dat de horizontale scroll van de tabel met het toetsenbord te bereiken en bedienen is. Dit wordt gedaan met het tabindex-attribuut.
Succescriterium 1.1.1 Niet-tekstuele content lijkt erg eenvoudig: Geef alle niet-tekstuele content op een pagina een passend alternatief dat wel uit tekst bestaat. Toch gaat dit in de praktijk vaak mis.
In dit artikel staan handvatten voor het toevoegen van een tekstalternatief aan een afbeelding zoals een foto, illustratie of icoon. Hier kan een contentspecialist, webredacteur of ontwikkelaar afbeeldingen direct toegankelijker mee maken.
Succescriterium 1.1.1 Niet-tekstuele content valt onder principe 1: Waarneembaar van de richtlijnen voor toegankelijkheid van webcontent. Dit principe moet zorgen dat iedereen een website, document of app kan ervaren met de zintuigen die voor hen beschikbaar zijn. Niet iedereen heeft namelijk altijd, alle zintuigen ter beschikking.
Tekstalternatieven hebben meerdere functies:
Schermlezers gebruiken het tekstalternatief om niet-tekstuele content te presenteren. Zo kan voorleessoftware tekst omzetten in spraak en kan een brailleleesregel tekst vertalen naar braille. Op deze manier wordt niet-tekstuele content ook toegankelijk voor mensen met een visuele beperking.
Browsers laten het tekstalternatief zien als een afbeelding niet kan inladen door een fout in de code of een fout in de verbinding.
Zoekmachines gebruiken het tekstalternatief bij het beoordelen van de inhoud van een webpagina.
Schrijven van een tekstalternatief
Een tekstalternatief kan in een CMS meestal makkelijk worden toegevoegd in de mediabibliotheek of in de editor op de pagina.
Een tekstalternatief is alleen nuttig als de beschrijving goed passend is; De inhoud van het tekstalternatief hangt af van het doel van de afbeelding. Afbeeldingen zijn in 4 categorieën te verdelen:
Informatief: Afbeeldingen die informatie toevoegen aan een pagina.
Functioneel: Afbeeldingen die ook een link of knop zijn.
Decoratief: Afbeeldingen die niet noodzakelijk zijn voor het begrijpen van de tekst of de pagina.
Complex: Afbeeldingen die veel informatie toevoegen aan een pagina.
Informatieve afbeeldingen
Geef informatieve afbeeldingen een tekstalternatief dat beschrijft wat er op de afbeelding te zien is.
Functionele afbeeldingen
Geef functionele afbeeldingen een tekstalternatief dat beschrijft wat het doel van de link is of beschrijft wat het resultaat van de actie is.
Decoratieve afbeeldingen
Zorg dat hulptechnologieën decoratieve afbeeldingen kunnen negeren. Een leeg tekstalternatief is vaak al voldoende.
Complexe afbeeldingen
Geef complexe afbeeldingen naast een beknopte beschrijving in het tekstalternatief ook een langere beschrijving in de omringende tekst.
Code van een tekstalternatief
<img>-element
Het <img>-element is een veelgebruikte manier om afbeeldingen toe te voegen aan een website. Een tekstalternatief voor een <img>-element wordt gegeven met het alt-attribuut. Alle <img>-elementen moeten een alt-attribuut hebben.
De inhoud van het alt-attribuut is standaard niet zichtbaar.
<img src="logo-wcag.jpg" alt="WCAG.nl">
Bij een decoratieve afbeelding moet het alt-attribuut een lege waarde hebben (alt=""). Hierdoor kunnen hulptechnologieën de afbeelding negeren.
<img src="horizontale-lijn.jpg" alt="">
Geef bij complexe afbeeldingen naast een beschrijving in het alt-attribuut ook een langere beschrijving in de omringende tekst. Deze kan in de code worden gekoppeld aan het <img>-element. Gebruik hiervoor het aria-describedby-attribuut met het id-attribuut van het beschrijvende element.
<img src="infographic.jpg" alt="besluitboom voor het schrijven van tekstalternatief" aria-describedby="1">
<div id="1">
<p>Afbeeldingen zijn in 4 categorieën te verdelen:</p>
<ol>
<li>Informatief</li>
<li>Functioneel</li>
<li>Decoratief</li>
<li>Complex</li>
</ol>
...
</div>
<svg>-element
Het <svg>-element is een container voor SVG-afbeeldingen. SVG-afbeeldingen zijn vector-based afbeeldingen. Deze afbeeldingen zijn hierdoor goed schaalbaar; ze kunnen worden vergroot zonder dat de kwaliteit verloren gaat.
Een tekstalternatief kan op een aantal manieren worden toegevoegd aan een <svg>-element. Bijvoorbeeld met het <title>-element of, bij voorkeur, samen met het aria-labelledby-attribuut.
Als het <svg>-element puur decoratief is, gebruik dan het aria-hidden="true"-attribuut zodat het kan worden genegeerd door hulptechnologieën.
<svg aria-hidden="true">
...
</svg>
<figure>-element
Het <figure>-element is toegevoegd in HTML5. In het <figure>-element kunnen afbeeldingen worden gepresenteerd (maar ook andere content zoals tekst, quotes, codeblokken, enz.).
Voor het plaatsen van een afbeelding met het <figure>-element wordt een <img>-element in het <figure>-element geplaatst. Het <img>-element heeft hier ook het alt-attribuut nodig.
Het <figcaption>-element geeft een zichtbaar bijschrift de afbeeldingen in een <figure>-element. Het <figcaption>-element is optioneel.
Het <figure>-element is handig voor het presenteren van meerdere afbeeldingen in een groep.
<figure>
<img src="teckel_1.jpg" alt="teckel rennend in het gras">
<img src="teckel_2.jpg" alt="teckel staand in de zee">
<figcaption>
Mijn hond Jet
</figcaption>
</figure>
Icon fonts of toolkits
Icon fonts zijn lettertypen met iconen in plaats van letters en cijfers. Icon toolkits bestaan uit een iconenbibliotheek met soms duizenden iconen. Deze manieren van het plaatsen van een icoon zijn populair omdat de iconen makkelijk met CSS kunnen worden vormgegeven en goed schaalbaar zijn.
Deze iconen zijn standaard nog niet goed toegankelijk. Ze hebben geen tekstalternatief en worden soms, net als gewone tekst, wél gepresenteerd door schermlezers. Zorg daarom dat het icoon wordt verborgen voor hulptechnologieën met het aria-hidden="true"-attribuut en geef het icoon een passend tekstalternatief.
Een tekstalternatief voor een icon font kan bijvoorbeeld worden toegevoegd met gewone tekst die dan wordt verborgen met CSS. Deze tekst is dan alleen voor hulptechnologieën te zien. Dit kan eventueel samen met het title-attribuut.
<i class="fas fa-calendar" aria-hidden="true" title="Datum"></i>
<span class="screenreader-text">Datum:</span>
<span>19 mei 2022</span>
Tot slot nog een paar tips voor het schrijven van een goed tekstalternatief:
Beschrijf wat belangrijk is voor de context en het doel van de afbeelding.
Zorg dat de beschrijving beknopt maar relevant is (maximaal 150 tekens).
Gebruik in de beschrijving alleen teksten zoals “foto van..”, “illustratie van..” of “schermafbeelding van..” als dit relevant is voor de context en het doel van de afbeelding.
Gebruik in de beschrijving alle tekst die op de afbeelding te zien is.
In Nederland heeft ongeveer 25% van de bevolking een vorm van functiebeperking. Deze groep bestaat onder andere uit mensen met een auditieve beperking, cognitieve of neurologische beperking, fysieke of motorische beperking, visuele beperking of spraakbeperking.
Het is moeilijk om de echte cijfers te bepalen. Veel cijfers zijn een schatting en er is een overlap in cijfers doordat mensen meerdere functiebeperkingen kunnen hebben. De cijfers kunnen dus niet zomaar bij elkaar worden opgeteld.
Functiebeperking
Aantal mensen
Blinden
Ongeveer 76.000
Slechtzienden
Ongeveer 222.000
Kleurenblinden
Ongeveer 750.000
Doven en slechthorenden
Ongeveer 1.500.000
Ernstige motorische beperking
Ongeveer 472.000
Lichte verstandelijke beperking
Ongeveer 68.000
Dyslectici
Ongeveer 850.000
Laaggeletterden
Ongeveer 2.500.000
Schatting van het aantal mensen in Nederland met een functiebeperking volgens Digitoegankelijk in augustus 2019
Veel van deze mensen hebben dagelijks problemen met de toegankelijkheid van digitale informatie. Daarnaast is er een steeds groter wordende groep ouderen die moeite hebben met het gebruik van computers, smartphones, websites en apps.
Functiebeperkingen
Auditieve beperking
Auditieve beperkingen hebben te maken met een beperking aan het gehoor. Mensen met een auditieve beperking zijn bijvoorbeeld slechthorend of doof. Zij lopen mogelijk tegen problemen aan met informatie die alleen met geluid wordt overgebracht.
Voor een aantal mensen met een auditieve beperking is gebarentaal de primaire taal.
Voor mensen met een auditieve beperking:
Geef geluidsfragmenten een transcript.
Geef filmpjes ondertitels waarin ook alle belangrijke geluiden zijn opgenomen.
Cognitieve of neurologische beperking
Cognitieve en neurologische beperkingen hebben te maken met een beperking in het zenuwstelsel, inclusief de hersenen. Dit kan invloed hebben op de spraak, het gehoor, het zicht en het begrip. Dit zijn bijvoorbeeld mensen die ADHD, ASS, toevallen, een leerstoornis of een stoornis aan het geheugen hebben.
Voor mensen met een cognitieve of neurologische beperking:
Zorg dat automatisch bewegende, knipperende of scrollende content kan worden gepauzeerd, gestopt of uitgezet.
Gebruik geen elementen die meer dan 3 keer per seconde flitsen.
Zorg dat navigaties op iedere pagina in een vaste volgorde in de code staan.
Zorg voor duidelijke foutmeldingen als een formulier verkeerd is ingevuld.
Fysieke of motorische beperking
Fysieke of motorische beperkingen hebben te maken met een beperking in de beweging. In deze groep beperkingen vallen bijvoorbeeld mensen met onvrijwillige bewegingen (spasmen of tremors), coördinatieproblemen, verlamming, artritis en mensen met ontbrekende ledematen. Zij kunnen moeite hebben met de bediening van een website.
Voor mensen met een fysieke of motorische beperking:
Zorg dat alle functionaliteit te bereiken en bedienen is met het toetsenbord.
Zorg dat tijdslimieten kunnen worden uitgezet, aangepast of worden verlengd.
Zorg bij functionaliteit dat gebruik maakt van meerpuntsgebaren of padgebaseerde gebaren ook voor een alternatieve bediening die met 1 klik of tap te bedienen is.
Visuele beperking
Visuele beperkingen zijn een beperking aan het zicht. Mensen met een visuele beperking zijn bijvoorbeeld kleurenblind, slechtziend of blind. Zij lopen mogelijk tegen problemen aan met informatie die alleen met vormgeving wordt overgebracht.
Voor mensen met een visuele beperking:
Geef alle niet-tekstuele content een passend tekstalternatief.
Geef filmpjes een audiodescriptie als niet alle zichtbare informatie in geluid duidelijk wordt.
Gebruik niet alleen kleur om informatie over te dragen.
Gebruik genoeg contrast voor tekst en bedieningselementen.
Zorg dat tekst kan worden herschaald zonder dat er iets wegvalt of niet meer werkt en zonder dat horizontaal scrollen voorkomt.
Spraakbeperking
Spraakbeperkingen hebben te maken met het produceren van spraak dat goed verstaanbaar is. Dit zijn bijvoorbeeld mensen die stotteren, die niet goed kunnen articuleren of mensen die helemaal niet kunnen spreken. Zij lopen mogelijk tegen problemen aan met functionaliteit die met stem- of spraak wordt bediend.
Voor mensen met een spraakbeperking:
Bied meer contactmogelijkheden dan alleen een telefoonnummer.
Digitale toegankelijkheid is voor iedereen
Een toegankelijke website heeft ook voordelen voor mensen zonder blijvende functiebeperking. Ondertitels zijn bijvoorbeeld ook handig als je een filmpje wilt kijken in een omgeving met veel lawaai. En met genoeg kleurcontrast kun je tekst beter lezen als er veel licht op je scherm valt.
Digitale toegankelijkheid vergroot ook de gebruiksvriendelijkheid voor iedereen, de vindbaarheid in zoekmachines en de compatibiliteit van een website.
