Accordion doesn’t work with screen reader

  • anphira

    (@anphira)


    2 years, 6 months ago

    I made a test site using your test site tool.

    I deleted the existing rows, then added a spacer block and an accordion block. I picked the accordion with the blue underlines.

    I set the button to have a h3. I set it to behave like toggles (so each panel opens & closes independently). I set to plus and minus icons and the icons on the left.

    I added titles and paragraphs to both accordions.

    I then tested with Mac OS Voiceover and Safari browser.

    The accordion did have a <button> and <h3> which was good. Unfortunately, I could not access any of the accordion contents with a screen reader. Also, I got stuck in an infinite loop (normally pressing the down arrow on my keyboard takes me to the next element (ie: I would go to the footer). Instead it kept cycling through the accordion titles.

    This was a rather unpleasant experience with a screen reader. I have documented it in a video recording for you. I show the HTML markup so you can see exactly what was outputted by Kadence in case you try to duplicate the settings.

    https://komododecks.com/recordings/9UlhZzCuKlKGalz4SPMA

Viewing 6 replies - 1 through 6 (of 6 total)
  • Plugin Contributor Gilbert Hernandez

    (@ghernkadence)

    2 years, 6 months ago

    Hello @anphira

    I tried to access the content of an accordion using the tab buttons, but I had the same experience as you. Nonetheless, the screen reader I used has access to the content via the keyboard arrow keys. I use Window’s Narrator. Does your screen reader let you use the arrow keys to access the content? Here is a video of my experience.

    https://share.zight.com/xQuNYPbW

    However, I will inform the development team for a review and request that the content be accessible via the tab buttons.

    Thread Starter anphira

    (@anphira)

    2 years, 6 months ago

    I tested with Mac OS Voiceover and Safari browser.

    Normally the arrow keys get me to the next piece of content. Neither the tab key nor the arrow keys got me to the content.

    Plugin Support karlalevelup

    (@karlalevelup)

    2 years, 6 months ago

    Hi there!

    I’m sorry for the delay in getting back to you.

    I tried adding the Accordion block on my page and activated Mac Voiceover. Once I go to the Safari with the page open, the Skip to content button will be “hovered” already.

    Also, I can go to the other focusable elements using the arrow keys. The Accordion titles were also recognized by the voiceover. Here’s a screen recording of my computer – https://share.zight.com/eDu0yx1Q

    I can confirm that I wasn’t able to go inside the Accordion contents with either tabs or arrow keys. I’ll create a report for this in our internal tool.

    Once I have more information about the issue or news of any fix for this, I’ll update this thread.

    Let us know if we can help you with anything else.

    Regards,
    Karla

    Plugin Contributor Gilbert Hernandez

    (@ghernkadence)

    2 years, 6 months ago

    Hello @anphira,

    A fix for accordion accessibility was released in Kadence Blocks v3.1.22. Could you check to see if that solves this issue as well?

    Thread Starter anphira

    (@anphira)

    2 years, 5 months ago

    @ghernkadence it did not work when I had “Panes close when another opens” turned on (it’s turned on by default). When I turned that to OFF, I was able to get into the accordion, although not as easily as I normally would be able to.

    There is a keyboard trap on just using the down arrow with the accordion titles. The down arrow (which is how I usually navigate with voiceover) traps me on the accordion titles.

    I have to use the right arrow on the last title then the down arrow to exit the accordion area. Otherwise, I’m completely trapped there.

    It’s your javascript. I tried disabling javascript and navigated just fine.

    recording of my experience: https://komododecks.com/recordings/5cS78DKP5wJBUyFkpL6t

    Plugin Contributor Gilbert Hernandez

    (@ghernkadence)

    2 years, 5 months ago

    Hello @anphira,

    Thanks for the video. I’ve provided it to the developers as they work on a fix for this issue. While there was an accessibility update for the accordion block, it did not change this particular behavior.

Viewing 6 replies - 1 through 6 (of 6 total)

The topic ‘Accordion doesn’t work with screen reader’ is closed to new replies.