'div button accessibility clickable
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!
Solution 1:[1]
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/wai-aria-practices/
Hope this helps!
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|---|
| Solution 1 | jakubde |