frontendmasters.com
Relatively New Things You Should Know about HTML Heading Into ...
Excerpt
Not all of this is like *absolutely brand spanking new* just-dropped-in-2024 stuff. ... It’s possible you haven’t kept up too much with HTML developments as it tends to, rightfully, move a lot slower than CSS or JavaScript. ## A group of details elements can behave like an accordion, among other improvements, but still have accessibility limitations. We’ve had cross-browser … Me, I mostly think the only-one-open-at-a-time thing is an anti-pattern (as do others), mostly because it’s weird to close something a user may have intentionally opened via side effect. But the web is a big place and certain specific designs I can see needing it to be effective so I don’t hate that it exists. At least I think using the term “accordion” is now appropriate in this context, but that there are still potential accessibility issues. Like imagine using this for a FAQ section where each question would normally be a header like … , which is a “button”, so that’s not great. Here’s an example of the accordion pattern being used with a group of horizontally laid out details elements. If more could be opened, it could cause horizontal scroll which I sure we can all imagine also sucks. Note that those
Related Pain Points
Accessibility limitations in accordion patterns
6The new accordion pattern using grouped <details> elements has unresolved accessibility limitations. Using <details> elements doesn't preserve proper semantic heading hierarchy (e.g., in FAQ sections where headers would normally be <h2>), and the one-open-at-a-time behavior can cause unintended closures and horizontal scroll issues.
Difficulty keeping up with HTML feature developments
5HTML features and best practices evolve regularly, but developers struggle to keep up with the pace of new features and understand how to use them correctly. The learning curve is exacerbated by slower documentation and lower visibility compared to CSS and JavaScript.