aria-hidden="true" moet niet aanwezig zijn op de <body>
Laatste wijziging:
Hoe het aria-hidden body probleem op te lossen?
Verwijder aria-hidden="true" van het <body> element:
verbergt alle pagina-inhoud voor schermlezers
<body aria-hidden="true">
<main>Pagina-inhoud hier</main>
</body>
<body>
<main>Pagina-inhoud hier</main>
</body>
Als je achtergrondinhoud wilt verbergen wanneer een modal open is, pas aria-hidden toe op specifieke containers — nooit op <body>:
verberg achtergrondinhoud voor een modal, niet de body
<body>
<main aria-hidden="true">Achtergrondinhoud</main>
<div role="dialog" aria-modal="true" aria-labelledby="dialog-titel">
<h2 id="dialog-titel">Dialoogtitel</h2>
<p>Dialooginhoud</p>
</div>
</body>
Waarom is dit belangrijk?
aria-hidden="true" instrueert assistieve technologie om een element en al zijn kinderen volledig over te slaan. Wanneer dit wordt toegepast op <body>, wordt alle inhoud van de pagina onzichtbaar voor gebruikers van schermlezers — zij ervaren een volledig lege pagina.
Deze fout treedt vaak op wanneer JavaScript aria-hidden op de verkeerde container zet. Richt je altijd op de specifieke elementen die verborgen moeten zijn, niet op root-containers.
Meer info:
Gratis Website Accessibility Audit