Accordion Button missing ARIA

  • Resolved Amber Hinds

    (@alh0319)


    1 year, 2 months ago

    Hi! Out of all the Table of Contents plugins that I tested, yours was the most accessible, which is amazing!

    The button to control the accordion is not accessible however and I’m hoping you can fix it. This is the current code:

    <button type="button" class="simpletoc-collapsible">Table of Contents</button>

    This button needs to keep the heading and to have aria-expanded and aria-controls attributes on it like this:

    <h2><button type="button" class="simpletoc-collapsible" aria-expanded="false" aria-controls="simpletoc-content-container">Table of Contents</button></h2>
<div class="simpletoc-content" id="simpletoc-content-container"></div>

    Aria-expanded should turn to true when the TOC is opened. Aria-controls should reference the id of the content container. The H2 should still be present even when this is a button so that it shows in the heading list for screen reader users.

    Here’s an example of an accessible accordion if that’s helpful to you.

    Thank you so much for prioritizing these fixes as I would love to use it on the WordPress Accessibility Day website.

Viewing 11 replies - 1 through 11 (of 11 total)
  • Plugin Author Marc Toensing

    (@marcdk)

    Hi Amber!

    I just pushed V6.0.6 with the AIRA changes. I hope I got it right and did not miss anything.

    — Marc

    Plugin Author Marc Toensing

    (@marcdk)

    resolved

    Thread Starter Amber Hinds

    (@alh0319)

    Thank you so much! I can confirmed that it’s fixed. I appreciate the fast turn around.

    One more fix that should be quick to implement.

    Currently, there is a + and – icon that shows whether the accordion is expanded or collapsed. This is added via .simpletoc-collapsible::after with the CSS content property. I recommend removing the ::after and using a <span> to hold the icon with aria-hidden="true". This will hide the icon to screen readers while still making it available visually.

    In Google Chrome, the + and – icon breaks on to the next line which leads to a confusing experience for screen reader users.

    Thanks.

    Plugin Author Marc Toensing

    (@marcdk)

    hi Alex,

    can you provide an url where it breaks in chrome? And do you also can show me a working example with the span element? I really would like to prevent using dashicons or a custom icon. That is the reason why I used the + as a character.

    Hello @marcdk,

    https://2023.wpaccessibility.day/attendee-information/faq/

    I do not have a link to an example right now. Essentially, you should be able to keep the same + and – symbols, you just need to add them in a <span> so you can hide them to screen readers with aria-hidden="true". Some screen readers will read out “Table of Contents+” while others will not. I personally find it confusing when my screen reader reads out a symbol that is there for visuals alone.

    The other thing you can do is add an aria-label to the button that matches the text of the button text. This will allow screen readers to still have the same text as presented visually but without the symbol included in ::after. For example, aria-label="Table of Contents".

    Thanks.

    Plugin Author Marc Toensing

    (@marcdk)

    Hi, the challenge for with this is that I add the “icon” with “after” and “content”. I am uncertain if the content with “after” applied to a span that is hidden with “aria-hidden” will really be hidden. And the “after” makes this work without svg or any other icon technique on almost any platform. Basically it is this example with modified JavaScript: https://www.w3schools.com/howto/howto_js_accordion.asp

    So it would be great if there were an example that works with screen readers because I can’t test this like Amber provided. And I introduced a few bugs with the first attempt to implement the correct aria labels amber mentioned. I would like to prevent it this time.

    Plugin Author Marc Toensing

    (@marcdk)

    Maybe this could be a solution? Do you know if this works for screen readers? =)

    @media reader, speech, aural {
    .required:after {
        display: none;
        visibility: hidden;
    }
}
    Plugin Author Marc Toensing

    (@marcdk)

    enough talk from my side: a new version is in the making that will solve this.

    Plugin Author Marc Toensing

    (@marcdk)

    Please update to 6.0.10 for a fixed version to hide the icon for screen readers using the <span> technique.

    @marcdk Amazing! Working perfectly now. Thanks.

Viewing 11 replies - 1 through 11 (of 11 total)
  • The topic ‘Accordion Button missing ARIA’ is closed to new replies.

Tags