1.3.2 – Betekenisvolle volgorde

SC 1.3.2: Wat houdt het in?

Succescriterium 1.3.2, een onderdeel van de Web Content Accessibility Guidelines (WCAG), staat voor “Meaningful Sequence” en vereist dat de inhoud van een webpagina in een betekenisvolle volgorde wordt gelezen door hulpsoftware. Dit betekent dat de volgorde waarin de inhoud in de broncode staat logisch en begrijpelijk moet zijn voor gebruikers van schermlezers en andere hulpmiddelen. De visuele volgorde van de inhoud mag verschillen van de volgorde waarin deze is gecodeerd in de HTML.

Waarom is SC 1.3.2 belangrijk?

SC 1.3.2 is belangrijk omdat een logische en betekenisvolle volgorde van de inhoud essentieel is voor mensen die afhankelijk zijn van schermlezers of andere hulpsoftware. Wanneer de inhoud in een verwarrende of onlogische volgorde wordt gepresenteerd, kan dit leiden tot verwarring en frustratie voor gebruikers.

Hoe test je SC 1.3.2?

Om te testen of de inhoud van een webpagina voldoet aan SC 1.3.2, kun je de volgende stappen volgen:

• Gebruik een schermlezer: Test de pagina met een schermlezer zoals NVDA (NonVisual Desktop Access) voor Windows of VoiceOver voor macOS. Luister naar de volgorde waarin de inhoud wordt voorgelezen en controleer of deze logisch is.
• Controleer de broncode: Bekijk de HTML-broncode van de pagina en controleer de volgorde van de elementen. Zorg ervoor dat de volgorde van de elementen in de code overeenkomt met de visuele volgorde op de pagina.

Voorbeelden van fouten onder WCAG SC 1.3.2:

1. Nieuwsberichten of events op overzichtspagina’s: In deze berichten staan de datums of informatieve afbeeldingen boven de kop van een nieuwsbericht. Wanneer ze van boven naar beneden worden voorgelezen, is het niet meer duidelijk bij welk bericht de datum of afbeelding hoort. Om dit te herstellen, moet alles wat bij een kop hoort onder de kop staan.
2. Verkeerde plaatsing van elementen: Een tooltip opent een instructie die in de HTML ergens anders staat en wordt pas veel later voorgelezen. In tab-functionaliteit worden eerst de tabkoppen voorgelezen en dan de tabinhoud. Soms wordt nieuwe content aan de pagina toegevoegd wanneer de bezoeker op een knop of een link drukt. Deze nieuwe content moet ook op de juiste plek in de DOM worden toegevoegd.
3. Gebruik van <div> of <span> in plaats van <table> in tabellen: Dit komt soms voor in tabellen waarin de openingstijden staan. De verkeerde leesvolgorde kan zijn: eerst de dagen van de week, dan de openingstijden.
4. Content is verborgen voor hulpsoftware met display
   of visibility:hidden: Hierdoor kan de leesvolgorde van andere content onlogisch worden.
5. Lightbox of pop-up: Wanneer een lightbox of een pop-up wordt geopend en de schermlezer de content van de onderliggende pagina blijft voorlezen in plaats van naar de lightbox te gaan, valt dit ook onder de onjuiste leesvolgorde. Dit valt ook onder de onjuiste focusvolgorde (succescriterium 2.4.3).
6. PDF-documenten: De tags kunnen in de codelaag in een andere volgorde staan dan wat in het document te zien is. Dit gaat ook vaak fout in de voetnoten.

Hoe los je het op?

Om problemen met SC 1.3.2 op te lossen, kun je de volgende stappen ondernemen:

1. Herstructureer de HTML: Zorg ervoor dat de HTML-code een logische en betekenisvolle volgorde volgt. Plaats inhoudselementen in de juiste volgorde.

<article>
  <h2>Titel bericht</h2>
  <p>01-01-2024</p>
  <img src="#" alt="betekenisvolle tekstalternatief">
  <p>tekst bericht</p>
</article>

Dit mag ook omdat de afbeelding verborgen is voor de schermlezer met een leeg alt-attribuut.

<article>
  <img src="#" alt="">
  <h2>Titel bericht</h2>
  <p>01-01-2024</p>
  <p>tekst bericht</p>
</article>

2. Controleer en test regelmatig: Test je pagina regelmatig met schermlezers en toetsenbordnavigatie om ervoor te zorgen dat de volgorde van de inhoud logisch en begrijpelijk is. Verander de plek in de DOM waar nieuwe content wordt geïnjecteerd wanneer de leesvolgorde niet klopt.

Update 8 aug 2024

Vandaag was ik bezig met het verbeteren van mijn SEO met de onlangs aangeschafte Yoast SEO plugin. Een van de rode stippen had betrekking op de afbeeldingen. Het werd aangeraden om afbeeldingen aan de pagina toe te voegen met de focus key phrase in de alt-tekst. Als je dit doet bij de uitgelichte afbeelding, creëer je een ontoegankelijke situatie.

Het probleem is dat je in WordPress de alt-teksten alleen in de mediatheek kunt toevoegen. Als webredacteur kun je niet per pagina kiezen of je wel of geen alt-tekst wilt.

Op de pagina zelf is dat geen probleem. Echter, op de pagina waar je een overzicht hebt van je berichten, wordt het een probleem onder succescriterium 1.3.2. Zoals je hierboven hebt gelezen, mag er geen content boven de kop staan.

As je alt-tekst aan de afbeelding toevoegt, krijg je informatieve content boven de kop.

De enige snelle oplossing was het verwijderen van de alt-tekst. Hiermee herstel ik de logische leesvolgorde op de blog pagina en verlies is punten bij Yoast SEO.

Goede bronnen over WCAG SC 1.3.2

• Deque University
• Mozilla Developer Network (MDN) Web Docs
• W3C Web Accessibility Initiative (WAI)

Disclaimer

Er zijn situaties en uitzonderingen die minder vaak voorkomen en niet in dit artikel zijn beschreven. Het is raadzaam om een expert in te schakelen om deze bijzondere situaties te bekijken en te evalueren. Toegankelijkheid is een continu proces en vereist regelmatige controle en updates om te voldoen aan de WCAG-richtlijnen.