16. Mai 2023
HTML-„Accordion“ ohne JavaScript
Dass Accordions ein beliebtes UI-Element im Webdesign sind, hatte ich hier schon mal geschrieben. Tatsächlich kann man Accordions auch ohne HTML und im Prinzip sogar ohne CSS erstellen. Hierfür gibt es das wenig bekannte HTML5-Element „details“:
<details>
<summary>Lorem ipsum.</summary>
<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.</p>
</details>Code-Sprache: HTML, XML (xml)Ganz ohne CSS sieht das Element so aus:
Lorem ipsum.
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
Mit „details“ und „details[open]“ kannst du dem Element unterschiedliche Styles zuweisen.
details[open] summary {
}Code-Sprache: CSS (css)Nächster Artikel
Schöne Sache, das. Es gibt nur leider ein Problem: Dieses HTML-Element ist nicht barrierefrei. Es ist also nicht möglich, den Text per Screenreader aufzuklappen – der erkennt nämlich gar nicht, dass sich da noch weitere Inhalte verbergen, soweit ich das in meinen Tests erkennen konnte. Kurzum, sehbehinderte Menschen, die einen Screenreader benutzen, werden den Inhalt gar nicht zu hören bekommen.