GeistHaus
log in · sign up

Why <details> is Not an Accordion

daverupert.com

I learned something this week and I thought I would share it. Earlier this year I read Adrian Roselli’s post “Details/Summary are not [insert control here]”. In this post Adrian says <details> is not a tab set, it’s not a subnavigation menu, not a dialog, not an accordion, not a … wait, what? Not an accordion‽⁈

4 pages link to this URL
A details element as a burger menu is not accessible
Cloud Four Gerardo Rodriguez Published

Using the native HTML disclosure widget for a burger menu is so enticing. Unfortunately, the details/summary elements come with accessibility issues, so it's not an inclusive solution.

2 inbound links article en Accessibility AccessibilityDesignDevelopmentMobile WebPerformanceProgressive EnhancementResponsive Web Designaccessibilitybest practicesburger menucore web vitalscumulative layout shiftdesigndevelopmentmobile webprogressive enhancement