zum Hauptinhalt springen.
UX/UI Design, Entwicklung & TYPO3 in Karlsruhe Karlsruhe | seit 2006

Barrierefreies Akkordeon mit Vanilla JS

10.07.2019, geschätzte Lesedauer: Minute(n). #a11y #javascript

Akkordeons helfen dabei, Website Inhalte übersichtlich zu strukturieren. Aus mehreren Inhalten können die Besucher schnell die für sie relevanten Aspekte auswählen. Häufig werden Akkordeons z.B. bei den FAQs einer Website eingesetzt.

Da Akkordeons nur einen Teil des Inhalts direkt anzeigen, ist der verborgene Teil nur durch eine Klickhürde zugänglich. Ein Akkordeon muss daher mit der Tastatur bedienbar sein. Damit auch Screenreader-Nutzer das Akkordeon bedienen können, müssen die Steuerelemente mit dem WAI-ARIA-Attribut (Web Accessibility Initiative - Accessible Rich Internet Applications) aria-expanded versehen werden.

In meinem Beispiel wird zusätzlich das Attribut aria-hidden (true/false) gesetzt, da der Inhalt nicht "versteckt" wird über "display: none". "Display:none" wird von Screenreadern in der Regel nicht ausgelesen, daher könnte bei dieser Auszeichnung darauf verzichtet werden.

Zur Codepen Demo: https://codepen.io/onza/pen/aLQeJj

 

So sieht das aus:



Der Code:

// HTML <div class="accordion"> <button class="accordion__btn"> <span class="accordion__icon"><svg class="icon" role="img" xmlns="http://www.w3.org/2000/svg" height="24" width="24"><path d="M15 5l-1.41 1.41L18.17 11H2v2h16.17l-4.59 4.59L15 19l7-7-7-7z"/></svg></span> <span class="accordion__label" aria-expanded="false">Item 1</span> </button> <div class="panel" aria-hidden="true"> <div id="accordion__content1" class="accordion__content"> <h3>Lorem ipsum dolor</h3> <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p> </div> </div> <button class="accordion__btn"> <span class="accordion__icon"><svg class="icon" role="img" xmlns="http://www.w3.org/2000/svg" height="24" width="24"><path d="M15 5l-1.41 1.41L18.17 11H2v2h16.17l-4.59 4.59L15 19l7-7-7-7z"/></svg></span> <span class="accordion__label" aria-expanded="false">Item 1</span> </button> <div class="panel" aria-hidden="true"> <div id="accordion__content2" class="accordion__content"> <h3>Lorem ipsum dolor</h3> <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p> </div> </div> <button class="accordion__btn"> <span class="accordion__icon"><svg class="icon" role="img" xmlns="http://www.w3.org/2000/svg" height="24" width="24"><path d="M15 5l-1.41 1.41L18.17 11H2v2h16.17l-4.59 4.59L15 19l7-7-7-7z"/></svg></span> <span class="accordion__label" aria-expanded="false">Item 1</span> </button> <div class="panel" aria-hidden="true"> <div id="accordion__content3" class="accordion__content"> <h3>Lorem ipsum dolor</h3> <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p> </div> </div> </div>
// Vanilla JS var acc = document.getElementsByClassName("accordion__item"); var i; for (i = 0; i < acc.length; i++) { acc[i].onclick = function() { this.classList.toggle("active"); var expanded = this.classList.contains("active"); var hidden = !expanded; this.firstElementChild.setAttribute("aria-expanded", expanded); this.nextElementSibling.classList.toggle("show"); this.nextElementSibling.setAttribute("aria-hidden", hidden); var panel = this.nextElementSibling; if (panel.style.maxHeight){ panel.style.maxHeight = null; } else { panel.style.maxHeight = panel.scrollHeight + "px"; } } }
// SCSS .accordion { font-family: arial, sans-serif; .accordion__btn { display: flex; align-items: center; width: 100%; margin: 0 0 0.25rem 0; padding: 0 1rem; text-align: left; background-color: #ddd; border: 0; cursor: pointer; .accordion__icon { width: 24px; height: 24px; transition: 0.3s ease-in-out; } &.active:hover .accordion__icon, &.active .accordion__icon { transform: rotate(45deg); transition: 0.3s ease-in-out; } .accordion__label { margin: 0; padding: 1rem 0 1rem 1rem; border: 0; background: none; font-size: 1.2rem; text-align: left; line-height: 1.4; } } .panel { max-height: 0; overflow: hidden; transition: 0.3s ease-in-out; opacity: 0; } .panel.show { opacity: 1; max-height: 1000px; } .accordion__content { padding: 1rem; h3 { margin: 1rem 0; } } }
Skyline Karlsruhe