Akkordion: barrierfrei, notfalls mit Javascript

Besonders bei One-Page-Layouts werden heute gerne Akkordeons eingesetzt, also aufklappbare Elemente, deren Inhalt zunächst nicht sichtbar ist und erst durch einen Klick auf das Überschrifts-Element eingeblendet wird. Dies ist in HTML5 mit dem details-Element ganz einfach realisierbar. Es ist in allen unterstützten Browsern zugänglich, d.h. auch mit der Tastatur zu öffnen und zu schließen:

 

 

Klapp mich auf:

Das neue details-Element ermöglicht es, ganz ohne den Einsatz von JavaScript, ursprünglich verborgene Textinhalte aufzuklappen.

 

 

 

Der Pferdefuß dabei: vom IE und von älteren Firefox-Versionen wird das details-Element noch nicht unterstützt.

Und noch etwas: der Inhalt des Elements ist natürlich nicht auf den ersten Blick ersichtlich, es muss erst eine Aktion durch den Benutzer erfolgen, um die versteckten Inhalte einzublenden. Deswegen sollte man es sich gut überlegen, wann und wo man ein Akkordeon sinnvoll einsetzt.

Abhilfe: Javascript, wenns denn unbedingt sein muß

In diesem Artikel bei selfhtml ist der Sourcecode für ein barrierefreies Akkordeon extra für IE und ältere Browser  zu finden, sowie eine genaue Erklärung der Anwendung. Es werden ARIA-Elemente eingesetzt, um das Akkordeon auch für Screenreader etc. bedienbar zu machen. Ich zitiere mal kurz selfhtml:

Das Akkordeon besteht aus Buttons und einem dazugehörenden div. Um diesen Zusammenhang auch für Screenreader klarzustellen, erhalten die Buttons ein aria-controls-Attribut, dass auf die id des dazugehörenden divs verweist. Jeder Button erhält ein aria-expanded-Attribut, dass den jeweils geschalteten Zustand anzeigt, was auch mit CSS sichtbar gemacht wird.

Alles klar? Wenn man also unbedingt für ältere Browser kompatibel bleiben will, setzt man diese Lösung ein.