Dialogbeschriftungen

Silktide prüft, ob Dialoge – Pop-up-Fenster, die sich über der Seite öffnen – einen Namen angeben, der von vorgelesen werden kann, damit Menschen wissen, was sich soeben geöffnet hat.

Ein Dialog wird in ausgezeichnet, indem einem Element die -Rolle dialog gegeben wird. Die Rolle teilt Hilfstechnologien mit, dass ein separates Fenster erschienen ist; für sich genommen sagt sie jedoch nicht, wofür dieses Fenster ist.

<!-- Problem: ein Dialog ohne zugänglichen Namen -->
<div role="dialog">
  <p>Ihre Sitzung läuft in Kürze ab.</p>
</div>

Warum das wichtig ist

Wenn sich ein Dialog öffnet, kündigt ihn ein an und verschiebt den Fokus des Besuchers in ihn. Hat der Dialog einen Namen, hört die Person etwas wie „Sitzung läuft ab, Dialog“ und versteht die Unterbrechung sofort. Ohne Namen hören sie nur „Dialog“ – sie wurden ohne Erklärung aus ihrer Tätigkeit herausgerissen und müssen den Inhalt erkunden, um herauszufinden, warum.

So beheben Sie das

Geben Sie jedem Dialog einen , auf eine der folgenden Arten:

aria-labelledby, das auf die id des sichtbaren Titels des Dialogs verweist – die beste Option, weil sehende Besucher denselben Namen sehen:

<!-- Behoben: Der Dialog wird durch seine Überschrift benannt -->
<div role="dialog" aria-labelledby="timeout-title">
  <h2 id="timeout-title">Sitzung läuft ab</h2>
  <p>Ihre Sitzung läuft in Kürze ab.</p>
</div>

aria-label mit dem Namen als Text, wenn der Dialog keinen sichtbaren Titel hat:

<div role="dialog" aria-label="Sitzung läuft ab">
  ...
</div>

So prüft Silktide dies

Auf jeder Seite alle Elemente finden, deren role „dialog“ ist.
Den zugänglichen Namen jedes Dialogs aus Attributen wie aria-label und aria-labelledby ermitteln.
Jeden Dialog melden, dessen zugänglicher Name fehlt oder leer ist.

Fehlerbehebung

Mein Dialog erscheint erst nach einer Benutzerinteraktion

Silktide untersucht jede Seite beim Laden. Ein Dialog, der erst später zur Seite hinzugefügt wird – zum Beispiel nach dem Klicken auf eine Schaltfläche – wird eventuell nicht geprüft; er benötigt aber dennoch eine Beschriftung für Besucher, die ihn erreichen.

Ich verwende das native dialog-Element

Diese Prüfung betrachtet Elemente, die role="dialog" ausdrücklich angeben. Ein natives <dialog>-Element ohne diese Rolle wird nicht geprüft; die Empfehlung gilt dennoch: Geben Sie ihm mit aria-labelledby oder aria-label einen zugänglichen Namen.