< Back to Demos | Learn more at PaulJAdam.com >

Autofocus vs Tabindex

http://pauljadam.com/demos/autofocusvstabindex.html

This example is to test whether HTML5's autofocus attribute is better to use for accessibility than tabindex=1 if you're trying to start the user at a particular input on the page.

One reason autofocus is better than tabindex is with tabindex=1 you have to set a numbered tabindex value for every single focusable element on the page if you want it to be logical. So you would have to set tabindex=1 on the buy our product button and tabindex=2 on the try a demo button, however, with autofocus on the first button the 2nd button becomes the next focusable element by default. If you only set tabindex=1 on the first button then the next focusable item would be the back to demos link and not the 2nd button.

Two Fake Call to Action Buttons





Positive Tabindex Fail Demo