alt Hacker NewsNote that pure HTML and CSS implementations of tabs using <details> and <summary> fail to meet several important accessibility criteria [1].
While you can make something that visually appears to act as a set of tabs, building it accessibly unfortunately still requires JavaScript.
[1] https://adrianroselli.com/2019/04/details-summary-are-not-in...
Replies
tapirl • yesterday at 5:51 PM
The pure-css effects I mentioned both don't use <detail>/<summary>.
➕ show 1 reply
This is false, recently the details element has gotten support for grouping them: the [name] attribute. This effectively enforces tab-like semantics where only one of the grouped details elements can be open at a time.
This is a quite recent addition and the modern web is evolving too fast so I wouldn't put it past myself for missing this :)
Yay for progress and for JavaScript free solutions!