We are working on enterprise product, which uses Progress Telerik jQuery KendoUI components extensively purchased by our Company. In which Kendo PanelBar is used in many modules of our product.
Now a days we are working on Accessibility (i.e. keyboard and screen reader) as part of out-of-box feature of our product.
The Kendo Panel Bar has been made accessible so that it can be navigated using the keyboard arrow keys, once it receives focus via Tab Key.
We have created small example on dojo.telerik.com (i.e. which can be referred on https://dojo.telerik.com/@chiragvidani/EBEPUnoY/3) to explain issue faced by us, when accessing via Screen Reader. Please find issues below:
- When the panel bar is initialized in expanded state and on receiving focus by Kendo PanelBar widget, screen reader reads Header as well as Content. Now because of this, content is read twice (i.e. second time when we navigate to content using down arrow keys one at a time). Whereas behavior in collapsed state is as expected.
- Also, to read out the expand/collapse event of PanelBar we need to programmatically remove role attribute from <ul> and <li> tags after initialization of widget.
Secondly when referring WAI-ARIA practices on www.w3.org website (i.e. https://www.w3.org/TR/wai-aria-practices/examples/accordion/accordion.html), we found some differences as explained below:
- Header of PanelBar or Accordion is surrounded by <button> inside <h3> (i.e. reference link is https://www.w3.org/TR/wai-aria-practices/#accordion)
- Content of PanelBar or Accordion has an aria-labelledby attribute with value containing ID of respective Header.
- In WAI-ARIA website PanelBar or Accordion is generated using combination of relevant <div> markup, whereas in Kendo, its generated using <ul> and <li> markup.
- In current implementation of Kendo PanelBar, focus is set to <ul>, whereas in demo of w3.org website its being set to <button> placed as a header in order to restrict reading of list keyword.
Kindly help us with your assistance.