Skip to content

Instantly share code, notes, and snippets.

@nepsilon

nepsilon/what-you-should-know-about-tabindex.md

Created September 13, 2016 09:31
Show Gist options
  • Star 10 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save nepsilon/4af89b914add3284e5a70c62311b008d to your computer and use it in GitHub Desktop.
Save nepsilon/4af89b914add3284e5a70c62311b008d to your computer and use it in GitHub Desktop.
Download ZIP
What you should know about tabindex — First published in fullweb.io issue #65
Raw
what-you-should-know-about-tabindex.md

What you should know about tabindex

tabindex is an HTML core global attribute.

With it you can control in what order the elements get the focus, when the user presses the TAB key. You can also prevent an element to gain focus through the TAB key.

Typical example:

  1. We have a login form
  2. The username field takes the autofocus
  3. Hitting TAB will put the focus in password field
  4. Hitting TAB again will focus the login button, skipping the reset password link
<form method='post'>
  <input type='text' name='username' tabindex='1' autofocus />
  <input type='password' name='password' tabindex='2' />
  <a href='#' tabindex='4'>reset password</a>
  <button tabindex='3'>Log in</button>
</form>

To prevent an element to gain focus when hitting TAB, give tabindex a value of -1.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment