ARIA: dialog Rolle

Ein Dialog ist ein untergeordnetes Fenster des Hauptfensters einer Webanwendung. Für HTML-Seiten ist das Hauptanwendungsfenster das gesamte Webdokument, d.h. das body-Element.

Die Kennzeichnung eines Dialogelements mit der dialog Rolle hilft unterstützenden Technologien, den Inhalt des Dialogs als gruppiert und vom restlichen Seiteninhalt getrennt zu identifizieren. Allerdings reicht es nicht aus, nur role="dialog" hinzuzufügen, um einen Dialog barrierefrei zu machen. Zusätzlich müssen folgende Dinge erledigt werden:

• Der Dialog muss korrekt beschriftet sein
• Die Tastaturfokussierung muss korrekt verwaltet werden

Die folgenden Abschnitte beschreiben, wie diese beiden Anforderungen erfüllt werden können.

Auch wenn es nicht erforderlich ist, dass der Dialog selbst den Fokus erhalten kann, muss er dennoch beschriftet werden. Die dem Dialog gegebene Beschriftung liefert kontextuelle Informationen für die interaktiven Steuerelemente im Dialog. Mit anderen Worten, die Beschriftung des Dialogs fungiert als Gruppierungsbeschriftung für die darin enthaltenen Steuerelemente (ähnlich wie ein <legend>-Element eine Gruppierungsbeschriftung für die Steuerelemente innerhalb eines <fieldset>-Elements bereitstellt).

Wenn ein Dialog bereits eine sichtbare Titelleiste hat, kann der Text in dieser Leiste verwendet werden, um den Dialog selbst zu beschriften. Der beste Weg, dies zu erreichen, ist die Verwendung des aria-labelledby Attributs für das role="dialog" Element. Zusätzlich, wenn der Dialog zusätzlichen beschreibenden Text neben dem Dialogtitel enthält, kann dieser Text mit dem aria-describedby Attribut mit dem Dialog verbunden werden. Dieser Ansatz wird im folgenden Code-Beispiel gezeigt:

<div
  role="dialog"
  aria-labelledby="dialog1Title"
  aria-describedby="dialog1Desc">
  <h2 id="dialog1Title">Your personal details were successfully updated</h2>
  <p id="dialog1Desc">
    You can change your details at any time in the user account section.
  </p>
  <button>Close</button>
</div>

Fokusmanagement

Ein Dialog hat bestimmte Anforderungen daran, wie der Tastaturfokus verwaltet werden sollte:

• Dialoge sollten immer mindestens ein fokussierbares Steuerelement haben. Bei vielen Dialogen wird es einen Button wie „Schließen“, „OK“ oder „Abbrechen“ geben. Neben dem benötigten Steuerelement können Dialoge beliebig viele fokussierbare Elemente enthalten, sogar ganze Formulare oder andere Container-Widgets wie Tabs.
• Wenn der Dialog auf dem Bildschirm erscheint, sollte der Tastaturfokus (dessen Steuerung vom Zweck des Dialogs abhängt) auf das standardmäßig fokussierbare Steuerelement im Dialog verschoben werden. Bei Dialogen, die nur eine einfache Nachricht bieten, könnte es ein „OK“-Button sein. Bei Dialogen mit Formularen könnte es das erste Feld im Formular sein.
• Nachdem der Dialog geschlossen wird, sollte der Tastaturfokus dorthin zurückkehren, wo er war, bevor er in den Dialog verschoben wurde. Andernfalls kann der Fokus an den Anfang der Seite fallen.
• Bei den meisten Dialogen wird erwartet, dass die Tab-Reihenfolge des Dialogs umwickelt, was bedeutet, dass, wenn der Benutzer die fokussierbaren Elemente im Dialog durchgeht, das erste fokussierbare Element fokussiert wird, nachdem das letzte erreicht wurde. Mit anderen Worten, die Tab-Reihenfolge sollte innerhalb und durch den Dialog begrenzt sein.
• Wenn der Dialog verschoben oder in der Größe verändert werden kann, stellen Sie sicher, dass diese Aktionen sowohl von Tastaturbenutzern als auch von Mausbenutzern ausgeführt werden können. Ebenso müssen, wenn ein Dialog spezielle Funktionen wie Symbolleisten oder Kontextmenüs bietet, diese ebenfalls für Tastaturbenutzer erreichbar und bedienbar sein.
• Dialoge können modal oder nicht-modal sein. Wenn ein modaler Dialog auf dem Bildschirm erscheint, ist es nicht möglich, mit Inhalten außerhalb des Dialogs zu interagieren. Mit anderen Worten, die Hauptbenutzeroberfläche der Anwendung oder der Seiteninhalt wird als vorübergehend deaktiviert betrachtet, solange der modale Dialog angezeigt wird. Bei nicht-modalen Dialogen ist es weiterhin möglich, mit Inhalten außerhalb des Dialogs zu interagieren, während der Dialog angezeigt wird. Beachten Sie, dass es für nicht-modale Dialoge eine globale Tastenkombination geben muss, die es ermöglicht, den Fokus zwischen geöffneten Dialogen und der Hauptseite zu verschieben.

aria-labelledby

Verwenden Sie dieses Attribut, um den Dialog zu beschriften. Oft wird der Wert des aria-labelledby Attributs die ID des Elements sein, das den Dialog betitelt.

aria-describedby

Verwenden Sie dieses Attribut, um den Inhalt des Dialogs zu beschreiben.

Wenn die dialog Rolle verwendet wird, sollte der Benutzeragent Folgendes tun:

• Das Element als Dialog in der Barrierefreiheitsschnittstelle des Betriebssystems offenlegen.

Wenn der Dialog korrekt beschriftet ist und der Fokus auf ein Element (oft ein interaktives Element, wie ein Button) im Dialog verschoben wird, sollten Screenreader die zugängliche Rolle des Dialogs, den Namen und optional die Beschreibung ankündigen, zusammen mit dem ankündigen des fokussierten Elements.

<div
  role="dialog"
  aria-labelledby="dialog1Title"
  aria-describedby="dialog1Desc">
  <h2 id="dialog1Title">Subscription Form</h2>
  <p id="dialog1Desc">We will not share this information with third parties.</p>
  <form>
    <p>
      <label for="firstName">First Name</label>
      <input id="firstName" type="text" />
    </p>
    <p>
      <label for="lastName">Last Name</label>
      <input id="lastName" type="text" />
    </p>
    <p>
      <label for="interests">Interests</label>
      <textarea id="interests"></textarea>
    </p>
    <p>
      <input type="checkbox" id="autoLogin" name="autoLogin" />
      <label for="autoLogin">Auto-login?</label>
    </p>
    <p>
      <input type="submit" value="Save Information" />
    </p>
  </form>
</div>

Funktionierende Beispiele

• jQuery-UI Dialog

• ARIA: alertdialog Rolle
• Das HTML <dialog> Element