Why <details> is Not an Accordion

Dave Rupert on why that (wonderful) way of Using the <details> element to create modals and menus is not good for semantics.

Because <summary> has role="button", it eats the semantic content of elements inside it.

So that big <h1> inside of your <summary> becomes just another piece of text, sans semantics.

I especially like this part of his post too:

At the risk of being a broken record; HTML really needs <accordion>, <tabs>, <dialog>, <dropdown>, and <tooltip> elements. Not more “low-level primitives” but good ol’ fashioned, difficult-to-get-consensus-on elements. A new set of accessible controls for a modern era…

Why <details> is Not an Accordion →

💁‍♂️ FYI: We already have a <dialog> element, as detailed here. At the time of writing it is supported in Chrome (by default) and in Firefox (behind a flag). A polyfill is available.

Published by Bramus!

Bramus is a frontend web developer from Belgium, working as a Chrome Developer Relations Engineer at Google. From the moment he discovered view-source at the age of 14 (way back in 1997), he fell in love with the web and has been tinkering with it ever since (more …)

Join the Conversation

1 Comment

Leave a comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.