Understanding WCAG SC 2.4.3 Focus Order
Version and Level: 2.1/2.2 (Level A)

WCAG SC 2.4.3 Focus Order ensures 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. All content presented visually to users should follow the same order when navigated by a keyboard. This criterion helps users construct a mental model of the content, reducing confusion and improving usability.

Benefits:

  1. Improved Navigation for Keyboard Users: Ensures that users who rely on keyboard navigation can move through content logically and meaningfully.
  2. Enhanced Usability for Screen Reader Users: Helps users who are blind or visually impaired understand the content structure and navigate without confusion.
  3. Reduced Cognitive Load: Assists users with cognitive disabilities by providing a predictable and intuitive focus order.

Main Objective:

To ensure that components which can receive focus on a web page receive focus in an order that preserves meaning and operability, especially when navigation sequences affect the meaning or operation of the content. Web developers or authors sometimes create a page with components that visually make sense to some users. This might not be semantically correct and can disrupt the natural tab order of the page, causing a disrupted navigation experience for some users.

Best Practices:

  • Avoid using tabindex values greater than 1: Avoid using tabindex values greater than 1 to manage focus order, as they can disrupt the logical flow.

  • Align focus order with reading order: Align the focus order with the reading order to maintain logical and intuitive navigation.

  • Ensure sequential focus in sections:Ensure that interactive elements within sections receive focus sequentially, without unexpected jumps.

  • Manage focus in pop-ups, modals, and dialogs: In pop-ups, modals, dialogs, and dropdown menus, ensure that the element is located near the trigger element in the DOM. Additionally, add a script that moves the focus to the first interactive element of the dialog and traps the focus order within the dialog. Provide a mechanism to return to the trigger element, such as using the Escape key.

Examples & Explanation:

Example: Focus Order in a Navigation Menu with Dropdowns

What Should Be Avoided

In a navigation menu, dropdown menus are hidden using CSS. No script is provided for keyboard users to open the dropdown menu. As a result, users navigating with a keyboard will miss the elements within the dropdown. Sighted users can open the dropdown menu by mouse click or hover, but this functionality is not accessible to keyboard users. HTML Example (Incorrect implementation):

HTML/CSS

              <!DOCTYPE html>
              <html lang="en">
              <head>
                  <meta charset="UTF-8">
                  <meta name="viewport" content="width=device-width, initial-scale=1.0">
                  <title>Navigation Menu</title>
                  <style>
                      .dropdown-content {
                          display: none;
                      }
                      .dropdown:hover .dropdown-content {
                          display: block;
                      }
                  </style>
              </head>
              <body>
                  <nav>
                      <ul>
                          <li><a href="#">Home</a></li>
                          <li class="dropdown"><a href="#">Services</a>
                              <ul class="dropdown-content">
                                  <li><a href="#">Web Design</a></li>
                                  <li><a href="#">SEO</a></li>
                              </ul>
                          </li>
                          <li><a href="#">Contact</a></li>
                      </ul>
                  </nav>
              </body>
              </html>

Explanation:In a navigation menu, dropdown menus are hidden using display:none. No script is provided for keyboard users to open the dropdown menu. As a result, users navigating with a keyboard will miss the elements within the dropdown. Sighted users can open the dropdown menu by mouse click or hover, but this functionality is not accessible to keyboard users.

What Should Be Done

HTML/CSS

              <!DOCTYPE html>
              <html lang="en">
              <head>
                  <meta charset="UTF-8">
                  <meta name="viewport" content="width=device-width, initial-scale=1.0">
                  <title>Navigation Menu</title>
                  <style>
                      .dropdown-content {
                          display: none;
                          position: absolute;
                          background-color: #f9f9f9;
                          box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
                          z-index: 1;
                      }
                      .dropdown-content a {
                          color: black;
                          padding: 12px 16px;
                          text-decoration: none;
                          display: block;
                      }
                      .dropdown-content a:focus {
                          background-color: #f1f1f1;
                      }
                      .dropdown:hover .dropdown-content,
                      .dropdown:focus-within .dropdown-content {
                          display: block;
                      }
                  </style>
              </head>
              <body>
                  <nav>
                      <ul>
                          <li><a href="#">Home</a></li>
                          <li class="dropdown">
                              <a href="#" id="services-trigger">Services</a>
                              <ul class="dropdown-content" id="services-dropdown">
                                  <li><a href="#" tabindex="0">Web Design</a></li>
                                  <li><a href="#" tabindex="0">SEO</a></li>
                              </ul>
                          </li>
                          <li><a href="#">Contact</a></li>
                      </ul>
                  </nav>
                  <script>
                      document.getElementById('services-trigger').addEventListener('keydown', function(event) {
                          if (event.key === 'ArrowDown') {
                              event.preventDefault();
                              document.getElementById('services-dropdown').style.display = 'block';
                              document.querySelector('#services-dropdown a').focus();
                          }
                      });
              
                      document.querySelectorAll('#services-dropdown a').forEach(function(link) {
                          link.addEventListener('keydown', function(event) {
                              if (event.key === 'Escape') {
                                  document.getElementById('services-dropdown').style.display = 'none';
                                  document.getElementById('services-trigger').focus();
                              }
                          });
                      });
              
                      // Trap focus within the dropdown
                      const dropdownLinks = document.querySelectorAll('#services-dropdown a');
                      dropdownLinks.forEach((link, index) => {
                          link.addEventListener('keydown', (event) => {
                              const firstLink = dropdownLinks[0];
                              const lastLink = dropdownLinks[dropdownLinks.length - 1];
              
                              if (event.key === 'Tab') {
                                  if (event.shiftKey) { // Shift + Tab
                                      if (document.activeElement === firstLink) {
                                          event.preventDefault();
                                          lastLink.focus();
                                      }
                                  } else { // Tab
                                      if (document.activeElement === lastLink) {
                                          event.preventDefault();
                                          firstLink.focus();
                                      }
                                  }
                              }
                          });
                      });
                  </script>
              </body>
              </html>

Explanation:In this correct implementation, the dropdown menu will be automatically opened once the focus arrives on the trigger element. Keyboard users can open the dropdown menu by pressing the down arrow key when the "Services" link is focused. The focus then moves to the first element in the dropdown. Pressing the Escape key hides the dropdown and returns the focus to the "Services" link. For sighted users, the dropdown menu can also be opened by mouse click or hover. This approach ensures that all users, including those using keyboards, can navigate the dropdown menu effectively.

Next Up

Enhance your understanding with SC 2.4.4 - Link Purpose (In Context). Learn to make link purposes clear for all users.

Go to SC 2.4.4