WCAG 2.0 AA compliance requires, among other things, full support for keyboard only navigation of a web site. I am utilizing tabindex and role attributes to provide tab-key navigation to user. While implementing the accessibility features I came across following problem:
https://jsfiddle.net/fn9wvp1s/1/
<div id="app">
<div>
<button tabindex="1"
onclick="console.log('clicked')">
button
</button>
<div tabindex="2"
onclick="console.log('clicked')"
class="div-button"
role="button">
selectable div
</div>
</div>
</div>
According to the MDN:
On its own, role="button" can make any element (e.g.
<p>
,<span>
or<div>
) appear as a button control to a screen reader
following warning specifically describes, that the attribute does not provide any built-in keyboard functionality:
Warning: Be careful when marking up links with the button role. Buttons are expected to be triggered using the
Space
orEnter
key, while links are expected to be triggered using theEnter
key. In other words, when links are used to behave like buttons, addingrole="button"
alone is not sufficient. It will also be necessary to add a key event handler that listens for theSpace
key in order to be consistent with native buttons.
In other words - where example provided describes <a>
tag behavior - role='button'
does not have this funcitonality:
document.querySelectorAll('[role="button"]').forEach(function(button) {
button.addEventListener('keydown', function(evt) {
if(evt.keyCode == 13 || evt.keyCode == 32) {
button.click();
}
});
});
As it'd exceed mentioned attribute's functionality, which is for screen readers purpose only.