Menu icon Foundation
Accessibility issue with Accordion-menu

Hi,

NVDA screen reader is not able to read accordion-menu element.

I have checked on foundation document sample for accordion menu.

Link: https://foundation.zurb.com/sites/docs/accordion-menu.html

There also NVDA screen reader is not reading  menu element.

I am using foundation 6. I searched and found that there is something wrong with role attribute tree or something.

accordion-menuaccessibilityfoundation-6role

Hi,

NVDA screen reader is not able to read accordion-menu element.

I have checked on foundation document sample for accordion menu.

Link: https://foundation.zurb.com/sites/docs/accordion-menu.html

There also NVDA screen reader is not reading  menu element.

I am using foundation 6. I searched and found that there is something wrong with role attribute tree or something.

mohammadkia 12 months ago

Hi one explain more 
The information you said is not enough

Ankur Kiyada 12 months ago

See, this code from foundation documentation.

 

<ul class="vertical menu accordion-menu" data-accordion-menu> <li> <a href="#">Item 1</a> <ul class="menu vertical nested"> <li><a href="#">Item 1A</a></li> <li><a href="#">Item 1B</a></li> </ul> </li> <li><a href="#">Item 2</a></li> </ul>

 

Everything is working fine.

But when it's come to accessibility,

this menu is not read by screen reader tools(NVDA).

 

I tried this tool in foundation documentation page where accordion-menu's demo is given. There also it is not read by screen reader.

 

aliyahbrown 12 months ago

Through your pen I found the problem up interesting! I believe there are many other people who are interested in them just like me! How long does it take to complete this article? I hope you continue to have such quality articles to share with everyone! I believe a lot of people will be surprised to read this article! hotmail sign in

 

Nikki Parker 11 months ago

I was struggling with this same problem.  I support a website that is using Foundation 6 accordion, but the web accessibility tester (IA Toolkit) was flagging the accordion with the following error message:

  • pseudo content is not hidden - add an aria-label to the clickable item to override the link text, or use a character in the Private Use Area

I created a CodePen to suss it out: https://codepen.io/chnikki/pen/zapByj

To fix it, you need to add an aria-label to link in the accordion drawer.  More specifically - in example code, added:

aria-label="Accordion 1"

Ex:

<li class="accordion-item is-active" data-accordion-item>
    <a href="#" class="accordion-title" aria-label="Accordion 1">Accordion 1</a>
    <div class="accordion-content" data-tab-content>****** this is the text part, I would start in the open state, due to using the `is-active` state class. *****
    </div>
  </li>

Now when I used NVDA, it now announces what's in the "aria-label" and it also passes the accessibility tester too.

 

Peter Weil 3 months ago

 When role="tablist' is assigned to the <ul>, all of the child <li>s are rendered invalid because they are not wrapped in a <ul> or <ol>. Accordions don't need any special roles or lists in the html; just do a series of show/hides a la Heydon Pickering with headings, buttons, and block elements, using aria-expanded, etc.