Smooth Keyboard Navigation! The Importance of Focus Order in Web Accessibility

*This article is an English translation of a Japanese article.

Introduction

One of the fundamental aspects of web accessibility is the focus order. This refers to the logical and intuitive sequence in which interactive elements (such as links, buttons, and form fields) are focused when users navigate a webpage using only a keyboard. The focus order is critical for users with disabilities and those who cannot use a mouse, as it significantly impacts their user experience. In this article, we will explain the importance of focus order and how to optimize it for a better web experience.

What Is Focus Order?

Focus order refers to the sequence in which interactive elements receive focus as a user navigates a webpage by pressing the Tab key. For example, form fields, links, and buttons are focused one by one as users press Tab, allowing them to interact with the elements using a keyboard.

When focus order is properly set, users can navigate the site intuitively. However, if the focus moves in a disorganized manner, users may become confused, leading to errors and frustration. For visually impaired users and those who rely on keyboard navigation, a well-structured focus order is key to providing a smooth web experience.

The Importance of Focus Order

Focus order is crucial for all users, especially those who rely on accessibility features, for the following reasons:

• Efficient Navigation: With a logical focus order, users can efficiently navigate through the content of a page. If the focus jumps around illogically, it becomes difficult to reach the desired information, causing frustration.
• Improved User Experience: A well-ordered focus flow allows users to easily access forms, buttons, and other important elements, enhancing the overall user experience.
• Compliance with Accessibility Standards: Focus order is a key requirement in the Web Content Accessibility Guidelines (WCAG). If a website does not follow proper focus order principles, it may fail to meet accessibility standards.

The Role of Focus Order for Visually Impaired Users

Visually impaired users rely heavily on screen readers, which read web content aloud in the order that elements are focused. If the focus order is not set correctly, these users may struggle to understand the structure of the page. This can lead to mistakes in form inputs or cause important information to be missed entirely.

How to Optimize Focus Order

To ensure an appropriate focus order, it is essential to follow some basic guidelines. By doing so, users can navigate the webpage smoothly and without confusion.

1. Utilize Natural HTML Order

By default, browsers follow the order in which HTML elements are written to determine focus order. This is known as “source code order,” and if the HTML is well-structured, a logical focus order will naturally follow without the need for customization.

Example:

<header>
  <nav>...</nav>
</header>
<main>
  <h1>Page Title</h1>
  <p>Main content here</p>
  <a href="...">Link</a>
</main>
<footer>
  <p>Footer info</p>
</footer>

In this example, the focus moves naturally from the navigation to the main content and then to the footer, which is intuitive for users.

2. Proper Use of the tabindex Attribute

When the default HTML order does not suffice or when you need to control focus for specific elements, the tabindex attribute can be used. This attribute explicitly sets the focus order of elements, but misuse can lead to a disorganized focus sequence, so it should be used cautiously.

• tabindex="0": Makes the element focusable in the natural tab order.
• tabindex="-1": Removes the element from the keyboard focus order but allows it to receive programmatic focus through JavaScript.
• Positive values (e.g., tabindex="1"): Prioritizes focus for the element but can disrupt the natural flow, so use only when necessary.

Example:

<a href="..." tabindex="1">First focused link</a>
<a href="...">Second focused link</a>
<button tabindex="0">Button with natural focus</button>

3. Align Visual Layout with Focus Order

It’s important that the visual layout of the page matches the focus order. If the page is laid out visually from left to right and top to bottom, the focus order should follow the same pattern. When the focus moves differently from the visual flow, it can confuse users.

Example:

If form fields are visually arranged in the order “Name → Email → Phone Number,” the focus order should follow this sequence as well.

4. Control Focus Using JavaScript

For dynamic content, such as modal windows or interactive elements that appear after a user action, JavaScript can be used to manage focus. For instance, when a modal opens, focus should automatically move to the first focusable element inside the modal, and when the modal is closed, focus should return to the original position.

Example:

document.getElementById('modal').focus();

Risks of Incorrect Focus Order When focus order is not properly optimized, users may encounter several issues:

• Confusion in Navigation: If the focus moves in a non-logical order, users can become disoriented, leading to navigation errors or missing important information.
• Accessibility Violations: Focus order is part of the WCAG 2.1 guidelines (specifically Guideline 2.4.3), and failing to comply with these guidelines can result in an inaccessible website.
• Decreased User Experience: For keyboard-reliant users, poor focus order can severely degrade the overall user experience, causing frustration and reducing trust in the site.

Conclusion

Focus order in web accessibility is essential for ensuring that users can efficiently navigate a webpage using only a keyboard. By maintaining the natural order of HTML elements and using the tabindex attribute and JavaScript judiciously, you can create a navigation experience that is both logical and user-friendly. Optimizing focus order is a key aspect of accessibility that ensures all users can enjoy a smooth and inclusive web experience.

Key Takeaways

• Use natural HTML order and align focus flow with visual layout.
• Use the tabindex attribute and JavaScript wisely to control focus when necessary.
• Ensure that the focus order is logical and intuitive for both keyboard users and screen reader users.
• Optimizing focus order is a fundamental step in improving web accessibility and the overall usability of a website.

We have released the UUU Web Accessibility Widget Tool, designed to make web accessibility easy to implement. This tool helps improve the accessibility of websites quickly and efficiently, even without specialized knowledge.

If you’re interested in enhancing your website’s accessibility, please check out the details. We are here to support you in making your website more user-friendly and accessible to a wider audience.