{"id":69,"date":"2020-11-05T21:59:39","date_gmt":"2020-11-05T21:59:39","guid":{"rendered":"http:\/\/sites.msudenver.edu\/accessible-design\/?page_id=69"},"modified":"2020-11-17T00:31:33","modified_gmt":"2020-11-17T00:31:33","slug":"tab-ordering","status":"publish","type":"page","link":"https:\/\/sites.msudenver.edu\/accessible-design\/about\/navigation\/tab-ordering\/","title":{"rendered":"Tab Order"},"content":{"rendered":"

Following Logical Tab Order<\/span><\/span><\/h2>\n

The tab order is important for proper navigation through a keyboard interface. The keyboard tab order must be coordinated with the structure of the webpage. In Western cultures, this usually means from left to right, top to bottom. In comparison, a sequential tab order would force users to tab through all controls (could be hundreds) before the one that they want. If the tab order is implemented correctly a webpage will read similar to a book to a keyboard user.<\/span><\/p>\n


\nBest Practices<\/span><\/span><\/h2>\n

1. The keyboard navigation order must be logical and intuitive.<\/span><\/p>\n

2. The tab order should follow the visual flow of the page: header first, then main navigation, then page navigation (if present), and finally the footer.<\/span><\/p>\n

3. Adjusting tab order can be done using the tabindex attribute: <\/span><\/p>\n

tabindex= \u201c0\u201d
\nallows 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 on the page. <\/span><\/p>\n

tabindex= \u201c-1\u201d
\n<\/span>removes the element from the navigation sequence, but can be made focusable using javascript. <\/span><\/p>\n

No other tabinex values can be used!<\/span><\/p>\n

 <\/p>\n

Creating\/changing tab order via code<\/span><\/h3>\n

<label><\/span><\/em>
\nFirst in tab index<\/span><\/em>
\n<input type =\u201dtext\u201d><\/span><\/em>
\n<\/label><\/span><\/em><\/p>\n

<div tabindex =\u201d0\u201d><\/span><\/em>
\nSecond in tab order: tabbable because tabindex was added<\/span><\/em>
\n<\/div><\/span><\/em><\/p>\n

<div><\/span><\/em>
\nNot focusable because no tabindex is added to the div<\/span><\/em>
\n<\/div><\/span><\/em><\/p>\n

<button><\/span><\/em>
\nThird in tab order<\/span><\/em>
\n<\/button><\/span><\/em><\/p>\n

<\/h3>\n

Tab Order<\/span><\/h3>\n

The image below shows the correct reading order on a page that has multiple navigation links on the side panels.<\/span><\/p>\n

\"this
Tab order on a webpage<\/figcaption><\/figure>\n","protected":false},"excerpt":{"rendered":"

Following Logical Tab Order The tab order is important for proper navigation through a keyboard interface. The keyboard tab order must be coordinated with the structure of the webpage. In Western cultures, this usually means from left to right, top to bottom. In comparison, a […]<\/p>\n","protected":false},"author":860,"featured_media":0,"parent":20,"menu_order":1,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_exactmetrics_skip_tracking":false,"_exactmetrics_sitenote_active":false,"_exactmetrics_sitenote_note":"","_exactmetrics_sitenote_category":0,"footnotes":""},"class_list":["post-69","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/sites.msudenver.edu\/accessible-design\/wp-json\/wp\/v2\/pages\/69","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/sites.msudenver.edu\/accessible-design\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/sites.msudenver.edu\/accessible-design\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/sites.msudenver.edu\/accessible-design\/wp-json\/wp\/v2\/users\/860"}],"replies":[{"embeddable":true,"href":"https:\/\/sites.msudenver.edu\/accessible-design\/wp-json\/wp\/v2\/comments?post=69"}],"version-history":[{"count":0,"href":"https:\/\/sites.msudenver.edu\/accessible-design\/wp-json\/wp\/v2\/pages\/69\/revisions"}],"up":[{"embeddable":true,"href":"https:\/\/sites.msudenver.edu\/accessible-design\/wp-json\/wp\/v2\/pages\/20"}],"wp:attachment":[{"href":"https:\/\/sites.msudenver.edu\/accessible-design\/wp-json\/wp\/v2\/media?parent=69"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}