details/summary HTML tags state change announcement polyfill
As the main reason preventing an accessible usage of
summary elements as analyzed and described in https://www.hassellinclusion.com/blog/accessible-accordions-part-2-using-details-summary/ has been fixed (compare to https://github.com/nvaccess/nvda/issues/8631), this polyfill is most likely not necessary any more (especially as it didn't came to a fully working product so far anyhow).
Work in progress
As the issue has been solved mainly by mozilla fixing a missing event in Firefox, this polyfill doesn't seem to be necessary any more: https://github.com/nvaccess/nvda/issues/8631
- Released under the MIT license
- Made in Germany
- Enriches the standard
summaryHTML tags to be accessible even when using NVDA
More information on the NVDA issues
Motivated by the latter article on hassellinclusion.com's blog, I've developed this polyfill to clear out the last remaining blocking aspect of using details/summary HTML elements even also accessibly.
The polyfill was designed with the following concepts kept in mind:
You may optionally load via NPM or Bower:
$ npm install details-summary-state-change-announcement-polyfill $ bower install details-summary-state-change-announcement-polyfill
Nothing really, just plug it in, it
will should work out of the box.
The plugin sets the
aria-expanded-attribute on the
summary HTML tag according to the open state of the
details HTML tag indicated by its
open-attribute on user interaction with the
details HTML tag.
aria-expanded-attribute accordingly yourself. Integrating something like a MutationObserver for this special case doesn't convince me at the moment.
See the polyfill in action either by downloading / forking this repo and have a look at
demo/index.html, or at the hosted demo: https://mfranzke.github.io/details-summary-state-change-announcement-polyfill/demo/
things to keep in mind
- The demo HTML code is meant to be simple
If you're trying out and using my work, feel free to contact me and give me any feedback. I'm curious about how it's gonna be used.