aria-hidden (Zustand)

Spezifikation

Die WAI definiert das Attribut folgendermaßen:

„Kennzeichnet, ob das Element für eine Barrierefreiheits-API freigegeben ist.
Vergleiche aria-disabled. “

(Übersetzung durch Zweiter Blick)

Für relevante Inhalte, die verborgen werden, müssen identische oder äquivalente Inhalte für Bedeutung oder Funktionalität bereitgestellt werden.

Elemente und Rollen

Das Attribut aria-hidden ist in allen ARIA-Rollen beziehungsweise HTML-Elementen zulässig.

Verwendung

In der Regel sollten Inhalte für alle Menschen und deren Nutzungsprogramme gleichermaßen verfügbar sein. Ein Element für einen Screen Reader zu verbergen, sollte nur in gut begründeten Ausnahmefällen erfolgen.

Das Attribut darf nur eigesetzt werden, wenn das Verbergen die Nutzungserfahrung mit assistierenden Technologien verbessert. Dies kann durch Entfernen von redundantem oder belanglosem Inhalt der Fall sein.

Kriterien zum Einsatz von aria-hidden

Folgende Überlegungen sollten vor dem Einsatz getroffen werden:

• Ist das Element rein dekorativ?
• Verfügt das Element über textuelle Alternativen, die Inhalte und Funktionalitäten adäquat an den Screen Reader ausgeben? Nur redundante Angaben sollten möglicherweise ausgeblendet werden.
• Verfügt das Element über Inhalte, die von einem Screen Reader in irritierender oder befremdlicher Weise ausgegeben würden? (Bilder aus Zeichen (ASCII-Art)) Eine Erläuterung zum Ausblenden des irritierenden Inhalts sollte in diesem Fall erfolgen.

Vermeidung von Redundanzen

Wird eine Information beispielsweise bereits durch technische Maßnahmen von einem Screen Reader dargestellt, kann ein visueller Indikator mit gleichwertiger Information verborgen werden. Auf diese Weise werden Redundanzen und Wortreichtum vermieden.

Dynamische Inhalte

Gelegentlich wird dieses Attribut auf Bereichen eingesetzt, die erst durch Scripts eingeblendet werden sollen. Es sollte dabei jedoch überlegt werden, ob dynamische Inhalte für assistierende Technologien nicht besser als Live Region eingebettet werden.

Verwirrungen vermeiden

Der Einsatz kann zu Verwirrungen führen, wenn sehende mit blinden Personen gemeinsam eine Webseite erarbeiten. Er kann auch Menschen mit Sehbehinderung irritieren, wenn sich Inhalte am Bildschirm zwar vergrößert darstellen lassen, die Sprachausgabe jedoch keine entsprechenden Inhalte vorliest.

Die Überlegung, visuelle Elemente, wie Landkarten, oder ähnliche Bereiche, die für blinde Menschen mutmaßlich nicht relevant sind und über eine textuelle Alternative verfügen, einfach für den Screen Reader zu verstecken, ist bestechend. Bei der linearen Wahrnehmung von Webinhalten ist man ohnedies froh, wenn die Elemente auf das Wesentliche reduziert sind. Allerdings wird mit aria-hidden das ganze Vorhandensein eines Elements oder Bereichs für den Screen Reader verborgen. Eine blinde Person könnte eine sehende Assistenzperson etwa andernfalls darauf hinweisen, dass sich auf der Webseite ein Lageplan befindet.

Auch bei der Bedienung mittels Spracheingabe kann es zu Problemen kommen, wenn der auf dem Bildschirm sichtbare Text eines Schalters nicht dem Text entspricht, mit dem der Schalter ausgelöst werden kann. Dies kann passieren, wenn etwa die Grafik mit dem Schriftzug Jetzt verborgen wird und der Schalter nur durch Bestellen ausgelöst wird. (Erfolgskriterium 2.5.3 Beschriftung im Namen)

Technische Realisierung

Das Attribut wird im Element ergänzt, das samt seiner Kindelemente für assistierende Technologien verborgen werden soll. Dies kann etwa folgendermaßen aussehen:

<div
  aria-hidden="true">
    [Inhalte]
</div>

Beispiel: Visueller Indikator mit gleichwertiger Information

In Formularen werden Pflichtfelder typischerweise durch einen Asterisk (*) gekennzeichnet. Gleichzeitig sollte die Komponente mit dem Attribut required auch technisch als Pflichtfeld gekennzeichnet werden. Die technische Kennzeichnung als Pflichtfeld wird von einem Screen Reader bereits wiedergegeben. Der visuelle Indikator kann also ohne Informationsverlust verborgen werden:

<label for id="email">
  <span title="Pflichtfeld"
    aria-hidden="true">
    *
  </span>
  E-Mail Adresse
</label>
<input id="email"
  type="email"
  required>

Verhalten von assistierenden Technologien

JAWS verbirgt in der Standardkonfiguration der Version 2023 das Element mit dem Attribut und dessen Kindelementen.