Accessible version of the 'CSS ONLY "checkbox hack"'
Note: base of this code was taken from https://css-tricks.com/the-checkbox-hack/
The "checkbox hack" can be used to provide complex functionality such as hide/showing content with 'pure css'. While it is a cool trick, it is also very inaccessible. The labels are not in the tab index, have incorrect semantics, and the usual keypress events do not work.
This fiddle aims to fix these problems for situations. The better solution would be to remove the hack and replace it with a <button> element (and appropriate js for focus management). However, the better solution may not always be possible.
This demo is on github. If you see a way to improve it, please feel free to contribute.
View page source for details (comments included)
Outstanding issues
Use of this workaround is not suggested until these issues are resolved. If you have an idea of how to fix them, please submit a PR or open an issue on github.
- Safari does not respect tabindex on the
<label>, so the label is not focusable by keyboard navigation. See https://bugs.webkit.org/show_bug.cgi?id=102780