Understanding WCAG SC 2.4.3 Focus Order
2.4.3 Focus Order
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)
Focus Order Transcript
Hello everyone! Today’s video is all about understanding SC 2.4.3 Focus Order, an essential criterion for making your web content accessible to all users. We’re also going to talk about its importance, the benefits, some examples, and how we can fix them.Have you ever been on a website and it seems like the buttons jump around when you try to tap through them? That can be frustrating. This video will explain why websites need a logical order for keyboard navigation and how it benefits everyone.
Why is focus order important? Imagine a website like a conversation. Things need to flow in a way that makes sense, right? Well, focus order is like the order you speak in that conversation. It ensures users who navigate by keyboard, screen readers, or magnifiers access information in a logical way, building a clear picture of the website.
Now let’s explore the benefits of a logical focus order. For people with motor disabilities who navigate using a keyboard, a logical focus order ensures ease of use. Individuals with reading disorders rely on a consistent focus order to prevent disorientation. Blind users utilizing screen readers and keyboard navigation greatly benefit from a logical order to avoid confusion.
Let’s see some examples of a good focus order. In a webpage with a tree of interactive controls, users can navigate using arrow keys. Pressing the right arrow key expands nodes in a logical sequence. On a login page, focus should transition logically between form fields and sections without jumping unexpectedly. When a modal opens, focus should move sequentially within the modal and return to the triggering element upon closure. A page with a mega menu should allow users to navigate between menus using arrow keys while maintaining a single tab focus.
Now let’s see what can go wrong. Imagine a form where the focus jumps between different sections of a form, causing confusion for users. It can be frustrating for anyone.
To ensure compliance, you should follow these guidelines. Avoid using tabindex values greater than one, as they may disrupt the logical tab order. Align focus order with reading order to maintain a logical and intuitive navigation experience. By following these tips, websites can be clear and accessible for everyone, regardless of how they choose to navigate.
Remember, accessibility benefits everyone. This is the end of the video. Thank you for watching! Let us know in the comments if you have any questions. If you like the video, do like and subscribe.
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?
Examples
- 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.
- 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 with 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.
