Accessibility and accordions

  • Hi Matt — we noticed a small accessibility issue with tabs and accordions. When headers are used on a page they are supposed to be hierarchical so screen readers can get a semantic overview of the page content. It would be a huge help if Tabs and Accordions let authors specify what header level to use (h1,h2,h3, h4, etc) in the markup.

    I think you currently make all of them H3s. I think you would have to allow an additional shortcode parameter — “header” to let people specify what to use. The jQuery-ui docs let you specify what header to use:

    https://api.jqueryui.com/accordion/#option-header

    I’m not sure how this would affect styling (maybe it is too much work). But since many sites are now required by law to make accessible web content, it would be worth looking at. There are other other attributes that could be added to make tabs and accordions even more accessible:

    https://www.w3.org/TR/wai-aria-practices-1.1/examples/accordion/accordion.html

    Thanks for creating such a great plugin that has helped a lot of sites.

    All the best,

    Rod

Viewing 1 replies (of 1 total)
  • Plugin Author Matt Lowe

    (@squelch)

    Hi Rod,

    I think you currently make all of them H3s.

    That’s correct. I don’t believe the jQuery UI parameter you linked to existed at the time of the development of this plugin.

    I’m not sure how this would affect styling (maybe it is too much work)

    That’s the biggest concern. Adding the option to change the heading level would be fairly straightforward, but I don’t know how well the styling would work without trying it.

    Another other issue is that I’ve tried to keep things consistent between horizontal and vertical tabs even though they are built on completely different libraries… but looking at the horizontal tabs library I doubt it would be possible to add in a similar option.

Viewing 1 replies (of 1 total)
  • The topic ‘Accessibility and accordions’ is closed to new replies.

Tags