Skip to content
Fast and lightweight vanilla JavaScript polyfill for the (currently) missing state change announcement for details/summary HTML tags in NVDA.
JavaScript
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
demo
.gitignore
CHANGELOG.md
LICENSE
README.md
bower.json
details-summary-state-change-announcement-polyfill.js
package.json

README.md

details/summary HTML tags state change announcement polyfill

(Discontinued): As the main reason preventing an accessible usage of details and 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

MIT license details-summary-state-change-announcement-polyfill on Npmjs dependencies Status code style: prettier XO code style Conventional Commits Greenkeeper badge

Lightweight and dependency-free vanilla JavaScript polyfill for the (currently) missing state change announcement for details/summary HTML tags in NVDA.

  • Released under the MIT license
  • Made in Germany

Features

  • Enriches the standard details and summary HTML 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.

Core concepts

The polyfill was designed with the following concepts kept in mind:

  • dependency-free
  • Using JavaScript as progressive enhancement

Installation

Just integrate the JavaScript file into your code - et voilà.

You may optionally load via NPM or Bower:

$ npm install details-summary-state-change-announcement-polyfill
$ bower install details-summary-state-change-announcement-polyfill

API

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.

Changing the open-state via JavaScript

So if you're doing some fancy stuff like changing this attribute programatically via JavaScript, you'll have to change the aria-expanded-attribute accordingly yourself. Integrating something like a MutationObserver for this special case doesn't convince me at the moment.

Demo

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

Outro

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.

You can’t perform that action at this time.