Some people don’t use a mouse or touchscreen to interact with your website. There can be many reasons for this from accessibility needs to hardware limitations to personal preference.
Making sure your website is navigable by a keyboard user will ensure that people who use your website will have a good time. People who enjoy using your website will spend more time on it, come back to it and tell their friends and co-workers about it.
Tab Order
The tab order is the order in which different parts of your website get visited when someone presses the `tab` key outside of an input field.
By default, the browser will order elements by where they appear in HTML. If you have elements you need to include, or exclude, from being tab-able, you can add an attribute to your HTML elements.
Here is a handy graphic to show the three ways we can impact tab order.
<div tabindex="0">My content</div>
tabindex="0" will tell the browser “give this element tab focus, but use the default ordering.”
<input tabindex="-1" />
tabindex="-1" will tell the browser “remove tabbing focus from this element.” You almost never want to do this. An element that cannot be tabbed through will likely not be usable by anyone using accessibility to navigate your site.
If you need to use a sort order that is different from the browser default you can apply tabindex="2" to rank the order elements will be in focus, going from the smallest number to largest.
Testing Tab Order
The quickest way to test something is to load up the page and start navigating, using only your keyboard. Try and perform certain actions and see if the tab order is efficient and makes sense.
Automating Tab Order Tests
You might need to run the same tests over and over on the same page, normally between small changes to make sure nothing brakes.
The steps to be repeated are:
- Load the webpage
- Without using the mouse hit tab and manually verify you end up where you expect
- Take note
- Fix
- Repeat
With TextExpander we can automate tabbing through the fields of website. Here’s an example of a “snippet” you can use, that is, a small bit of text you type, and then the resulting text and actions. In this case, the snippet will tab between 3 fields and fill each one out.
;tab
tab Firstname tab Secondname tab test@email.com
When we run this, we can check if the output is what we expect.
If the output has been entered in the places we expected, we know the tab order is correct.
