WebAIM: Keyboard Accessibility – Tabindex

Keyboard Accessibility
Tabindex

Article Contents

  • Page 1: Keyboard Accessibility
  • Current page: Page 2: Tabindex

  • Overview
  • The tabindex Attribute
  • 0 and -1 values
  • Page 3: Accesskey
  • Overview

    The tabindex attribute has three distinct uses:

    • tabindex=”1″ (or any number greater than 1) defines an explicit tab or keyboard navigation order. This must always be avoided.
    • tabindex=”0″ allows elements besides links and form elements to receive keyboard focus. It does not change the tab order, but places the element in the logical navigation flow, as if it were a link/button on the page.
    • tabindex=”-1″ allows things besides links and form elements to receive “programmatic” focus, meaning focus can be set to the element through scripting.

    The tabindex Attribute

    The tabindex attribute of 1+ explicitly defines the navigation order for focusable elements (typically links and form controls) within a page. It can also be used to define whether elements should be focusable or not.

    Important

    tabindex values of 1+ must be avoided. These elements will receive keyboard focus before elements with no tabindex value (or tabindex=”0″) resulting in a navigation order that is different from the visual and/or screen reader order. Instead of using tabindex, simply adjust the page’s source code order to support a [...]

    Read article at webaim.org

    Article Taxonomies

    Categories:
    Fatal error: Uncaught Error: Object of class WP_Error could not be converted to string in /home/webable/www/www/wp-content/themes/webable/content-mcm.php:65 Stack trace: #0 /home/webable/www/www/wp-includes/template.php(812): require() #1 /home/webable/www/www/wp-includes/template.php(745): load_template('/home/webable/w...', false, Array) #2 /home/webable/www/www/wp-includes/general-template.php(206): locate_template(Array, true, false, Array) #3 /home/webable/www/www/wp-content/themes/webable/single-mcm_article.php(15): get_template_part('content-mcm') #4 /home/webable/www/www/wp-includes/template-loader.php(106): include('/home/webable/w...') #5 /home/webable/www/www/wp-blog-header.php(19): require_once('/home/webable/w...') #6 /home/webable/www/www/index.php(17): require('/home/webable/w...') #7 {main} thrown in /home/webable/www/www/wp-content/themes/webable/content-mcm.php on line 65