Barrierefreie Buttons brauchen oft ARIA
veröffentlicht in 2012zuletzt bearbeitet in
Ausklappbare Schaltflächen
Auf manchen Webseiten werden Inhalte versteckt, die über die Aktivierung eines Buttons eingeblendet werden können. Bei den versteckten Inhalten kann es sich um knappe Informationen handeln (z.B. eine Angabe zu einem erwarteten Eingabeformat für ein Eingabefeld) bis hin zu umfangreichen Formularen und anderen Abschnitten einer Webseite. Im letzteren Fall bieten sich alternativ zu einfachen Buttons auch Akkordeons als Design-Pattern an.
Im einfachen Fall werden einzelne Inhalte am Bildschirm verborgen und ein Button bereitgestellt:
Der Zustand des Buttons wird mit ↑ und ↓ visuell vermittelt
Um Nutzer zu verdeutlichen, dass solche Schaltflächen dazu dienen, Inhalte einzublenden, werden meist Glyphen wie ein nach rechts oder nach unten zeigender Pfeil eingesetzt. Wenn die Inhalte eingeblendet sind, wird hingegen ein nach links oder nach oben zeigender Pfeil eingesetzt.
Grundgerüst
Die Pfeile vermitteln eine Information, genauer gesagt: Die Pfeile geben den Zustand der Schaltfläche an (zugeklappt oder ausgeklappt). Solche Zustände müssen dann auch für Screenreader und andere Hilfsmittel zugänglich gemacht werden. Das HTML-Grundgerüst besteht aus einem BUTTON
-Element mit einem aria-expanded
-Attribut:
<button aria-expanded="false">
Warum werden mir nicht alle Optionen zur Buchung angezeigt?
</button>
Wie der Pfeil barrierefrei eingebunden werden soll, hängt von verschiedenen Faktoren ab. Zu beachten sind:
- Hintergrundgrafiken sind für informative Inhalte (z.B. im Windows-Kontrastmodus) nicht barrierefrei und generell zu vermeiden.
- Grafiken können per
IMG
-Element eingebunden werden. Sie benötigen dann einen leeren Alternativtext, damit Screenreader sie nicht erfassen (der Button wird bereits mitaria-expanded
semantisch gekennzeichnet). - Grafiken und Text können mit dem CSS-Pseudo-Attribut
:before
und dercontent
-Eigenschaft eingebunden werden. Diese müssen mitaria-hidden="true"
ebenfalls vor Screenreadern versteckt werden.
Die CSS-Technik mit generated content ist die flexibelste Technik. Dafür muss das HTML für die ausklappbare Schaltfläche leicht angepasst werden:
<button aria-expanded="false">
Warum werden mir nicht alle Optionen zur Buchung angezeigt?
<span aria-hidden="true"></span>
</button>
Jetzt können die Pfeile mit CSS wie folgt eingebunden werden:
[aria-expanded="true"] span:before{
content:"^";
}
[aria-expanded="false"] span:before{
content:"v";
}
Schließlich müssen die ausgeblendeten Inhalte richtig versteckt werden. Es gibt zahlreiche Techniken, um Inhalte zu verstecken – teils nur am Bildschirm, teils nur vor Screenreadern und teils vor allen Nutzern. Die versteckten Inhalte sollen vor allen Nutzern versteckt werden, z.B. mit dem hidden
-Attribut:
<div class="disclosure">
<p>
<button aria-expanded="false">
Warum werden mir nicht alle Optionen zur Buchung angezeigt?
<span aria-hidden="true"></span>
</button>
</p>
<p hidden>
Sie haben wahrscheinlich gerade ein Paket oder eine Option aktiv. Daher werden Ihnen nur weitere Pakete oder Optionen angezeigt, die Sie dazu buchen oder in die Sie wechseln können. Wenn Ihre derzeit aktive Buchung ausläuft, stehen Ihnen wieder alle Angebote zur Verfügung.
</p>
</div>
Variationen für ausklappbare Schaltflächen
Vor dem Hintergrund der Barrierefreiheit gibt es kaum Variationen zum oben skizzierten Grundgerüst einer ausklappbaren Schaltfläche. Einige Punkte, die es dennoch zu beachten gilt, sind:
- Wenn die Schaltfläche keinen Text enthält, sondern ein Icon ist, dann muss entweder das
BUTTON
-Element z.B. mitaria-label
beschriftet werden oder die Beschriftung muss über den Alternativtext der Grafik erfolgen:<button aria-expanded="false">
<img alt="Hilfe zu den Buchungsoptionen" src="fragezeichen.svg">
<span aria-hidden="true"></span>
</button> - Wenn der einzublendende Inhalt wie ein Tooltip angezeigt wird, d.h. ohne vorherige Aktivierung einer Schaltfläche eingeblendet wird, dann ist der
Design-Pattern für Tooltips anzuwenden.
Ausführliche Anforderungen an den HTML-Code
Damit eine ausklappbare Schaltfläche semantisch richtig aufbereitet wird, müssen folgende Punkte berücksichtigt werden:
- Die ausklappbare Schaltfläche ist ein
BUTTON
-Element oder ein (vorzugsweise aktives) Element mit der Rolle "button". - Wenn der einzublendende Inhalt nicht sichtbar ist, erhält das Element mit der Rolle "button" das Attribut
aria-expanded
mit dem Wert "false". Wenn der zugehörige Inhalt sichtbar ist, erhält dasaria-expanded
-Attribut den Wert "true". - Der Name für die ausklappbare Schaltfläche errechnet sich aus dem Text innerhalb des Elements mit der Rolle "button". Falls keine Beschriftung vorhanden ist, dann erhält das
BUTTON
-Element einaria-label
- oderaria-labelledby
-Attribut, damit der Name berechnet werden kann, z.B.:<button aria-expanded="false" aria-label="Hilfe zu den Buchungsoptionen"></button>
- Abhängig von der CSS-Technik werden Grafiken an den Accessibility-Tree und somit an Screenreader übertragen. Um Redundanzen mit der semantischen Auszeichnung durch
aria-expanded
zu vermeiden, sollten Glyphen oder Icons, die den zugeklappten oder ausgeklappten Zustand anzeigen, vor dem Accessibility-Tree verborgen werden. - Der ausgeblendete Inhalt muss hingegen vor jedem Nutzer versteckt werden. Es gibt
verschiedene Techniken, um Inhalte zu verstecken, und nur bestimmte Techniken sind geeignet, Inhalte sowohl am Bildschirm als auch vor dem Accessibility-Tree zu verbergen. Der ausgeblendeter Inhalt sollte entweder mit dem HTML-Attribut
hidden
oder mit den CSS-Deklarationendisplay:none;
odervisibility:hidden;
verborgen werden.
Für ausklappbare Schaltflächen sollten auch die folgenden Punkte beachtet werden:
- Obwohl keine Anforderung aus den Web Content Accessibility Guidelines (WCAG) 2.1 oder der Barrierefreien Informationstechnik-Verordnung – BITV 2.0, so sollte die visuelle Wahrnehmbarkeit im
Windows-Kontrastmodus sichergestellt werden. Die angezeigten Icons werden auch aus diesem Grund mit dem Pseudoattribut
:before
eingebunden. - Der Fokus muss sichtbar sein. Standardmäßig wird die
outline
-Eigenschaft zur Fokusanzeige in einer Schaltfläche genutzt; wenn sie entfernt wird, dann muss über das:focus
-Pseudoattribut sichergestellt werden, dass der Fokus trotzdem gut sichtbar ist.
ARIA bietet im Übrigen zahlreiche Attribute, die in Einzelfällen auch für ausklappbare Schaltflächen genutzt werden können. Normalerweise sollten jedoch ARIA-Attribute nur dann eingesetzt werden, wenn es tatsächlich ein Problem gibt (wie mit dem aria-hidden
-Attribut für den Pfeil). Überflüssige ARIA-Attribute können die Barrierefreiheit einschränken oder ausschließen, wenn sie falsch eingesetzt werden.
Fokus-Management
Sofern ein Button
-Element für die ausklappbare Schaltfläche eingesetzt wird, ist kein besonderes Fokus-Management notwendig, denn alle Browser erlauben die Aktivierung eines BUTTON
-Elements per Eingabe- und Leertaste. Die Aktivierung per Tastatur löst dabei den click-Event aus. Gleiches gilt für ein Link mit der Rolle "button":
<a role="button" href="#" aria-expanded="false">
Warum werden mir nicht alle Optionen zur Buchung angezeigt?
</a>
Sollte die Rolle "button" für ein nicht aktives Element genutzt werden, dann müssen folgende Maßnahmen getroffen werden:
- Das Element mit der Rolle "button" benötigt ein
tabindex="0"
, damit es in der Fokus-Reihenfolge steht.<span role="button" tabindex="0" aria-expanded="false">
Warum werden mir nicht alle Optionen zur Buchung angezeigt?
</span> - Es müssen Event-Handler (z.B.
onkeypress
oderonkeyup
) für die Leertaste und die Eingabetaste berücksichtigt werden, um die damit verknüpfte Aktion auszulösen.
Für das Element mit der Rolle "button" müssen folgende Aktionen sowohl per Eingabe- als auch per Leertaste möglich sein, wenn der Fokus auf das Element steht:
- Ist der zugehörige Inhalt unsichtbar, dann wird er sichtbar gemacht.
- Ist der zugehörige Inhalt sichtbar, dann wird er unsichtbar gemacht.
- Im Allgemeinen muss der Fokus nach Aktivierung der Schaltfläche auf der Schaltfläche bleiben. Nur wenn der eingeblendete Inhalt nicht unmittelbar hinter der Schaltfläche zum DOM hinzugefügt wird, kommt das Setzen des Fokus auf die eingeblendeten Inhalte in Frage.
Der Beitrag Barrierefreie Buttons brauchen oft ARIA besteht aus folgenden einzelnen Webseiten:
Toggle-Buttons (Umschaltflächen)
Wenn Buttons "gedrückt" oder "nicht gedrückt" aussehen, dann muss das
aria-pressed
-Attribut eingesetzt werden.Switch-Buttons (Knopfschalter)
Wenn Buttons "aktiviert" oder "nicht aktiviert" aussehen, dann können Checkboxen oder Schaltflächen mit ARIA zu Knopfschaltern gemacht werden.
Ausklappbare Schaltflächen
(Aktuelle Seite)
Akkordeons
Abschnittsüberschriften, die Inhalte ein- und ausblenden, benötigen ein
BUTTON
-Element mit einemaria-expanded
-Attribut.Menu-Buttons
Buttons, die Inhalte zur Seite hinzufügen und dabei andere Inhalte überlagern können, müssen mit einem
aria-haspopup
-Attribut ergänzt werden.