Ausblenden oder Überschreiben von Rollen

Schauen wir uns an, was passiert, wenn Sie eine Rolle überschreiben. Wenn Sie einer Rolle eine neue ARIA-Rolle zuweisen, ist es nicht mehr das Gleiche. Die ARIA-Rolle ersetzt die alte Rolle im Accessibility-Baum. Wenn Sie mehreren Elementen die Rolle “img” oder “image” zugewiesen haben, werden diese zu Bildern. Das Aussehen ändert sich aber nicht wirklich. Eine Tabelle sieht immer noch wie eine Tabelle aus, wenn man ihr die Rolle “img” zuweist. Für eine Sprachausgabe wird sie aber als Grafik angesagt. Wenn Sie die Rollen einfach neu zuweisen, ist das schlecht. Manchmal ist es gut, Rollen neu zuzuweisen.

Ein Beispiel ist eine ungeordnete Liste, die man als Registerkartenbereich nutzen kann. Die Liste kann als Umhüllung für die Registerkartenliste dienen. Listenelemente können zu Registerkarten werden. Sie können CSS verwenden, um die Registerkarten zu gestalten. Die Registerkartenliste und die Registerkarten werden von Bildschirmlesegerät-Benutzern nicht angezeigt.

Es gibt noch mehr, was Sie tun müssten, um eine funktionale Registerkartenkomponente zu erstellen. Ich zeige hier nur, wer welche Rolle hat.

Sie fragen sich vielleicht, warum Sie mit einer ungeordneten Liste anfangen sollten, vor allem, weil sie überschrieben wird. Gute Frage. Sie müssen nicht auf diese Weise anfangen. Sie können die gleiche Struktur auch mit Divs oder Absätzen erstellen. Wenn Sie role=“tablist” und role=“tab” zuweisen, sind sie keine Divs oder Absätze mehr, also funktioniert es.

Listen haben eine natürliche hierarchische Struktur. Deshalb verwenden einige Leute gerne Listen für Registerkartenkomponenten. Div-Elemente sind aber auch in Ordnung. Sie können auch mit diesen Hierarchien erstellen.

Unterbindung der Rolle eines Elements

Eine andere Möglichkeit ist eine Listenstruktur für tablist und Schaltflächen oder Links innerhalb der Registerkarten. Die Verknüpfungen werden automatisch mit der Tabulatortaste aktiviert. Sie müssen also keine Tabulatorsteuerung hinzufügen. Sie können aber weiterhin alle anderen Tastaturfunktionen programmieren. Wenn Sie diese Art von Struktur wählen, müssen Sie die Rolle der Listenelemente unterdrücken. Dazu setzen Sie den Wert “role” auf “presentation”. Wenn Sie dem HTML-Element die Rolle “presentation” geben, wird es aus dem Accessibility-Tree entfernt. Das ist so, als würde man dieses Element in ein div- oder span-Tag umwandeln. Man kann immer noch auf den Inhalt zugreifen, aber die Struktur ist nicht mehr wichtig.

Man kann role=“presentation” auch für ein Bild verwenden, das keinen Alternativtext braucht. Es gibt noch andere Möglichkeiten, ein Bild als dekorativ zu markieren. Sie können das Bild auch mit CSS in den Hintergrund stellen oder role=“presentation” dem Bild etwas hinzufügen. role=“presentation” ist eine gültige Technik. Achtung: Zu nicht fokussierbaren Elementen wie Schaltflächen oder Links sollte role=“presentation” nicht zugewiesen werden. role=“presentation” ist eine gültige Technik, aber man muss darauf achten, wie man sie verwendet.