Barrierefreies Webdesign ein zugängliches und nutzbares Internet gestalten

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

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 Extern, englischsprachig: WAI-ARIA Authoring Practices des W3C beschrieben.

Ein F.A.Q.-Akkordeon mit einem ausgeklappten Abschnitt. Der Zustand der Buttons wird visuell durch + und − vermittelt

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

Das Geheimnis eines barrierefreien Akkordeons liegt in den folgenden drei Punkten:

  1. Die Komponenten müssen per Tastatur fokussiert und aktiviert werden können. In bestimmten Fällen ist ein erweitertes Fokus-Management sinnvoll.
  2. Die Buttons in den Abschnittsüberschriften müssen den Zustand der Komponenten mit aria-expanded anzeigen.
  3. Die einzublendenden Abschnitte müssen mit einer geeigneten Verstecktechnik verborgen werden.

Fokus-Management

Sofern Button-Elemente für die Komponenten 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":

<h2>
  <a href="#" role="button" aria-expanded="false">
          Abschnittsüberschrift
  </a>
</h2>

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 sichtbar gemacht. Ggf. wird ein anderer (bereits eingeblendeter) Abschnitt unsichtbar gemacht.
  2. Ist der zugehörige Inhalt sichtbar, dann wird er unsichtbar gemacht. 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:

Optionale Tastendrücke für Akkordeons
TastendruckBeschreibung
setzt den Fokus auf die vorherige Schaltfläche. Ist der Fokus bereits auf der ersten Schaltfläche des Akkordeons, wird der Fokus auf die letzte Schaltfläche gesetzt.
setzt den Fokus auf die nächste Schaltfläche. Ist der Fokus bereits auf der letzten Schaltfläche des Akkordeons, wird der Fokus auf die erste Schaltfläche gesetzt.
Pos1setzt den Fokus auf die erste Schaltfläche.
Endesetzt den Fokus auf die letzte Schaltfläche.

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.

Akkordeon-Komponenten

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

Der Grund, warum das aria-expanded-Attribut mit den Werten "true" oder "false" eingesetzt werden muss, ist dass die Komponenten zum Ein- und Ausklappen 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 die Komponente leicht angepasst werden:

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

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

[aria-expanded="true"] span:before{
content:"−";
}
[aria-expanded="false"] span:before{
content:"+";
}

Einzublendender Abschnitt

Die einzublendenden Abschnitte können bzw. dürfen als Intern: 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:

Wenn die einzublenden 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 Intern: für alle verborgen sein. Dafür kommen das hidden-Attribut oder die CSS-Eigenschaften display:none; und visibility:hidden; in Frage.

<h2 id="ueberschrift1">
  <button aria-expanded="false">
  <span aria-hidden="true"></span>
  Abschnittsüberschrift 1
  </button>
</h2>
<section id="abschnitt1" hidden> ... </section>
<h2 id="ueberschrift2">
  <button aria-expanded="false">
  <span aria-hidden="true"></span>
abschnittsüberschrift 2
</button>
</h2>
<section id="abschnitt2" hidden> ... </section>
<h2 id="ueberschrift3">
  <button aria-expanded="true">
<span aria-hidden="true"></span>
  Abschnittsüberschrift 3
  </button>
</h2>
<section id="abschnitt3"> ... </section>