Dialogetiketter

Silktide tjekker, at dialoger – pop op-vinduer, der vises oven på siden – har et navn, som kan læses op af , så personer ved, hvad der netop er åbnet.

En dialog markeres i ved at give et element ARIA-rollen dialog. Rollen fortæller hjælpeteknologi, at der er åbnet et separat vindue, men den fortæller ikke i sig selv, hvad vinduet bruges til.

<!-- Problem: en dialog uden et tilgængeligt navn -->
<div role="dialog">
  <p>Din session er ved at udløbe.</p>
</div>

Hvorfor dette er vigtigt

Når en dialog åbnes, den og flytter den besøgendes fokus ind i den. Hvis dialogen har et navn, hører lytteren noget i retning af "Sessionstimeout, dialog" og forstår straks afbrydelsen. Uden et navn hører de kun "dialog" – de er blevet ført væk fra det, de var i gang med, uden forklaring og må udforske indholdet for at finde ud af hvorfor.

Sådan løser du det

Giv hver dialog et ved at bruge en af følgende:

aria-labelledby, der peger på id'et for dialogens synlige titel – den bedste mulighed, fordi seende besøgende ser det samme navn:

<!-- Løst: dialogen navngives af dens overskrift -->
<div role="dialog" aria-labelledby="timeout-title">
  <h2 id="timeout-title">Sessionstimeout</h2>
  <p>Din session er ved at udløbe.</p>
</div>

aria-label med navnet som tekst, når dialogen ikke har en synlig titel:

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

Sådan tester Silktide dette

Find hvert element på hver side, hvis role er dialog.
Fastslå det tilgængelige navn for hver dialog ud fra attributter som aria-label og aria-labelledby.
Rapportér hver dialog, hvis tilgængelige navn mangler eller er tomt.

Fejlfinding

Min dialog vises kun efter brugerinteraktion

Silktide undersøger hver side, når den indlæses. En dialog, der først tilføjes senere på siden – for eksempel efter et klik på en knap – bliver muligvis ikke testet, men den skal stadig have en etiket for de besøgende, der når frem til den.

Jeg bruger det indbyggede dialogelement

Dette tjek undersøger elementer, der udtrykkeligt angiver role="dialog". Et indbygget <dialog>-element uden den rolle testes ikke, men vejledningen gælder stadig: Giv det et tilgængeligt navn med aria-labelledby eller aria-label.