Barrierefreie Dialoge auf Webseiten

Barrierefreie Webseiten zu gestalten kann eine schwierige Aufgabe sein.
Manchmal ist es aber auch einfacher als man denkt.

Webseiten können modale Dialoge enthalten. Das sind Dialogfenster, welche über den eigentlichen Inhalt gelegt werden und eine Aktion erfordern. Beispiele sind das Abfragen einer Entscheidung ("Wollen Sie wirklich...?") oder ein Dialogfenster zur Eingabe von Benutzerdaten. Diese Dialoge haben spezielle Anforderungen an die Barrierfreiheit, zum Beispiel:

• Beim Öffnen des Dialogs muss der Fokus in den aktuellen Dialog gesetzt werden
• Navigation im Dialog muss mit dem Keyboard (Tab, Shift-Tab) möglich sein
• Andere Bereiche der Webseite sind nicht erreichbar, solange der Dialog geöffnet ist
• Die Escape-Taste schließt den Dialog

Wenn man als Entwickler nun einen barrierefreien Dialog gestalten möchte, landet man schnell bei dem offiziellen Beispiel von den "ARIA Authoring Practices". Eine Warnung zu Beginn der Webseite weist darauf hin, dass man das Beispiel nicht in eine produktive Webseite übernehmen sollte. Aber es stellt sich die Frage: "Woher sollte man ein besseres Beispiel bekommen als von hier, der "Web Accessibility Initiative (WAI)" des W3C, der Organisation, welche die Standards für das Internet macht?"

Das Beispiel auf der Seite, ist zwar aus Sicht der Barrierefreiheit gut, aber aus Entwicklersicht bereitet es mir schon etwas Kopfschmerzen, wenn ich für jede Komponente meiner Website knappe 500 Zeilen Javascript in meine Seite einbauen muss.

Zum Glück gibt es eine ständige Weiterentwicklung der Standards und deren Unterstützung durch Browser. Leider hinken die zu findenden Online-Tutorials hier oft etwas nach. Mittlerweile gibt es das native HTML5 Element "dialog", welches auch schon von knappen 93% der verwendeten Browser unterstützt wird. Und glücklicherweise wurden bei der nativen Implementierung auch schon die wichtigsten Features zur Barrierefreiheit mitgedacht. Ich kann nun also statt dem sehr aufgeblasenen Beispiel von WAI-ARIA mit sehr viel weniger Aufwand ein barrierefreies Grundgerüst eines Dialoges erstellen:

<button onClick="myDialog.showModal()">
    Dialog öffnen
</button>

<dialog id="myDialog">
    <p>Das ist ein Text im Dialog</p>
    <button onClick="myDialog.close()">
        Dialog schließen
    </button>
</dialog>

Ein Button auf einer Webseite um einen Dialog zu öffnen, im Dialog ein Button um ihn wieder zu schließen. Fertig. Ohne zusätzliches Javascript sind die wichtigsten oben genannten Features für Barrierefreiheit erfüllt. Wer das selbst ausprobieren möchte, kann das in diesem Beispiel von selfhtml.org tun.

Mittlerweile finden sich auch vereinzelt Tutorials, welche das HTML5 Element "dialog" bewerben, zum Beispiel in einem Artikel vom Blog "Web Dev Simplified".

Fazit: es ist sinnvoll immer zuerst nach aktuellen Entwicklungen und Standards Ausschau zu halten und nicht gleich den Code vom erstbesten Tutorial zu übernehmen - selbst wenn die Quelle seriös ist.