• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar
Digital A11Y

Digital A11Y

Your Accessibility Partner

  • About
  • Articles
  • WAI-ARIA
  • WCAG
  • Resources
    • Cheat Sheets
    • A11Y Blogs
    • A11Y Toolkit
  • Contact
You are here: Home / Web Accessibility / WCAG / Understanding SC 2.4.3 Focus Order

Understanding SC 2.4.3 Focus Order

Last Modified: March 15, 2018 by Raghavendra Satish Peri Leave a Comment

If a Web page can be navigated sequentially and the navigation sequences affect meaning or operation, focusable components receive focus in an order that preserves meaning and operability. (Level A)

Intent of this Success Criterion

The intent of this Success Criterion is to ensure that when users navigate sequentially through content, they encounter information in an order that is consistent with the meaning of the content and can be operated from the keyboard. This helps the users to construct  a mental model of the content thereby reduces confusion.

Different logical orders

Based on the arrangement of the content, there may be different logical orders that would convey the relationships. For example, when traversing within a table, the order of elements could be determined either by column to column or row to row. One of these will pass this criterion but a mixture of this would fail.

Who benefits?

  • People with motor disabilities who use keyboard would need a logical and usable focus order

People who have reading disorders would need a logical focus order as if the focus jumps or is lost, they would be disoriented

  • People who are blind and who rely on screen reader and keyboard would benefit out of a logical order as if the focus jumps unexpectedly, they would be confused
  • People with low vision who rely on magnifiers would benefit out of this criterion as a logical order would prevent improper association of contents during magnification.

Examples

  1. In a login page, when the focus is forcefully set on the first field, then the subsequent tabs must take the users to the next form controls and then to the next section below or beside the form depending on the logical order of the page. The focus must not jump to the header after the last element of the form.
  2. When a modal opens:
    • The focus is set on the modal (first element)
    • The focus is trapped within the modal (cycles between the elements inside the modal)
    • The focus is returned to the element that triggered the modal
  • On a page with megamenu wit submenus:
  • The users encounter only one tab focus for the entire menu
  • The users use right/left arrow keys to navigate between main menus
  • The users use down/up arrow keys to expand/ a main menu and navigate down the submenus.

 

Points to ponder

  • Avoid using tabindex values that are >1 to manage focus order as they may supersede logical tab order
  • Align the focus order with the reading order as much as possible in order to maintain a logical and intuitive navigation of the content. Too much deviation would put a lot of users with disabilities into confusion

References

Understanding Success Criterion 2.4.3

Share A11Y Love

  • Twitter
  • LinkedIn
  • Facebook
  • Reddit

More Accessibility Articles

Filed Under: WCAG Tagged With: dialog, focus, focus order, keyboard focus, keyboard trap, modal, reading order, WCAG

About Raghavendra Satish Peri

Raghavendra Satish Peri is a digital accessibility evangelist working at Deque Systems as Senior Accessibility Consultant breaking web accessibility & mobile accessibility challenges. He authors an Accessibility Blog & is galvanizing the adoption of accessibility by inspiring the local tech community with meetups and mentorship. He propelled this thought by founding HelloA11y, a community of accessibility professionals, developers and enthusiasts. When away from his computer, Raghava can be found at local cafes & restaurants sampling cuisines, attending local meetups, listening to audio books or writing on his Personal Blog. Raghavendra Satish Peri also helps small business & individuals with Digital Marketing Trainings & SEO consulting… He has been building websites & doing SEO Consulting for more than 14years.

Reader Interactions

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Primary Sidebar

Get Digital A11Y in Your Inbox

Recent A11Y Articles

  • Understanding SC 4.1.3 Status messages
  • Understanding SC 2.5.4 Motion Actuation
  • Understanding SC 2.5.3 Label in Name
  • Knowbility looking for mentors in its Accessible Internet Rally
  • Understanding SC 2.5.2 Pointer Cancellation

Recent Comments

  • Al on Understanding SC 4.1.2 Name, Role, Value
  • Randy on Screen Readers & Browsers! Which is the Best Combination for Accessibility Testing?
  • Raghavendra Satish Peri on Screen Readers & Browsers! Which is the Best Combination for Accessibility Testing?
  • Raghavendra Satish Peri on Understanding SC 1.4.12 Text Spacing
  • Raghavendra Satish Peri on Understanding SC 4.1.2 Name, Role, Value

A11Y Categories

  • Design
  • Events
  • HTML
  • IOS
  • Mobile Accessibility
  • News
  • Tools
  • Uncategorized
  • WAI-ARIA
  • WCAG
  • Web Accessibility

  • Privacy Policy
  • Sitemap
© 2021 Digital A11Y