div button accessibility clickable

1
votes

I have a div element (which has another div inside it) which currently has role="button". This element is under the body, and this creates a violation when auditing with certain accessibility assessment tools (DAP specifically).

The reason for the violation: "All content must reside within a WAI-ARIA landmark or labelled region role"

When using roles other than "button" it becomes unclickable when using the JAWS screen-reader.

I've tried giving a role="complementary" the main div, and role="button" to its child div - this made the entire element unclickable using the keyboard.

Any suggestion will be most appreciated.. Thanks!

1
accessibilitywai-ariascreen-readersjaws-screen-readerwcag2.0
Could you post your code or a link to a test page please ? - QuentinC
@QuentinC <div id="ID1" class="Class1" role="button"> <div class="Class2">Click Here</div> </div>. This is the code that creates the above violation. When trying to change the role of the main Div the element becomes unclickable. - Tal Dwek
Also, using HTML tags other than div is not an option.. - Tal Dwek
When saying "the element becomes unclickable" - this is only true when using the keyboard (mouse click still works), and using NVDA. - Tal Dwek
OK. Try tabindex=0. But: "Also, using HTML tags other than div is not an option..." – => why ? You can do what you want with CSS. - QuentinC

1 Answers

0
votes

The div where you are using the role as complimentary should have a tabindex of -1. The button you want to focus to should have a tabindex of 0/1. This will make sure that the accessibility readers will focus on this component and when they do, it will select the button.

Here is a link that may help: https://www.w3.org/TR/2009/WD-wai-aria-practices-20090224/

Hope this helps!