Barrierefreies Akkordeon mit Vanilla JS
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;
}
}
}
