Are there any tools or plugins for web browser to debug tabindex
functionality? It seems that tabindex
attributes are correct but it behaves not as expected. Or do I do something wrong?
A negative value (usually tabindex="-1" ) means that the element is not reachable via sequential keyboard navigation, but could be focused with JavaScript or visually by clicking with the mouse. It's mostly useful to create accessible widgets with JavaScript.
To check if your application's tab order is logical, try tabbing through your page. The order in which elements are focused should aim to follow the DOM order. In general, focus should follow reading order, moving from left to right, from the top to the bottom of your page.
You can use the developer tools in Chrome, Firefox, and IE by pressing F12 and navigating to the console tab and then insert the following:
document.addEventListener('keyup', function() {console.log(document.activeElement)})
Now when you tab through the focusable items the activeElement
including its tabindex
, if you have one set, will be printed to the console.
If you use FireFox, get the Webdeveloper toolbar. You can display the tab index, this may help you debug.
And here's where to find that option:
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With