Revision 713: ARIA-Glücksrad – von Dialogen, Definitionen und Datepickern

Wir drehen wieder am ARIA-Glücksrad und sprechen mit Daniela, Paweł und Peter Krautzberger über Rollen und Attribute, die man im Alltag teils nie sieht, teils besser nicht selbst nachbauen sollte. Dabei geht es um abstrakte Rollen, Menü-Patterns, deaktivierte Zustände, Dialoge, Präsentationswerkzeuge und einige ARIA-Fallen, die erst in Kombination mit Screenreadern richtig sichtbar werden. Diesmal müssen wir leider auf unser Runden-Mitglied Marco verzichten.

Shownotes

[00:02:33] ARIA Sectionhead Role Die erste gezogene Rolle ist eine abstrakte ARIA-Rolle. sectionhead ist nicht für Autorinnen und Autoren gedacht, sondern dient innerhalb der ARIA-Ontologie als übergeordnete Rolle für Dinge, die den Kopf eines Bereichs bilden, etwa Headings, Column Header, Row Header oder Tabs. Laut Spezifikation sollen User Agents solche abstrakten Rollen nicht auf Accessibility APIs mappen, was sie für die praktische Arbeit eher zu einem Stolperstein beim Lernen macht. [00:08:04] ARIA Menuitemcheckbox Role menuitemcheckbox passt in Menüs von Web-Apps, die sich an native Anwendungen annähern. Beispiele sind Menüleisten, Quick Settings und das Pattern aus den ARIA Authoring Practices für Menubars, etwa bei einem Texteditor, in dem Einträge wie Bold oder Italic direkt einen aktivierten Zustand haben können.

Paweł erzählt außerdem von QuentinC’s Playroom, einer Plattform für Brett- und Kartenspiele für blinde Menschen, die Web-App-Patterns und ARIA-Rollen kreativ nutzt, um komplexe Spieloberflächen per Tastatur und Screenreader bedienbar zu machen.

[00:13:33] ARIA Disabled aria-disabled kam schon in Revision 707 vor, wir beleuchten es aber noch einmal im Kontext bestimmter UI-Komponenten. Daniela bringt nämlich zwei Beispiele mit: einen Button mit Loading-, Success- und Fail-State sowie einen selbstgebauten Date Picker, in dem einzelne Tage nicht verfügbar sind.

Beim Date Picker stellt sich die Frage, ob nicht verfügbare Tage weiterhin per Pfeiltasten erreichbar sein sollten. Paweł plädiert dafür, sie im Grid sichtbar und erreichbar zu lassen, damit Screenreader-Nutzende die Struktur des Kalenders verstehen und nicht durch übersprungene Tage irritiert werden. Idealerweise sollte zusätzlich der Grund kommuniziert werden, etwa dass ein Datum nicht verfügbar oder bereits gebucht ist. Als Bezug dient das Date Picker Dialog Beispiel der ARIA Authoring Practices.

[00:18:58] ARIA Radio Role Die radio-Rolle macht im Grunde das, was man erwartet, sollte aber möglichst nicht selbst nachgebaut werden, solange native Radio-Inputs funktionieren. Das Gespräch dreht sich schnell um Radio-Groups, die abhängig von der Auswahl weitere Formularfelder einblenden.

Paweł beschreibt ein Pattern, bei dem neue Felder im DOM direkt zwischen Radio-Optionen eingefügt werden. Bei kurzen Formularen kann das noch verständlich sein, bei längeren Abschnitten verliert ma