From the desk of Lyssa Rowan, B.A., Web Developer
Many people navigate websites with a keyboard or assistive technology that uses keyboard controls as opposed to a mouse. The most basic way to navigate through the links on a site is through the use of the tab key. As a best practice, the tab order of the site should match the visual order of the page. In other words, as you hit the tab key to move through a page, it should follow the way you would visually read the page, left to right and top to bottom.
By default, the tab order of the page follows the underlying code of the page. For example, HTML layout of the page can have all of the navigation and footer code before the main content of the page. Visually the page can be made to look just like any other but the keyboard user will need to tab through everything, including the footer, before being able to navigate the main content.
Don't get us wrong - writing your code this way is perfectly valid! It might be easier to redesign your site so that the code order reflects the visual order, but if you can't this attribute will greatly enhance your site's accessibility.
- tabindex="0" places the element in the normal navigation order. Generally you will use this if you need to make something focusable that normally wouldn't be (a div, for example).
- tabindex="-1" takes the element completely out of the focusable navigation. You only want to do this if you need to be able to programmatically focus the element but not manually.
- If you set tabindex equal to another number, it will make that element focusable in that specific numerical order.
Tabindex is a powerful tool, but should be used only when necessary. As with any design or coding decision, make sure you test it to make sure it works as it should and minimizes any unexpected behavior.
