I do want to add a few notes of caution:
- Edit to add (first because it’s a usability issue for most users): if you use any of these tricks, test on mobile to be sure you have a working escape hatch. For example if you use :focus etc, you very likely want tabindex=“-1” on body to allow the user to exit focus with touch. For checkboxes/radios, you may need some kind of conditionally touchable label to deactivate.
- These kinds of tricks can be awful for screen readers, so do research the appropriate a11y solutions for your usage. And actually test with screen readers to verify you haven’t botched it.
- These kinds of tricks can also wreak havoc with various Readability modes, sometimes totally demoting content arbitrarily. This definitely requires manual testing or automated snapshot testing because most readability modes are intentionally undocumented to prevent cheating.
- A lot of folks recommend details/summary for a variety of interactive behaviors, but don’t fall into this trap. They’re basically a semantic black box for screen readers.