WCAG (Level A) SC 2.4.3 Focus Order

WCAG (Level A) SC 2.4.3 Focus Order (W3.org)

Issue description

WCAG 2.4.3, “Focus Order” is about ensuring that the order in which interactive elements receive keyboard focus is logical and predictable (Logical, visual order that matches up with the order that assistive technology would read it). This is crucial for users who navigate websites using only a keyboard, including those with motor impairments who cannot use a mouse and people who rely on assistive technologies like screen readers.

Many websites have an illogical or unpredictable focus order. This can happen when:

• Inconsistent order: The focus jumps around the page in a random or confusing way, making it difficult to follow.
• Visual order mismatch: The visual order of elements doesn’t match the keyboard focus order, causing confusion and disorientation.
• Skipped elements: Some interactive elements are skipped entirely in the focus order, making them inaccessible to keyboard users.
• Complex layouts: Complex layouts with multiple columns or nested elements can create a confusing focus order if not carefully designed.

Why focus order matters

• Efficiency: A logical focus order allows users to navigate through the page quickly and efficiently using the Tab key.
• Predictability: A predictable focus order helps users understand the structure of the page and anticipate where the focus will go next.
• Accessibility: A clear focus order is essential for users who rely on keyboards or assistive technologies to interact with the website.
• Usability: A good focus order improves the overall usability of the website for everyone, regardless of their input method.

Essentially, WCAG (Level A) SC 2.4.3 Focus Order ensures that the focus order follows a logical and intuitive sequence, typically from top to bottom and left to right. This helps users navigate the page easily and understand the relationships between different elements.

Related requirements

The following WCAG source criteria are often related to this as well. They can provide additional insights into specific challenges you may be encountering.

• WCAG (Level AA) SC 2.4.7 Focus Visible
• WCAG 2.2 (AA) SC 2.4.11 Focus Not Obscured (Minimum)
• WCAG 2.2 (AAA) SC 2.4.12 Focus Not Obscured (Enhanced)
• WCAG 2.2 (AAA) SC 2.4.13 Focus Appearance
• WCAG (Level A) SC 3.2.1 On Focus

Who this issue impacts

Follow the links for additional information on user impairments:

• Vision impairment
• Cognitive impairment
• Motor impairment
• General user experience

Suggestions for remediation

Remediating WCAG 2.4.3, “Focus Order” involves ensuring that the order in which interactive elements receive keyboard focus is logical and predictable. Here’s how:

Structure with HTML

• Logical source order: Arrange elements in the HTML source code in the order they should be read and interacted with. This usually means following a top-to-bottom, left-to-right sequence.
• Headings and landmarks: Use heading tags (<h1> to <h6>) and ARIA landmarks (e.g., role="navigation", role="main") to create a clear hierarchy and guide the focus order.

CSS for visual presentation

• Flexbox and grid: Use Flexbox or Grid layout for complex visual arrangements while maintaining a logical source order. These CSS techniques allow you to visually reposition elements without affecting the underlying HTML order.
• Avoid CSS that drastically alters order: Be cautious with CSS properties like float or absolute positioning (position: absolute) that can significantly disrupt the focus order. If you must use them, ensure the focus order remains logical by using tabindex to correct it.

tabindex attribute

• Use sparingly: Use tabindex only when necessary to adjust the focus order. Avoid excessive use, as it can make the focus order less predictable.
  • tabindex="0": Use tabindex="0" to add elements to the tab order that are not included by default (e.g., custom components).
  • tabindex="-1": Use tabindex="-1" to remove elements from the tab order when needed (e.g., elements that are only accessible by mouse).

Testing

• Keyboard-only testing: Test the website using only the Tab key to verify that the focus order is logical and predictable.
• Visual feedback: Provide clear visual indicators for keyboard focus so users can see which element is currently focused.
• Assistive technology testing: Test with screen readers to ensure that the focus order is conveyed correctly to users.

Example

If you have a layout with two columns where the visual order is different from the source order:

HTML
 <div class="column-container">
 <div class="column right">Column 2</div>
 <div class="column left">Column 1</div>
 </div>

Instead of using float or position: absolute to visually place “Column 1” on the left, use Flexbox to reorder the elements visually while maintaining the source order:

CSS
 .column-container { display: flex; }
 .right { order: 2; }
 .left { order: 1; }

This allows you to visually order the columns while keeping the logical focus order (“Column 1” then “Column 2”) in the HTML.

By following WCAG (Level A) SC 2.4.3 Focus Order, you can ensure that the focus order on your website is logical, predictable, and accessible to everyone, regardless of their input method.

Links for more info

• Understanding WCAG SC 2.4.3 Focus Order (digitala11y.com)
• Understanding Success Criterion 2.4.3: Focus Order (w3c.github.io)