Dialogetiketter

Silktide kontrollerer at dialoger – popup-vinduer som vises over siden – erklærer et navn som kan leses opp av , slik at folk vet hva som nettopp har blitt åpnet.

En dialog markeres i ved å gi et element -rollen dialog. Rollen forteller hjelpemidler at et separat vindu har blitt vist, men alene sier den ikke hva vinduet er til.

<!-- Problem: en dialog uten tilgjengelig navn -->
<div role="dialog">
  <p>Økten din utløper snart.</p>
</div>

Hvorfor dette er viktig

Når en dialog åpnes, kunngjør en den og flytter den besøkendes fokus inn i den. Hvis dialogen har et navn, hører brukeren noe som «Tidsavbrudd for økt, dialog» og forstår umiddelbart avbrytelsen. Uten et navn hører de bare «dialog» – de har blitt trukket bort fra det de holdt på med uten noen forklaring, og må utforske innholdet for å finne ut hvorfor.

Slik løser du det

Gi hver dialog et ved å bruke ett av følgende:

aria-labelledby som peker på id-en til dialogens synlige tittel – det beste alternativet, fordi seende besøkende ser det samme navnet:

<!-- Løst: dialogen navngis av overskriften -->
<div role="dialog" aria-labelledby="timeout-title">
  <h2 id="timeout-title">Tidsavbrudd for økt</h2>
  <p>Økten din utløper snart.</p>
</div>

aria-label med navnet som tekst når dialogen ikke har noen synlig tittel:

<div role="dialog" aria-label="Tidsavbrudd for økt">
  ...
</div>

Slik tester Silktide dette

Finn hvert element på hver side der role er dialog.
Finn ut det tilgjengelige navnet til hver dialog, basert på attributter som aria-label og aria-labelledby.
Rapporter hver dialog der det tilgjengelige navnet mangler eller er tomt.

Feilsøking

Dialogen min vises først etter brukerinteraksjon

Silktide undersøker hver side når den lastes inn. En dialog som bare legges til på siden senere – for eksempel etter at en knapp er klikket – blir kanskje ikke testet, men den trenger fortsatt en etikett for besøkende som åpner den.

Jeg bruker det innebygde dialogelementet

Denne kontrollen undersøker elementer som eksplisitt erklærer role="dialog". Et innebygd <dialog>-element uten denne rollen testes ikke, men veiledningen gjelder fortsatt: Gi det et tilgjengelig navn med aria-labelledby eller aria-label.