WCAG 2.4.3 ✅ (Supports): Focus Order

[StephDriver]

Level: A
Principle: Operable
Result: ✅ Supports

• ✅ Clean
• 🟠 OLH - single small bug on article page
• 🟠 Material - single issue on article page

Resources

WCAG 2.4.3 Success Criterion

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.

Audit Checklist

• Review previous Audit Result
• Review work identified in previous audit and list open issues.
• Check for any other relevant open issues.
• Retest open issues, are these issues still present?
• Test for any new issues that may have been introduced.
• Determine compliance status, add this to issue name.
• Add any new issues to the Accessibility project for triage.

Previous audit

#4131

❌ Focus order is sequential in most cases, but this audit identified a few errors where focus order was disrupted. Firstly by the carousel which needs an accessibility overhaul, and second with the 'how to cite' popups.

Progress since last audit

• How to Cite screenreader navigation fails #4235
• Material Carousel a11y improvements #4237
• Material Keyboard Navigation Duplicated #4917

Automated Testing

No violations were found for axe rules:

• aria-hidden-focus - ARIA hidden element must not be focusable or contain focusable elements.
• tabindex - Elements should not have a tabindex greater than zero

Audit Notes

No focus order failures were found in the Clean theme either by automated or manual testing.

The OLH theme has a single issue with the enlarged figure popup on articles. The Material theme has a single issue with the order of the text format buttons being after the article text instead of before it.

Work arising

The material theme issue was considered during development and is a constraint of the structure of that theme. But the OLH popup issue could be addressed:

• OLH enlarge figure popup close button not focusable #5277

[StephDriver]

Manual Testing

I tested a representative sample of pages by tabbing through with a keyboard. I found two issues, both on the article page, one on Material and one on OLH, the clean theme had no issues.

On a Material article, the article text settings are only reached after one has tabbed through the whole article. This is unhelpful as if a user wants different text settings, it would be before they read the article.

On an OLH article, the close button for an enlarged figure popup is not focusable. See further discussion of this on #5143 about Keyboard traps.

Developer Notes

The placement of the article text settings in material is a restriction of the layout of that theme. This is discussed further in the PR that introduced this feature #4796.