https://css-tricks.com/using-details-for-menus-and-dialogs-is-an-interesting-idea/ Skip to main content CSS-Tricks * Articles * Videos * Almanac * Newsletter * Guides * Books Search Account accessibility details/summary menus progressive enhancement Using
for Menus and Dialogs is an Interesting Idea Avatar of Chris CoyierAvatar of Chris Coyier Chris Coyier on Mar 21, 2019 Take the pain out of building site search with the Algolia hosted API. Start free now! One of the most empowering things you can learn as a new front-end developer who is starting to learn JavaScript is to change classes. If you can change classes, you can use your CSS skills to control a lot on a page. Toggle a class to one thing, style it this way, toggle to another class (or remove it) and style it another way. But there is an HTML element that also does toggles!
! For example, it's definitely the quickest way to build an accordion UI. Extending that toggle-based thinking, what is a user menu if not for a single accordion? Same with modals. If we went that route, we could make JavaScript optional on those dynamic things. That's exactly what GitHub did with their menu. [details-me][details-me] Inside the
element, GitHub uses some Web Components (that do require JavaScript) to do some bonus stuff, but they aren't required for basic menu functionality. That means the menu is resilient and instantly interactive when the page is rendered. Mu-An Chiou, a web systems engineer at GitHub who spearheaded this, has a presentation all about this! We went all in on details to turn a lot of things interactive without JS. There is also https://t.co/SFXtkNzIbZ, and here is a talk I gave on leveraging the power of details, which mentions the CSS trick :) https://t.co/DmX8opvi4z Happy to talk/share about about any of these! -- Mu-An Chiou (@muanchiou) February 1, 2019 The worst strike on
is its browser support in Edge, but I guess we won't have to worry about that soon, as Edge will be using Chromium... soon? Does anyone know? Our Learning Partner Frontend Masters logo Frontend Masters Wanna learn Accessibility deeply? Frontend Masters has a great course on accessibility from one of the top experts on JavaScript and accessibility in field: Marcy Sutton. This course is about React and Gatsby.js and studying accessibility as part of UI components. Frontend Masters logo Wanna learn Accessibility deeply? Frontend Masters has a great course on accessibility from one of the top experts on JavaScript and accessibility in field: Marcy Sutton. This course is about React and Gatsby.js and studying accessibility as part of UI components. Comments 1. Neil Osman Permalink to comment# March 21, 2019 I am not sure semantically it's a good idea to do . Anyhow, we can dump scripting by using CSS focus-within + Ian Permalink to comment# March 21, 2019 I have had that question regarding semantics, too. Although W3C does provide an example which says
can be used to "hide some controls by default", I'm not sure if that describes dropdown menus. + Tim Permalink to comment# March 22, 2019 Its possible to think of a menu in ways that reconcile its behaviour with the semantics of a
tag. For example, a user menu when expanded shows more 'detailed' options for user actions. On the other hand, the user menu un-expanded is worthless since you can't interact with it, whilst a item that expands more details about itself seems like it should be useful in its summarised form. At what point this sort of use crosses into abuse of semantics is a good question, considering how often accessibility advocates speak out against misuse of even similar tags like and + Neil Osman Permalink to comment# March 22, 2019 My original comment included a markup example but it was sanitized... Setting a menu role on the summary element would be a violation of the ARIA authoring practice of not contradicting HTML semantics. Though playing with this option makes me wonder https:// codepen.io/WW3/pen/pYqRgq?editors=1100 + Frown Permalink to comment# March 25, 2019 Like the checkbox hack, while it's not the best approach, it's a simple and robust way to do a simple feature [that should have been resolved natively by now in html], so developers will use it as a way to toggle menus and other content. While JS is commonly enabled, for those instances where it isn't, CSS and native functions like this are the fallbacks that still work. And that's the important point here - providing the user with functionality, even if overall capabilities are... constrained. I agree with the focus-within usage - been looking into that myself recently and it could be a viable alternative to 'hacks'. No doubt something else will crop up to foul that approach up too! 2. basher Permalink to comment# March 22, 2019 18 months ago,
was not even mentioned in https://inclusive-components.design/collapsible-sections/. However, it appears that browser/screen-reader support is much improved: - https://www.hassellinclusion.com/blog/ accessible-accordions-part-2-using-details-summary/ - https://www.scottohara.me/blog/2018/09/03/ details-and-summary.html This comment thread is closed. If you have important information to share, please contact us. Related Jetpack Logo The related posts above were algorithmically generated and displayed here without any load on our servers at all, thanks to Jetpack. CSS-Tricks is created by Chris and a team of swell people. Keep up to date on web dev with our hand-crafted weekly newsletter Email Address [ ] [Subscribe] Tech * WordPress (CMS) * Jetpack (Search, Backup) * WooCommerce (eCommerce) * Local (Development) Hosting * Flywheel Family * CodePen * ShopTalk Show Minisites * The Power of Serverless * Upcoming Conferences * Coding Fonts Contact * Email * Sponsorship Info * Guest Writing Buy * Posters & Swag * Membership Follow * Twitter * Instagram * YouTube * CodePen * GitHub * iTunes * RSS Back to Top [Jetpack-Search-on-CSS-Tricks-Instant-Search]