{"id":310,"date":"2018-12-10T16:11:05","date_gmt":"2018-12-10T16:11:05","guid":{"rendered":"https:\/\/pressbooks.library.ryerson.ca\/wafd\/?post_type=chapter&p=310"},"modified":"2022-12-16T17:00:38","modified_gmt":"2022-12-16T17:00:38","slug":"using-tabindex","status":"publish","type":"chapter","link":"https:\/\/pressbooks.library.torontomu.ca\/wafd\/chapter\/using-tabindex\/","title":{"raw":"Using Tabindex","rendered":"Using Tabindex"},"content":{"raw":"As you may know, the HTML tabindex<\/code> attribute is a way to order the path the cursor takes as users use the Tab key to navigate through a website or web application. In general, however, you want to avoid using tabindex in this way, particularly when it disrupts the default tab order, which may end up creating confusion when the cursor does not follow an expected path (i.e., left to right, top to bottom). That\u2019s not to say don\u2019t ever use them, but be careful.\r\n\r\nWith HTML5 and the introduction of WAI-ARIA, tabindex=\"0\"<\/code> is added to make it possible for developers to add keyboard accessibility to an element that would not normally have keyboard functionality. For example, it might be used to make a <div><\/code> focusable. Likewise, tabindex=\"-1\"<\/code> is added to remove keyboard accessibility from an element. The two are likely to be used with scripting to dynamically add and remove keyboard access to elements when focus needs to be strategically placed within a widget or web application. When the tabindex<\/code> attribute is used in this way, it is referred to as a roving tabindex<\/code>.\r\n
\r\n\r\nTry This:<\/strong> Take a look at the tab panels throughout the Showcase site to see how the tabs in the tabpanels toggle between values \u201c-1\u201d and \u201c0\u201d to control which tab has focus, using your browser's Inspect feature. This demo works better on a wide screen, before responsiveness kicks in. Either reduce the zoom level, or drag your browser window wider until the menu appears at the side, instead of above the content.\r\n\r\nOpen demo in a new window.<\/a>\r\n\r\n<\/div>\r\nYou can also use tabindex=\"0\"<\/code> in a static way when context is needed to describe how to use a menu, for instance. A <div><\/code> can be wrapped around the menu, given tabindex=\"0\"<\/code> to make it focusable, so, when a user navigates to the <div><\/code>, it announces instructions for using the keyboard to navigate within the menu. The following example demonstrates using tabindex<\/code>, along with aria-label<\/code>, to provide context information. If you navigate through the Showcase site above with ChromeVox, you\u2019ll notice this strategy with the side menu, announcing how to operate the menu with a keyboard.\r\n
[h5p id=\"10\"]<\/div>","rendered":"

As you may know, the HTML tabindex<\/code> attribute is a way to order the path the cursor takes as users use the Tab key to navigate through a website or web application. In general, however, you want to avoid using tabindex in this way, particularly when it disrupts the default tab order, which may end up creating confusion when the cursor does not follow an expected path (i.e., left to right, top to bottom). That\u2019s not to say don\u2019t ever use them, but be careful.<\/p>\n

With HTML5 and the introduction of WAI-ARIA, tabindex=\"0\"<\/code> is added to make it possible for developers to add keyboard accessibility to an element that would not normally have keyboard functionality. For example, it might be used to make a <div><\/code> focusable. Likewise, tabindex=\"-1\"<\/code> is added to remove keyboard accessibility from an element. The two are likely to be used with scripting to dynamically add and remove keyboard access to elements when focus needs to be strategically placed within a widget or web application. When the tabindex<\/code> attribute is used in this way, it is referred to as a roving tabindex<\/code>.<\/p>\n

\n

Try This:<\/strong> Take a look at the tab panels throughout the Showcase site to see how the tabs in the tabpanels toggle between values \u201c-1\u201d and \u201c0\u201d to control which tab has focus, using your browser’s Inspect feature. This demo works better on a wide screen, before responsiveness kicks in. Either reduce the zoom level, or drag your browser window wider until the menu appears at the side, instead of above the content.<\/p>\n

Open demo in a new window.<\/a><\/p>\n<\/div>\n

You can also use tabindex=\"0\"<\/code> in a static way when context is needed to describe how to use a menu, for instance. A <div><\/code> can be wrapped around the menu, given tabindex=\"0\"<\/code> to make it focusable, so, when a user navigates to the <div><\/code>, it announces instructions for using the keyboard to navigate within the menu. The following example demonstrates using tabindex<\/code>, along with aria-label<\/code>, to provide context information. If you navigate through the Showcase site above with ChromeVox, you\u2019ll notice this strategy with the side menu, announcing how to operate the menu with a keyboard.<\/p>\n

\n
\n
<\/div>\n<\/div>\n<\/div>\n","protected":false},"author":100,"menu_order":5,"template":"","meta":{"pb_show_title":"on","pb_short_title":"","pb_subtitle":"","pb_authors":[],"pb_section_license":""},"chapter-type":[],"contributor":[],"license":[],"class_list":["post-310","chapter","type-chapter","status-publish","hentry"],"part":31,"_links":{"self":[{"href":"https:\/\/pressbooks.library.torontomu.ca\/wafd\/wp-json\/pressbooks\/v2\/chapters\/310","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/pressbooks.library.torontomu.ca\/wafd\/wp-json\/pressbooks\/v2\/chapters"}],"about":[{"href":"https:\/\/pressbooks.library.torontomu.ca\/wafd\/wp-json\/wp\/v2\/types\/chapter"}],"author":[{"embeddable":true,"href":"https:\/\/pressbooks.library.torontomu.ca\/wafd\/wp-json\/wp\/v2\/users\/100"}],"version-history":[{"count":16,"href":"https:\/\/pressbooks.library.torontomu.ca\/wafd\/wp-json\/pressbooks\/v2\/chapters\/310\/revisions"}],"predecessor-version":[{"id":2002,"href":"https:\/\/pressbooks.library.torontomu.ca\/wafd\/wp-json\/pressbooks\/v2\/chapters\/310\/revisions\/2002"}],"part":[{"href":"https:\/\/pressbooks.library.torontomu.ca\/wafd\/wp-json\/pressbooks\/v2\/parts\/31"}],"metadata":[{"href":"https:\/\/pressbooks.library.torontomu.ca\/wafd\/wp-json\/pressbooks\/v2\/chapters\/310\/metadata\/"}],"wp:attachment":[{"href":"https:\/\/pressbooks.library.torontomu.ca\/wafd\/wp-json\/wp\/v2\/media?parent=310"}],"wp:term":[{"taxonomy":"chapter-type","embeddable":true,"href":"https:\/\/pressbooks.library.torontomu.ca\/wafd\/wp-json\/pressbooks\/v2\/chapter-type?post=310"},{"taxonomy":"contributor","embeddable":true,"href":"https:\/\/pressbooks.library.torontomu.ca\/wafd\/wp-json\/wp\/v2\/contributor?post=310"},{"taxonomy":"license","embeddable":true,"href":"https:\/\/pressbooks.library.torontomu.ca\/wafd\/wp-json\/wp\/v2\/license?post=310"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}