WCAG 2.2-toegankelijkheidsproblemen op websites oplossen

1.1.1 Niet-tekstuele content

Elke afbeelding, elk pictogram en elk ander niet-tekstueel element moet een tekstbeschrijving bevatten die dezelfde informatie of functie overbrengt.

Presentatierollen en verborgen statussen op decoratieve content oplossen

Decoratieve afbeeldingen en niet-tekstuele content die geen betekenisvolle informatie overbrengen, moeten worden verborgen voor hulptechnologieën, zoals schermlezers. Zo kunnen gebruikers van hulptechnologieën zich richten op de betekenisvolle content.

Zoek in de HTML-code de decoratieve content die geen betekenisvolle informatie of functionaliteit biedt.

1. Voeg bij decoratieve <svg>-elementen het attribuut aria-hidden="true" toe aan het <svg>-element.

2. Voeg bij andere decoratieve niet-tekstuele content, zoals een <img> die alleen als rand wordt gebruikt, een <object> die alleen voor opmaak wordt gebruikt, of een <area> die voor visuele effecten wordt gebruikt, het attribuut role="presentation" toe.

3. Als het decoratieve niet-tekstuele element al een role-attribuut heeft, vervang dit dan door role="presentation".

Voorbeeld

!-- Incorrect -->
<svg width="100" height="100">
  <circle
    cx="50"
    cy="50"
    r="40"
    stroke="black"
    stroke-width="3"
    fill="red"
  />
</svg>
<!-- Correct -->
<svg width="100" height="100" aria-hidden="true">
  <circle
    cx="50"
    cy="50"
    r="40"
    stroke="black"
    stroke-width="3"
    fill="red"
  />
</svg>

1.2.1 Alleen audio en alleen video (vooraf opgenomen)

Alle vooraf opgenomen audio of video zonder beeld of geluid moet een teksttranscript bevatten dat dezelfde informatie biedt.

Ontbrekende audiotranscripten oplossen

Een teksttranscript voor audiocontent zorgt ervoor dat alle gebruikers, ook mensen die doof of slechthorend zijn, toegang hebben tot dezelfde informatie.

1. Zoek in de HTML-code het <audio>-element.

2. Voeg na het <audio>-element een <p>-element toe.

3. Voer binnen het <p>-element het volledige transcript van de audiocontent in tekstvorm in.

Voorbeeld

<!-- Incorrect -->
<video src="training-overview.mp4" controls>
</video> 

<!-- Correct -->
<video src="training-overview.mp4" controls>
<track src="training-overview-en.vtt" kind="captions" srclang="en" label="English">
</video> 

Ontbrekende ondertiteling in ingesloten Vimeo-video's oplossen

Ondertiteling moet beschikbaar zijn in Vimeo-video's, zodat de video's toegankelijk zijn voor gebruikers die doof of slechthorend zijn. In Vimeo kunt u ondertiteling toevoegen via de video-instellingen.

1. Open de video op vimeo.com.

2. Meld u aan met het account dat eigenaar is van de video.

3. Ga naar Instellingen.

4. Selecteer het tabblad Distributie en open vervolgens Ondertitels (of Geavanceerd > Ondertitels in oudere lay-outs).

5. Zoek de sectie Ondertitels/CC.

6. Upload een .vtt- of .srt-ondertitelingsbestand.

7. Sla uw wijzigingen op en controleer vervolgens of de ondertiteling is ingeschakeld door een voorbeeld van de video te bekijken.

Opmerking: Ondertiteling wordt automatisch weergegeven in de ingesloten <iframe> als deze in Vimeo is ingeschakeld.

Ontbrekende ondertiteling in ingesloten YouTube-video's oplossen

YouTube-video's moeten ondertiteling bevatten, zodat gebruikers die doof of slechthorend zijn toegang hebben tot de gesproken content. YouTube biedt opties voor het handmatig uploaden van ondertiteling of voor automatische ondertiteling.

1. Open de video op youtube.com met het account dat eigenaar is van de video.

2. Ga naar YouTube Studio en selecteer de video die u wilt bewerken.

3. Klik in het linkermenu op Ondertitels.

4. Kies de taal voor uw ondertiteling.

5. Klik op Toevoegen en selecteer een van de volgende opties:

   • Bestand uploaden (voor .vtt- of .srt-bestanden)

   • Automatisch synchroniseren (plak het volledige transcript en laat YouTube de timing bepalen)

   • Handmatig typen

6. Controleer uw ondertiteling en publiceer deze.

1.3.1 Info en relaties

Alle informatie die via lay-out, opmaak of visuele structuur wordt weergegeven, moet ook beschikbaar zijn in tekst of zo zijn gecodeerd dat hulptechnologieën deze kunnen begrijpen.

Ontbrekende ARIA-landmarkrollen in de paginastructuur oplossen

Landmarkrollen helpen gebruikers van schermlezers de paginaindeling te begrijpen en snel naar de belangrijkste secties te navigeren.

1. Zoek in uw HTML-code de structurele elementen (bijvoorbeeld <div>, <section>, <form>).

2. Voeg de juiste ARIA-landmarkrol toe met het role-attribuut (bijvoorbeeld role="main", role="navigation", role="form"). Lees meer over de juiste landmarkrol.
   Opmerking: Voeg alleen ARIA-rollen toe als het element nog geen ingebouwde landmarkrol heeft (bijvoorbeeld <nav> fungeert al als navigation).

Voorbeeld

<!-- Incorrect -->
<div id="main-content">
<p>Welcome to our website.</p>
</div>

<!-- Correct -->
<div id="main-content" role="main">
<p>Welcome to our website.</p>
</div>

Ontbrekende fieldset of groep voor invoervelden met dezelfde naam oplossen

Keuzerondjes of selectievakjes met dezelfde naam moeten worden gegroepeerd, zodat hun onderlinge relatie duidelijk is. Zo begrijpen gebruikers van schermlezers dat de invoervelden bij elkaar horen.

1. Zoek in de HTML-code de keuzerondjes of selectievakjes die hetzelfde name-attribuut hebben.

2. Plaats de gerelateerde invoervelden in een <fieldset>-element.

3. Voeg een <legend> toe als eerste element binnen de <fieldset> om de groep te beschrijven.

U kunt de invoervelden ook in een container met role="group" of role="radiogroup" plaatsen en een label opgeven met aria-labelledby of aria-label.

Voorbeeld

<!-- Incorrect -->
<label>
  <input type="checkbox" name="city"> Toronto
</label>
<label>
  <input type="checkbox" name="city"> London
</label>
<!-- Correct -->
<fieldset>
  <legend>Select your location</legend>
  <label>
    <input type="checkbox" name="city"> Toronto
  </label>
  <label>
    <input type="checkbox" name="city"> London
  </label>
</fieldset>
<!-- Correct -->
<div role="group" aria-label="Select your location">
  <label>
    <input type="checkbox" name="city"> Toronto
  </label>
  <label>
    <input type="checkbox" name="city"> London
  </label>
</div>

<li>-elementen zonder bovenliggend element oplossen

Door lijstitems in een lijstelement te plaatsen, kunnen schermlezers gegroepeerde content correct herkennen.

1. Zoek in de HTML-code de <li>-elementen die niet in een <ul> of <ol> zijn geplaatst.

2. Plaats de <li>-elementen in een <ul> (voor opsommingstekens) of <ol> (voor een genummerde lijst).

Voorbeeld

<!-- Incorrect -->
<li>First item</li>
<li>Second item</li>
<!-- Correct -->
<ul>
  <li>First item</li>
  <li>Second item</li>
</ul>

Problemen met de structuur van beschrijvingslijsten (DL) oplossen

Beschrijvingslijsten worden gebruikt om paren van gerelateerde informatie weer te geven, zoals een term en de bijbehorende uitleg. Als de lijst niet correct is gestructureerd, kunnen schermlezers de content in de verkeerde volgorde voorlezen of gebruikers in verwarring brengen.

1. Zoek in uw HTML-code de gemarkeerde <dl>-elementen.

2. Plaats binnen de <dl> de term in een <dt>-element.

3. Plaats binnen een <dt>-element de beschrijving in een <dd>-element.

4. Verwijder alle andere elementen die rechtstreeks in de <dl> zijn geplaatst, tenzij ze in een <dt> of <dd> staan.

Voorbeeld

<!-- Incorrect -->
<dl>
  <p>HTML</p>
  <p>A markup language for web pages.</p>
</dl>
<!-- Correct -->
<dl>
  <dt>HTML</dt>
  <dd>A markup language for web pages.</dd>
</dl>

Definitietermen (DT) en definitiebeschrijvingen (DD) buiten een beschrijvingslijst (DL) oplossen

Definitietermen (<dt>) en definitiebeschrijvingen (<dd>) moeten altijd in een beschrijvingslijst (<dl>) staan. Wanneer <dt>- of <dd>-elementen buiten een <dl> worden gebruikt, kunnen schermlezers de content in de verkeerde volgorde voorlezen of gebruikers in verwarring brengen.

1. Zoek in uw HTML-code de gemarkeerde <dt>- of <dd>-elementen.

2. Zorg ervoor dat elke <dt> en <dd> in een <dl>-element is geplaatst. Als de content geen deel uitmaakt van een beschrijvingslijst, vervang <dt> en <dd> dan door een passend element (bijvoorbeeld <h2>, <h3>, <p>).

Voorbeeld

<!-- Incorrect -->
<dt>CSS</dt>
<dd>A language used to style web pages.</dd>
<!-- Correct -->
<dl>
  <dt>CSS</dt>
  <dd>A language used to style web pages.</dd>
</dl>

Onjuist gebruik van het scope-attribuut in tabellen oplossen

Wanneer een tabel het scope-attribuut gebruikt, mag dit alleen worden toegepast op koptekstcellen (<th>), zodat duidelijk is op welke gegevenscellen ze betrekking hebben. Onjuiste of ontbrekende scope-waarden kunnen ertoe leiden dat ondersteunende technologieën koppen niet correct aan tabelgegevens koppelen.

1. Zoek in uw HTML-code het gemarkeerde scope-attribuut of de gemarkeerde tabelelementen.
2. Werk het scope-attribuut bij zodat:
   1. Het scope-attribuut alleen wordt toegepast op <th>-elementen.
   2. Elk <th>-element een geschikte scope-waarde heeft, zoals col, row, colgroup of rowgroup.
   3. De waarde in uw scope-attribuut de structuur en relaties van de tabel nauwkeurig weergeeft.

Voorbeeld

<!-- Incorrect -->
<table>
  <tr>
    <th>Name</th>
    <th>Score</th>
  </tr>
  <tr>
    <th>Alice</th>
    <td>95</td>
  </tr>
</table>
<!-- Correct -->
<table>
  <tr>
    <th scope="col">Name</th>
    <th scope="col">Score</th>
  </tr>
  <tr>
    <th scope="row">Alice</th>
    <td>95</td>
  </tr>
</table>

<!-- Incorrect -->
<table>
  <tr>
    <th scope="column1">Name</th>
    <th scope="column2">Score</th>
  </tr>
  <tr>
    <th scope="row1">Alice</th>
    <td>95</td>
  </tr>
</table>
<!-- Correct -->
<table>
  <tr>
    <th scope="col">Name</th>
    <th scope="col">Score</th>
  </tr>
  <tr>
    <th scope="row">Alice</th>
    <td>95</td>
  </tr>
</table>

Onjuist gebruik van het headers-attribuut oplossen door scope in tabellen te gebruiken

Tabellen moeten gegevenscellen (<td>) bevatten die worden beschreven door tabelkoppen (<th>). Tabellen die wel koppen maar geen gegevenscellen bevatten, bieden geen zinvolle relaties voor ondersteunende technologieën en kunnen verwarring veroorzaken voor gebruikers van schermlezers.

Zoek in uw HTML-code de gemarkeerde tabelelementen die <th>-elementen bevatten maar geen bijbehorende <td>-elementen.

Werk de tabelstructuur zo bij dat:

1. Elke tabel een of meer <td>-elementen met gegevens bevat.

2. <th>-elementen alleen worden gebruikt wanneer ze daadwerkelijke tabelgegevens beschrijven.

3. Tabellen die alleen voor lay-out of presentatie worden gebruikt, geen <th>-elementen bevatten.

4. Als de tabel geen gegevens bevat, de tabel wordt verwijderd of door markup zonder tabel wordt vervangen.

Voorbeeld

<!-- Incorrect -->
<table>
  <tr>
    <th scope="col">Name</th>
  </tr>
</table>
<!-- Correct -->
<table>
  <tr>
    <th scope="col">Name</th>
  </tr>
  <tr>
    <td>John</td>
  </tr>
</table>

Onjuiste ARIA-groepering voor de rol “group” oplossen

Correct gebruik van ARIA-rollen helpt schermlezers de structuur van de pagina te begrijpen, waardoor gebruikers met een beperking de inhoud gemakkelijker kunnen navigeren en ermee kunnen werken.

1. Zoek in de HTML-code het element met role="group".

2. Neem binnen het element ten minste één interactief bedieningselement op (bijvoorbeeld <input>, <textarea> of <select>).
   Opmerking: Lees meer over welk interactief bedieningselement u moet opnemen. Als er geen geschikte interactieve bedieningselementen zijn, overweeg dan om role="group" te vervangen door een geschiktere ARIA-rol of -structuur.

Voorbeeld

<!-- Incorrect -->
<div role="group">
<p>This is a group with no interactive elements.</p>
</div>   

<!-- Correct -->
<div role="group">
<label for="username">Username:</label>
<input id="username" type="text">
</div>

Onjuiste ARIA-groepering voor de rol “radiogroup” oplossen

Correct gebruik van ARIA-rollen helpt schermlezers de structuur van de pagina te begrijpen, waardoor gebruikers met een beperking de inhoud gemakkelijker kunnen navigeren en ermee kunnen werken.

1. Zoek in de HTML-code het element met role="radiogroup".

2. Neem binnen het element ten minste één keuzerondje op (bijvoorbeeld <input type="radio"> of role="radio").

Voorbeeld

<!-- Incorrect -->
<div role="radiogroup">
<p>Select a delivery method:</p>
</div>   

<!-- Correct -->
<div role="radiogroup" aria-label="Select a delivery method">
<label><input type="radio" name="delivery" value="standard"> Standard </label><br>
<label><input type="radio" name="delivery" value="express"> Express </label><br>
<label><input type="radio" name="delivery" value="overnight"> Overnight</label>
</div>

Onjuiste ARIA-groepering voor de rol “checkbox” oplossen

Correct gebruik van ARIA-rollen helpt schermlezers de structuur van de pagina te begrijpen, waardoor gebruikers met een beperking de inhoud gemakkelijker kunnen navigeren en ermee kunnen werken.

1. Zoek in de HTML-code <input type="checkbox"> of een element met role="checkbox".

2. Plaats de selectievakjes in een container en wijs daaraan role="group" toe.

3. Voeg een aria-labelledby- of aria-label-attribuut toe aan het element met role="checkbox" om het doel van de groep selectievakjes te beschrijven.

Voorbeeld

<!-- Incorrect -->
<div><label><input type="checkbox" id="news"> Newsletter</label><br>
<label><input type="checkbox" id="updates"> Product Updates</label><br>
<label><input type="checkbox" id="offers"> Special Offers</label>
</div> 

<!-- Correct -->
<div role="group" aria-labelledby="emailPref">
<p id="emailPrefsLabel">Which types of emails would you like to receive?</p>
<label><input type="checkbox" id="news"> Newsletter</label><br>
<label><input type="checkbox" id="updates"> Product Updates</label><br>
<label><input type="checkbox" id="offers"> Special Offers</label>
</div>

Onjuiste ARIA-groepering voor de rol “radio” oplossen

Correct gebruik van ARIA-rollen helpt schermlezers de structuur van de pagina te begrijpen, waardoor gebruikers met een beperking de inhoud gemakkelijker kunnen navigeren en ermee kunnen werken.

1. Zoek in de HTML-code <input type="radio"> of een element met role="radio".

2. Groepeer de keuzerondjes binnen het element met role="radiogroup".

3. Voeg een aria-labelledby- of aria-label-attribuut toe aan het element om het doel van de groep keuzerondjes te beschrijven.

Voorbeeld

<!-- Incorrect -->
<label><input type="radio" name="contact"> Email</label><br>
<label><input type="radio" name="contact"> Phone</label><br>
<label><input type="radio" name="contact"> Text Message</label>
</div>   

<!-- Correct -->
<div role="radiogroup" aria-labelledby="contactMethod">
<p id="contactMethodLabel">How would you like us to contact you?</p>
<label><input type="radio" name="contact"> Email</label><br>
<label><input type="radio" name="contact"> Phone</label><br>
<label><input type="radio" name="contact"> Text Message</label>
</div>  

Ontbrekend aria-level bij de rol “heading” oplossen

ARIA-koprollen moeten voor de duidelijkheid een gedefinieerd kopniveau hebben.

1. Zoek in de HTML-code het element met het attribuut role="heading".

2. Voeg na het role-attribuut het aria-level-attribuut toe met een waarde van 1 tot en met 6 (bijvoorbeeld aria-level="2").

Voorbeeld

<!-- Incorrect -->
<div role="heading">Subsection Title</div> 

<!-- Correct -->
<div role="heading" aria-level="2">Subsection Title</div>

Ontbrekende tabelkoppen oplossen

Tabelkoppen helpen schermlezers te begrijpen wat elke kolom of rij betekent. Als een tabel geen koppen heeft, kunnen ondersteunende technologieën gebruikers niet de juiste context bieden.

1. Zoek in uw HTML-code het <table>-element en bepaal de eerste rij. Deze rij moet de koppen van de tabel definiëren (bijvoorbeeld “Naam”, “Leeftijd” enzovoort).

2. Als de eerste rij <td>-elementen (tabelgegevens) gebruikt, wijzigt u elk <td>-element in een <th>-element (tabelkop) om aan te geven dat deze cellen koppen zijn.

3. Voeg scope="col" toe aan elk <th>-element als het een kolomkop is, of scope="row" als het een rijkop is.

Voorbeeld

<!-- Incorrect -->
<table>
<tr>
<td>Name</td>
<td>Age</td>
</tr>
<tr>
<td>Ava</td>
<td>25</td>
</tr>
</table>

<!-- Correct -->
<table>
<tr>
<th scope="col">Name</th>
<th scope="col">Age</th>
</tr>  
<tr>
<td>Ava</td>
<td>25</td>
</tr>
</table>

<!-- Incorrect -->
<ul>
<li><strong>Name:</strong> Ava</li>
<li><strong>Age:</strong> 25</li>
</ul>  

<!-- Correct -->
<table>
<tr>
<th scope="col">Name</th>
<th scope="col">Age</th>
</tr>
<tr>
<td>Ava</td>
<td>25</td>
</tr>
</table> 

Onjuiste lijststructuur oplossen

<!-- Incorrect -->
<li>First item</li>
<li>Second item</li>  

<!-- Correct -->
<ul>
<li>First item</li>
<li>Second item</li>
</ul>

<!-- Incorrect -->
<dt>HTML</dt>
<dd>A markup language</dd>

<!-- Correct -->
<dl>
<dt>HTML</dt>
<dd>A markup language</dd>
</dl>

<!-- Incorrect --> <fieldset><label for="name">Name:</label><input id="name" type="text"></fieldset>

<!-- Correct --> <fieldset><legend>Personal Information</legend><label for="name">Name:</label><input id="name" type="text"></fieldset>
 

<meta name="apple-mobile-web-app-orientation" content="any">

Problemen met de oriëntatie van de meta viewport oplossen

Viewportinstellingen die de schermoriëntatie vergrendelen of zoomen uitschakelen, kunnen het voor gebruikers moeilijker maken om inhoud te lezen en ermee te werken. Door zowel de staande als de liggende weergave en zoomen toe te staan, hebben gebruikers flexibiliteit op basis van hun apparaat en persoonlijke behoeften.

1. Zoek in uw HTML-code de meta name="viewport"-tag.
2. Verwijder alle attributen die verband houden met oriëntatiebeperkingen, zoals orientation=portrait of orientation=landscape.
3. Verwijder alle attributen die zoomen verhinderen, zoals maximum-scale=1 of user-scalable=no.
4. Sla uw wijzigingen op en laad de pagina opnieuw.

Voorbeeld

<!-- Incorrect --> 
<meta name="viewport" content="width=device-width, maximum-scale=1, orientation=portrait"> 

<!-- Correct--> 
<meta name="viewport" content="width=device-width">

Problemen met CSS-oriëntatie oplossen

CSS-mediaqueries die inhoud vergrendelen op staande of liggende weergave, kunnen beperken hoe gebruikers met een pagina werken. Door deze beperkingen te verwijderen, kan de inhoud zich in beide oriëntaties aanpassen.

1. Zoek in uw CSS-code mediaqueries die de oriëntatie beperken, zoals:
   • @media screen and (orientation: portrait){ … }
   • @media screen and (orientation: landscape) { … }
2. Verwijder deze oriëntatiespecifieke mediaqueries zodat de inhoud zich vrij kan aanpassen aan beide oriëntaties.
3. Sla uw wijzigingen op en laad de pagina opnieuw.

Voorbeeld:

<!-- Incorrect --> 
@media screen and (orientation: portrait) { 
.container { 
width: 400px; 
 } 
}

<!-- Correct--> 
.container { 
width: 400px;

 

1.3.5 Doel van invoer identificeren