Dialooglabels

Silktide controleert of dialogen - pop-upvensters die over de pagina verschijnen - een naam hebben die kan worden voorgelezen door , zodat mensen weten wat er zojuist is geopend.

Een dialoog wordt in gemarkeerd door een element de -rol dialog te geven. Deze rol vertelt ondersteunende technologie dat er een afzonderlijk venster is verschenen, maar zegt op zichzelf niet waarvoor het venster dient.

<!-- Probleem: een dialoog zonder toegankelijke naam -->
<div role="dialog">
  <p>Uw sessie staat op het punt te verlopen.</p>
</div>

Waarom dit belangrijk is

Wanneer een dialoog wordt geopend, kondigt een deze aan en verplaatst de focus van de bezoeker naar de dialoog. Als de dialoog een naam heeft, hoort de luisteraar iets als "Sessie verlopen, dialoog" en begrijpt die onmiddellijk de onderbreking. Zonder naam horen zij alleen "dialoog" - ze zijn weggehaald van waar ze mee bezig waren zonder uitleg en moeten de inhoud verkennen om te begrijpen waarom.

Hoe u dit oplost

Geef elke dialoog een , met een van de volgende opties:

aria-labelledby dat verwijst naar de id van de zichtbare titel van de dialoog - de beste optie, omdat ziende bezoekers dezelfde naam zien:

<!-- Opgelost: de dialoog krijgt zijn naam van de kop -->
<div role="dialog" aria-labelledby="timeout-title">
  <h2 id="timeout-title">Sessie verlopen</h2>
  <p>Uw sessie staat op het punt te verlopen.</p>
</div>

aria-label met de naam als tekst, wanneer de dialoog geen zichtbare titel heeft:

<div role="dialog" aria-label="Sessie verlopen">
  ...
</div>

Hoe Silktide dit test

Zoek op elke pagina elk element waarvan de role dialog is.
Bepaal de toegankelijke naam van elke dialoog aan de hand van attributen zoals aria-label en aria-labelledby.
Rapporteer elke dialoog waarvan de toegankelijke naam ontbreekt of leeg is.

Problemen oplossen

Mijn dialoog verschijnt pas na interactie van de gebruiker

Silktide onderzoekt elke pagina terwijl deze wordt geladen. Een dialoog die pas later aan de pagina wordt toegevoegd - bijvoorbeeld nadat u op een knop hebt geklikt - wordt mogelijk niet getest, maar heeft nog steeds een label nodig voor bezoekers die deze bereiken.

Ik gebruik het native dialog-element

Deze controle onderzoekt elementen die expliciet role="dialog" aangeven. Een native <dialog>-element zonder die rol wordt niet getest, maar de richtlijnen zijn nog steeds van toepassing: geef het een toegankelijke naam met aria-labelledby of aria-label.