JavaScript/Anwendung und Praxis/zugängliches Akkordeon

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

Unter einem Akkordeon (engl. accordion) versteht man einen Aufklappmechanismus, der nur einen Teilbereich der Seite darstellt und erst durch die Interaktion des Benutzers (click, touch) oder eine Tastaturbedienung weitere Teilbereiche aufschiebt und somit sichtbar macht.

Viele mit jQuery vorgefertigte, aber auch rein CSS-basierte Beispiele haben den Nachteil, dass sie nicht zugänglich, d.h. auch mit der Tastatur bedienbar sind. In diesem Tutorial lernen Sie, wie Sie ein Akkordeon entwickeln, dessen einzelne Bereiche mit der Tab-Taste angesteuert werden können.

Beachten Sie:
Bevor Sie diese Technik auf Ihrer Webseite übernehmen, sollten Sie sich aber über die Nachteile eines Akkordeons im Klaren sein:

Inhalte sind

  • nicht sofort ersichtlich und
  • (mindestens) einen Klick, Wischer oder Tastendruck vom Nutzer Ihrer Seite entfernt.

Inhaltsverzeichnis

[Bearbeiten] Anwendungsbeispiel

Eigentlich erfüllt das details-Element genau die Anforderungen an ein Akkordeon und ist in allen unterstützten Browsern zugänglich, d.h. auch mit der Tastatur zu öffnen und zu schließen. Allerdings wird es vom IE und älteren Firefox-Versionen noch nicht unterstützt.

Im folgenden Beispiel wird auf das details-Element verzichtet und stattdessen seine Funktionalität mit JavaScript nachgebaut. Die Auszeichnung der einzelnen Zustände erfolgt mit ARIA-Attributen.

[Bearbeiten] HTML

Beispiel
<main id="accordion">
  <button aria-expanded="false" aria-controls="collapsible-0">Section 1</button>
  <div id="collapsible-0" aria-hidden="true">
    <p>Inhalt 1</p>
  </div>
 
  <button aria-expanded="false" aria-controls="collapsible-1">Section 2</button>
  <div id="collapsible-1" aria-hidden="true">
    <p>Inhalt 2</p>
  </div>
 
  <button aria-expanded="false" aria-controls="collapsible-2">Section 3</button>
  <div id="collapsible-2" aria-hidden="true">
    <p>Inhalt 3</p>
  </div>
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.

[Bearbeiten] CSS der Buttons

Beispiel: Gestaltung der Buttons mit CSS
#accordion button[aria-expanded="true"]:after  {
    content: " \002B";
    color: #777;
    font-weight: bold;
}
 
#accordion button[aria-expanded="false"]:after  {
    content: " \2212";
}
Um den Schaltzustand der Buttons sichtbar zu machen, erhalten sie im eingeklappten Zustand ein +, das weiteren Inhalt anzeigt.
Im aufgeklappten Zustand wird dies zu einem Minuszeichen.

[Bearbeiten] JavaScript

Die Funktionalität des Beispiels wird erst mit JavaScript erreicht.

Beispiel ansehen …
<main id="accordion">
    function init() {     //nur ein EventHandler für das gesamte Accordion
      var acc = document.getElementById('accordion');
      acc.addEventListener('click',clickHandler);
    }
 
    function clickHandler(elem) {
      // Wo wurde geklickt?
      var target = elem.target;
      // Toggle den aria-expanded-Zustand
      var state = (target.getAttribute('aria-expanded') == 'false' || false)? true : false ;
      target.setAttribute('aria-expanded', state);
 
      // Aus-/ Einklappen
	  var panel = target.nextElementSibling;
	  var hidden = (panel.getAttribute('aria-hidden') == 'false' || false)? true : false ;
      panel.setAttribute('aria-hidden', hidden);
	}
Das Akkordion erhält mit addEventListener einen EventHandler, der bei einem Klick die Funktion clickHandler aufruft.

Diese Funktion ermittelt mit target das geklickte Element. Wenn dies ein aria-expanded-Attribut hat, wird der Zustand getoggelt (und damit das oben erwähnte CSS selektiert.

In einem zweiten Schritt wird mit nextElementSibling das Nachbarelement identifiziert und dessen aria-hidden-Attribut getoggelt, dass wiederum über CSS selektiert wird:
[aria-hidden="true"] {
    height: 0;
    transition: height 0.2s ease-out;	
}
 
[aria-hidden="false"] {
    height: 100%;
    transition: height 0.2s ease-out;	
}
Beachten Sie: Inhalte, die mit aria-hidden=true" ausgezeichnet sind, sind nicht lesbar.
Im wirklichen Leben wäre es ratsam, das aria-hidden-Attribut erst bei der Initialisierung auf false zu setzen, sodass die Inhalte auch ohne JavaScript gelesen werden können.

[Bearbeiten] Fazit

Da das in Details verwendete summary-Element nur eingeschränkt mit CSS formatierbar ist, bietet sich das hier gezeigte Beispiel an.

Eine Variante wäre ein Akkordeon aus mehreren Elementen, bei denen immer nur eins aufgeklappt ist. Diese ist auch unter dem Begriff Tab Panel bekannt.

[Bearbeiten] Weblinks

Meine Werkzeuge
Namensräume

Varianten
Aktionen
Übersicht
Index
Mitmachen
Werkzeuge
Spenden
SELFHTML