Barrierefreies Webdesign ein zugängliches und nutzbares Internet gestalten

Barrierefreie Buttons brauchen oft ARIA veröffentlicht in 2012zuletzt bearbeitet in

Einfache erweiternde bzw. reduzierende Schaltflächen (Disclosures)

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:

Gegenüberstellung: Eine Schaltfläche mit reduzierten und erweiterten Inhalten.

Ob Inhalte erweitert oder reduziert werden können, wird mit einem ↓ oder ↑ angezeigt

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 angezeigt werden, wird hingegen ein nach links oder nach oben zeigender Pfeil eingesetzt.

Grundgerüst

Die Pfeile vermitteln eine Information, genauer gesagt: Die Pfeile zeigen an, ob ein Inhalt erweitert oder reduziert ist. Solche Zustände müssen dann auch für Screenreader und andere Assistenztechnologien zugänglich gemacht werden. Dafür muss das button-Element ein aria-expanded-Attribut erhalten. Das HTML-Grundgerüst sieht wie folgt aus:

<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:

Die CSS-Technik mit generated content ist die flexibelste Technik. Dafür muss das HTML für die erweiternde bzw. reduzierende 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";
}

Die zu erweiternden Inhalte müssen 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>
    <span 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.
</span>
  </p>
</div>

Das aria-expanded-Attribut zeigt nach der Extern, englischsprachig: ARIA-Spezifikation an, ob ein gruppierendes Element erweitert oder reduziert ist. Die erweiternde bzw. reduzierende Schaltfläche muss dabei

Hinweis: Das einzublendende Element kann ein beliebiges Element sein, das Inhalte gruppiert. Hierzu zählen neben Elementen mit der Rolle „group" auch Seitenregionen genauso wie ein Absatz.

Variationen für erweiternde bzw. reduzierende Schaltflächen

Vor dem Hintergrund der Barrierefreiheit gibt es kaum Variationen zum oben skizzierten Grundgerüst einer erweiternde bzw. reduzierende Schaltfläche. Einige Punkte, die es in manchen Situationen zu beachten gilt, sind:

Alternativen mit HTML

Es gibt zwei Alternativen für erweiternde bzw. reduzierende Schaltflächen, die mit HTML umgesetzt werden können:

Der Vorteil dieser beiden Techniken ist, dass JavaScript (eigentlich) nicht erforderlich ist. Browser kümmern sich um die Funktionalität und den Zustand der erweiternden bzw. reduzierenden Schaltfläche. Für das popovertarget-Attribut kann es allerdings Schwierigkeiten bei der Positionierung geben und JavaScript muss unterstützend eingesetzt werden.

Das details-Element

Für erweiternde bzw. reduzierende Schaltflächen bietet HTML mit den details- und summary-Elementen eine alternative Technik. Das details-Element besitzt die Rolle „group" und erzeugt eine Schaltfläche mit einem aria-expanded-Attribut.

Die erweiternde bzw. reduzierende Schaltfläche erhält ihren Namen durch eine Beschriftung, wenn die Beschriftung mit einem summary-Element ausgezeichnet wird:

<details>
<summary>Beschriftung</summary>
<p> Eine Kleinigkeit, die der zufälligen Aufmerksamkeit entgehen darf.</p>
</details>

Das details-Element kann ein open-Attribut erhalten. Wenn das Attribut gesetzt ist, wird das gruppierende Element im sichtbaren Zustand angezeigt:

<details open>
<summary>Beschriftung</summary>
<p> Eine Kleinigkeit, die der zufälligen Aufmerksamkeit entgehen darf.</p>
</details>

Der visuelle Zustand der erweiternden bzw. reduzierenden Schaltfläche kann mit CSS wie folgt gestaltet werden:

details summary {
list-style: '→' inside;
}
details[open] summary {
list-style: '↓' inside;
}

Das popovertarget-Attribut

Browser bieten eine API zur Anzeige von Popovers. Sie werden beispielsweise genutzt für

Schaltflächen können ein popovertarget-Attribut erhalten. Mit dem Attribut wird auf die ID eines Elements mit einem popover-Attribut gezeigt. Mit dem popovertarget-Attribut erhält die Schaltfläche die Zustände einer erweiternden bzw. reduzierenden Schaltfläche.

Das popover-Attribut kann für jedes Element einer Webseite verwendet werden. Der Inhalt wird mit display:none; versteckt und nur vom Browser angezeigt, wenn die darauf zeigende Schaltfläche aktiviert und erweitert wird.

Das folgende Beispiel zeigt ein Muster für eine erweiternde Schaltfläche für ein Untermenü:

  1. In der Ausgangssituation wird in Assistenztechnologien ein Listeneintrag mit einem Link „Alle Produkte" gefolgt von einer erweiternden Schaltfläche mit dem Namen „Alle Produkte untermenü" präsentiert.
  2. Wenn die Schaltfläche aktiviert wird, wird aus der erweiternde Schaltfläche eine reduzierende Schaltfläche und die verschachtelte Liste mit drei weiteren Links wird für alle Nutzende zugänglich.

<ul>
<li class="disclosure"><a id="foo" href="produkte.html">Alle Produkte</a> <button id="bar" aria-labelledby="foo bar" aria-label="untermenü" popovertarget="me"><span aria-hidden="true"></span></button>
<ul popover id="me">
<li><a href="hemden.html">Hemden</a></li>
<li><a href="schuhe.html">Schuhe</a></li>
<li><a href="huete.html">Hüte</a></li>
</ul></li>
<!--Weitere Einträge der Navigation -->
</ul>

Popovers mit dem popovertarget-Attribut funktionieren grundsätzlich ohne JavaScript. Allerdings können Popovers nicht beliebig positioniert werden. Um Popovers vor allem relativ zu anderen Elementen zu positionieren, ist heute noch JavaScript erforderlich.

Das popovertarget-Attribut ist ein vielversprechender Ansatz, beliebige Inhalte einer Webseite anzuzeigen oder zu verstecken:

Für die korrekte Lesereihenfolge sind allerdings AutorInnen verantwortlich. Im obigen Beispiel blendet die Schaltfläche Inhalte ein, die im DOM unmittelbar dahinter stehen. Wann immer möglich, sorgen Sie dafür, dass die einzublendenden Inhalte unmittelbar hinter der auslösenden Schaltfläche im DOM stehen. Damit stellen Sie sicher, dass die Lesereihenfolge korrekt ist.

Ausführliche Anforderungen an den HTML-Code

Damit eine erweiternde bzw. reduzierende Schaltfläche mit einem aria-expanded-Attribut semantisch richtig aufbereitet wird, müssen folgende Punkte berücksichtigt werden:

  1. Die erweiternde bzw. reduzierende Schaltfläche ist ein BUTTON-Element oder ein (vorzugsweise aktives) Element mit der Rolle "button".
  2. 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 das aria-expanded-Attribut den Wert "true".
  3. Der Name für die erweiternde bzw. reduzierende Schaltfläche wird durch die Beschriftung der Schaltfläche mit der Rolle "button" bestimmt. Falls keine Beschriftung vorhanden ist, dann erhält das BUTTON-Element ein aria-label- oder aria-labelledby-Attribut, um den Namen festzulegen, z.B.:

    <button aria-expanded="false" aria-label="Hilfe zu den Buchungsoptionen"></button>

  4. 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 ausgeblendeten oder eingeblendeten Zustand anzeigen, vor dem Accessibility-Tree verborgen werden.
  5. 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-Deklarationen display:none; oder visibility:hidden; verborgen werden.

Für erweiternde bzw. reduzierende Schaltflächen sollten auch die folgenden Punkte beachtet werden:

ARIA bietet im Übrigen zahlreiche Attribute, die in Einzelfällen auch für erweiternde bzw. reduzierende 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 erweiternde bzw. reduzierende 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 das 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:

  1. 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>

  2. Es müssen Event-Handler (z.B. onkeypress oder onkeyup) 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 dem Element steht:

  1. Ist der zugehörige Inhalt unsichtbar, dann wird er erweitert.
  2. Ist der zugehörige Inhalt sichtbar, dann wird er reduziert.
  3. 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.