3.2.1 Pagina-inhoud heeft betekenisvolle volgorde

De pagina-inhoud moet begrijpelijk zijn als opmaakstijlen (CSS) zijn uitgeschakeld en tabellen worden geliniariseerd. Dat is de volgorde waarin een screenreader de pagina voorleest. Als u geen opmaaktabellen gebruikt en de broncode de visuele volgorde van de pagina volgt, voldoet u automatisch aan dit ijkpunt.

Betekenis en volgorde

Informatie kan soms een andere betekenis krijgen als ze in een andere volgorde wordt gepresenteerd. Dit wordt goed geïllustreerd door webAIM in het artikel over toegankelijke tabellen Creating Accessible Tables.

Als pagina-onderdelen met behulp van CSS gepositioneerd zijn, heeft dit een invloed op de volgorde van de pagina onderdelen zoals div's in de broncode. De volgorde in de broncode komt niet altijd overeen met de visuele volgorde. Als opmaaktabellen worden gebruikt komt de volgorde van informatie na liniarisatie niet altijd overeen met de visuele volgorde.

Screenreaders en browsers/apparaten die geen CSS ondersteunen, tonen de pagina-onderdelen (div's en tabelcellen) in de volgorde zoals ze in de broncode voorkomen. Zorg er daarom voor dat informatie onafhankelijk van de visuele opbouw van de pagina begrijpelijk is en dat de verschillende pagina-elementen logisch gegroepeerd zijn in de HTML-code. Let er op dat een blok van informatie niet versnipperd raakt na liniarisatie en dat er geen informatie geplaatst wordt waar deze niet verwacht wordt. Plaats bijvoorbeeld de navigatie niet tussen de titel van een artikel en het artikel zelf. Plaats geen invoervelden na een verzend knop van een formulier. En plaats de footer-div altijd onderaan in de broncode.

Zie ook de ijkpunten over gegevenstabellen en het ijkpunt bruikbaar met het toetsenbord.

Wat zijn opmaaktabellen?

De elementen table, tr en td zijn in principe bedoeld voor de tabulaire uitlijning van gegevens waarbij hoofdingen de inhoud van rijen en kolommen aangeven. Sommige webdesigners gebruiken diezelfde HTML-tags om een (onzichtbaar) raster te maken waarmee ze paginaonderdelen nauwkeurig kunnen positioneren. Zulke tabellen noemen we opmaaktabellen. Het gebruik ervan is toegestaan, maar wordt niet aangemoedigd.

Wat is linearisatie?

Denkt u even alle HTML-tabellen weg. Browsers en hulpprogramma's die geen tabellen kunnen weergeven, plaatsen de inhoud van iedere cel op een nieuwe regel (of lezen ze achtereenvolgens voor). De volgorde van die regels stemt precies overeen met de volgorde van de cellen (th en td) in de broncode van de pagina.

In het kort

  1. De inhoud van de pagina is begrijpelijk, onafhankelijk van de presentatie.
  2. De broncode volgt de visuele structuur van de pagina om een correcte tab - en leesvolgorde te garanderen.
  3. Als u de pagina's wilt optimaliseren voor screenreaders, toetsenbord, spraakherkenning of andere hulpmiddelen kunt u voor de leesvolgorde eventueel afwijken van de visuele structuur.

Zelf testen

Ga na of de inhoud van de pagina zonder CSS en in een lineaire vorm nog begrijpelijk is en op dezelfde manier geïnterpreteerd. Schakel CSS uit en liniariseer de pagina.

Web developer toolbar in Firefox

  • CSS Disable Styles > All styles Linearize Miscellaneous > Linearize page.

Accessibility toolbar in Internet Explorer

  • CSS in- / uitschakelen Structuur > liniariseer

Ga na of de verschillende navigatieniveaus en andere pagina-elementen elkaar logisch opvolgen in de HTML-code. Controleer of de inhoud en volgorde de visuele structuur van de pagina volgt en samenhangend is.

  • Ja; dan is aan dit ijkpunt voldaan.
  • Nee; pas uw website aan.