Last active
January 17, 2017 05:03
-
-
Save greggnakamura/5a6f537d1025ce76a0235c9622fe9e0a to your computer and use it in GitHub Desktop.
Accessibility: tabindex attribute
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset="utf-8"> | |
| <meta name="viewport" content="width=device-width"> | |
| <title>JS Bin</title> | |
| </head> | |
| <body> | |
| <!-- Controlling focus with tabindex -- A11ycasts #04 --> | |
| <!-- https://www.youtube.com/watch?v=Pe0Ce1WtnUM&index=8&list=PLNYkxOF6rcICWx0C9LVWWVqvHlYJyqw7g --> | |
| <h1>Tabindex Attribute</h1> | |
| <div>Not in tab order</div> | |
| <div tabindex="0">In tab order<sup>1</sup></div> | |
| <div tabindex="0">In tab order again</div> | |
| <div tabindex="-1">Not in tab order (but is focusable with JS)<sup>2</sup></div> | |
| <div tabindex="5">Ahead of everything in tab order<sup>3</sup></div> | |
| <button>Focusable</button> | |
| <hr> | |
| <h2>Notes</h2> | |
| <ul> | |
| <li><strong>**</strong>Try to always use native elements; focus behavior will just work out-of-the-box</li> | |
| <li><em>1.</em> If you must override, use `tabindex` attribute</li> | |
| <li><em>2.</em> Focus with JS (uncomment JS below)</li> | |
| <li><em>3.</em> Tabindex > 0 will be on top of the tab order (don't use, considered an anti-pattern; bad user experience; not guaranteed screenreaders will follow indexing rules)</li> | |
| <li><strong>**</strong>Higher in tab order === Move it earlier in the DOM</li> | |
| </ul> | |
| <script> | |
| // document.querySelector('[tabindex="-1"]').focus(); | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment