Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to debug tabindex

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?

like image 905
Artsiom Anisimau Avatar asked Aug 09 '12 09:08

Artsiom Anisimau


People also ask

What does Tabindex =- 1 mean?

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.

How do I check tab order?

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.


2 Answers

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.

like image 53
Cristophs0n Avatar answered Nov 03 '22 23:11

Cristophs0n


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:

enter image description here

like image 38
Alex Avatar answered Nov 04 '22 01:11

Alex