Dialogetiketter

Silktide kontrollerar att dialoger – popup-fönster som visas ovanpå sidan – anger ett namn som kan läsas upp av , så att människor vet vad som just har öppnats.

En dialog märks upp i genom att ge ett element rollen dialog. Rollen talar om för hjälpmedelstekniken att ett separat fönster har visats, men i sig säger den inte vad fönstret är till för.

<!-- Problem: en dialog utan tillgängligt namn -->
<div role="dialog">
  <p>Din session håller på att löpa ut.</p>
</div>

Varför detta är viktigt

När en dialog öppnas meddelar en det och flyttar besökarens fokus in i dialogen. Om dialogen har ett namn hör lyssnaren något i stil med ”Sessionens tidsgräns, dialog” och förstår genast avbrottet. Utan ett namn hör personen bara ”dialog” – hen har förts bort från det hen höll på med utan någon förklaring och måste utforska innehållet för att förstå varför.

Så åtgärdar du det

Ge varje dialog ett genom att använda ett av följande alternativ:

aria-labelledby som pekar på id-värdet för dialogens synliga rubrik – det bästa alternativet, eftersom seende besökare ser samma namn:

<!-- Åtgärdat: dialogen namnges av sin rubrik -->
<div role="dialog" aria-labelledby="timeout-title">
  <h2 id="timeout-title">Sessionens tidsgräns</h2>
  <p>Din session håller på att löpa ut.</p>
</div>

aria-label med namnet som text, när dialogen saknar en synlig rubrik:

<div role="dialog" aria-label="Sessionens tidsgräns">
  ...
</div>

Så testar Silktide detta

Hitta alla element på varje sida vars role är dialog.
Ta reda på varje dialogs tillgängliga namn utifrån attribut som aria-label och aria-labelledby.
Rapportera varje dialog vars tillgängliga namn saknas eller är tomt.

Felsökning

Min dialog visas först efter en användarinteraktion

Silktide undersöker varje sida när den läses in. En dialog som läggs till på sidan senare – till exempel efter att någon har klickat på en knapp – kanske inte testas, men den behöver fortfarande en etikett för besökare som når den.

Jag använder det inbyggda dialogelementet

Den här kontrollen undersöker element som uttryckligen anger role="dialog". Ett inbyggt <dialog>-element utan den rollen testas inte, men vägledningen gäller fortfarande: ge det ett tillgängligt namn med aria-labelledby eller aria-label.