Neues in ARIA 1.1 #6 – Dialogfenster für Screenreader als modal kennzeichnen

Startseite 2bweb.de der Hintergrund ist ausgegraut, ein Modalfenster ist im Vordergrund

Im letzten Monat wurde ARIA 1.1 zusammen mit zahlreichen weiteren Vorgaben zur Barrierefreiheit als neuer Webstandard des W3C veröffentlicht. Eines der neuen Attribute, die damit eingeführt werden, ist aria-modal. Einen ausführlichen Artikel zum Einsatz dieses Attributs habe ich heute drüben bei den Webkrauts veröffentlicht.

Das aria-modal-Attribut wurde mit ARIA 1.1 eingeführt, um Elemente mit den Rollen „dialog“ und „alertdialog“ zu kennzeichnen. Das Attribut kann die Werte „true“ oder „false“ annehmen. Browser und Hilfsmittel wie Screenreader sollen bei dem Wert „true“ die Information erhalten, dass die im Dialogfenster enthaltenen Inhalte vordergründig sind und die sonstigen Inhalte einer Webseite ignoriert werden sollen.

Wenn ein Dialogfenster wie folgt ausgezeichnet wird:

<body>
<div id="opacity" style="z-index:1;"></div>
<div role="dialog" aria-modal="true;" aria-label=" Beschriftung des Modalfensters" style="z-index:2;"> Inhalte des Modalfensters </div>
<div id="inhalt">Inhalte der Seite</div>
</body>

So stellt das erste DIV-Element die visuelle Überlagerung der Seiteninhalte. Das zweite DIV-Element ist zunächst mit dem role-Attribut als Dialogfenster identifiziert; mit dem aria-modal-Attribut sollen Browser die eigentlichen Seiteninhalte nicht an den Accessibility-Tree übertragen. Damit sollen auch Screenreader nicht mit den abgedunkelten Inhalten interagieren können.

Wenn das Dialogfenster ein aria-modal=“false“ hat oder wenn der Wert nicht definiert ist, dann übertragen Browser auch die Hintergrundinformationen an den Accessibility-Tree. In dem Fall wird die gesamte Webseite im Screenreader verarbeitet und das Modalfenster wird möglicherweise nicht mehr gefunden.

Die Barrierefreiheit von Modalfenstern betrifft verschiedene Themen, die ich in dem oben verlinkten Artikel diskutiere. In dem Artikel verweise ich auch auf einige weitere Ressourcen. Faktisch berücksichtigen die meisten Frameworks nur bestimmte Aspekte der Barrierefreiheit. Speziell das Ausblenden der Hintergrundinformationen wird oft nicht berücksichtigt.

Damit sich Screenreadernutzer nicht in den Hintergrundinformationen verirren, sollte zukünftig ein modal gestaltetes Dialogfenster ein aria-modal=“true“ erhalten.

Dieser Beitrag ist Teil einer mehrteiligen Serie zu Aria 1.1:

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.