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

Akkordeons

Ein Akkordeon ist ein Satz von Abschnittsüberschriften, die jeweils nur eine Schaltfläche enthalten. Bei Aktivierung der Schaltflächen werden die zugehörigen Abschnitte einer Webseite eingeblendet und entsprechend ausgeblendet, wenn die Schaltflächen erneut aktiviert werden. Generell werden die Überschriften untereinander weg angeordnet. Dieses Design-Pattern wird in den WAI-ARIA Authoring Practices des W3C beschrieben.

Die Funktionalität eines Akkordeons ist identisch mit der Funktionalität von erweiternden bzw. reduzierenden Schaltflächen. Die Unterschiede betreffen Umfang und Semantik:

• In einem Akkordeon stellen die einzublendenden oder auszublenden Inhalte (größere) Abschnitte einer Webseite dar. Diese Abschnitte können als Seitenregion mit einem SECTION-Element (oder ein Element mit der Rolle "region") oder mit einem FORM-Element (oder einem Element mit der Rolle "form") ausgezeichnet werden.
• In einem Akkordeon sind die Elemente zum erweitern oder reduzieren der Abschnitte eine Kombination aus Überschrift und Schaltfläche:

  <h2>
  <button aria-expanded="true|false">
    Abschnittsüberschrift
  </button>
</h2>

  wobei die Schaltflächen mit dem aria-expanded-Attribut als erweiternd bzw. reduzierend markiert werden.

Der Schlüssel eines barrierefreien Akkordeons liegt in den folgenden drei Punkten:

1. Die Steuerelemente müssen per Tastatur fokussiert und aktiviert werden können.
2. Die Buttons in den Abschnittsüberschriften müssen den Zustand der Steuerelemente mit aria-expanded anzeigen.
3. Die einzublendenden Abschnitte müssen mit einer geeigneten Verstecktechnik verborgen werden.

Fokus-Management

Sofern Button-Elemente für die Steuerelemente eines Akkordeons eingesetzt werden, 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 Links mit der Rolle "button":

Sollte die Rolle "button" für nicht aktive Elemente genutzt werden, dann müssen folgende Maßnahmen getroffen werden:

1. Die Elemente mit der Rolle "button" benötigen ein tabindex="0", damit sie in der Fokus-Reihenfolge stehen.

   <h2>
  <span role="button" tabindex="0" aria-expanded="false">
    Abschnittsüberschrift
  </span>
</h2>  

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üpften Aktionen auszulösen.

Für die Elemente mit der Rolle "button" müssen folgende Aktionen sowohl per Eingabe- als auch per Leertaste möglich sein, wenn der Fokus auf ein Element steht:

1. Ist der zugehörige Inhalt unsichtbar, dann wird er erweitert. Ggf. wird ein anderer (bereits eingeblendeter) Abschnitt unsichtbar gemacht.
2. Ist der zugehörige Inhalt sichtbar, dann wird er reduziert. Ggf. muss immer ein Abschnitt sichtbar bleiben; in dem Fall passiert nichts.
3. Im Allgemeinen muss der Fokus nach Aktivierung einer 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.

Darüber hinaus können weitere Tastendrucke berücksichtigt werden, wenn beispielsweise ein Akkordeon sehr umfangreich ist. Wenn der Fokus auf einer der Schaltflächen steht, dann kommen folgende Tastendrucke zusätzlich in Betracht:

Hinweis: Diese erweiterten Tastendrücke werden in Screenreadern nicht funktionieren, weil bei Buttons Screenreader nicht in den Formularmodus wechseln. Die Tastendrücke können für die allgemeine Tastaturbedienung im Browser dennoch berücksichtigt werden.

Das HTML-Grundgerüst

Im Folgenden werden lediglich die Minimalanforderungen an das HTML für ein einfaches und barrierefreies Akkordeon vorgestellt. Es gibt zahlreiche Varianten von Akkordeons. Insbesondere können Akkordeons 0, 1 oder mehrere sichtbare Abschnitte umfassen. Außerdem können Akkordeons ineinander verschachtelt werden.

Steuerelemente

Zum oben bereits vorgestellten Code-Muster der Akkordeon-Steuerelemente müssen folgende Aspekte berücksichtigt werden:

• Die HTML-Struktur erfordert Überschriften. Die Überschriftenebene sollte sich der Überschriftenstruktur der Webseite unterordnen, d.h. statt eines H2-Elements kommen die anderen Überschriftenelemente H1, H3, H4, H5 und H6 ebenfalls in Frage.
• In der Überschrift darf nur die Schaltfläche stehen. Sollten andere Inhalte visuell neben, vor oder hinter der Schaltfläche positioniert werden müssen, so dürfen sie nicht innerhalb des Überschriftenelements vorkommen.
• Statt einer Überschrift mit HTML kann ein anderes Element mit der Rolle "heading" und ein aria-level-Attribut mit einem passenden Wert für die Überschriftenebene eingesetzt werden.
• Wenn der zu einer Schaltfläche gehörende Abschnitt sichtbar ist, dann erhält das Element mit der Rolle "button" das Attribut aria-expanded mit dem Wert "true". Wenn der zugehörige Abschnitt nicht sichtbar ist, erhält das aria-expanded-Attribut den Wert "false".

Der Grund, warum das aria-expanded-Attribut mit den Werten "true" oder "false" eingesetzt werden muss, ist dass die Steuerelemente zum erweitern bzw. reduzieren der Abschnitte meist durch ein Symbol wie ein "+" oder "−" ergänzt werden, die den Zustand der Schaltfläche angeben. Dieser Zustand stellt eine Information dar, die mit dem aria-expanded-Attribut eine Entsprechung im HTML erhält und von Browsern an Screenreader übermittelt wird.

Trotz des aria-expanded-Attributs können Symbole – abhängig von verschiedenen Faktoren – an den Accessibility-Tree übertragen werden. Um Redundanzen zu vermeiden sollte daher das Symbol mit dem aria-hidden-Attribut "sicherheitshalber" vor Screenreadern verborgen werden.

Die Technik mit dem CSS-Pseudo-Attribut :before ist die flexibelste Technik, um die Symbole einzubinden. Um das Symbol verstecken zu können, muss das HTML für das Steuerelement leicht angepasst werden:

Jetzt können die Symbole mit CSS wie folgt eingebunden werden:

Erweiterbarer Abschnitt

Die einzublendenden Abschnitte können bzw. dürfen als Seitenregionen ausgezeichnet werden und somit der Navigation in Screenreadern dienen. Da Akkordeons bereits eine strukturelle Navigation per Überschrift erlauben, ist die Festlegung von Regionen nicht immer vorteilhaft. Abhängig von der Qualität der Überschriften oder der Größe der einzelnen Abschnitte können folgende Punkte zusäztzlich berücksichtigt werden:

• Die Auszeichnung einer generischen Seitenregion erfolgt in HTML mit dem SECTION-Element (oder mit der Rolle "region"). Die Auszeichnung der einzublendenden Inhalte als Seitenregion ist nur dann zu empfehlen, wenn dadurch die strukturelle Navigation über Seitenregionen verbessert wird; ist das nicht der FALL, sollten einfache DIV-Elemente für diezu erweiternden bzw. reduzierenden Inhalte genutzt werden.
• Sofern Seitenregionen mit dem SECTION-Element (oder mit role="region") ausgezeichnet werden, benötigen sie eine Bezeichnung. Um die Seitenregionen unterscheidbar zu machen, sollten sie durch die zugehörige Abschnittsüberschrift explizit beschriftet werden:

  <h2 id="ueberschrift1">
  <button aria-expanded="true">
<span aria-hidden="true"></span>
  Abschnittsüberschrift 1
  </button>
</h2>
<section aria-labelledby="ueberschrift1" id="abschnitt1"> ... </section>

  Wenn keine Seitenregionen eingesetzt werden, dann ist eine explizite Bezeichnung nicht notwendig.

Wenn die erweiterbaren Abschnitte unsichtbar sind, dann sollten sie für niemanden zugänglich sein. Es gibt diverse Techniken, um Inhalte zu verbergen – nur für Screenreader, nur am Bildschirm oder für alle. Die ausgeblendeten Abschnitte müssen für alle verborgen sein. Dafür kommen das hidden-Attribut oder die CSS-Eigenschaften display:none; und visibility:hidden; in Frage.