10.5 Incorrect focus order (L)

FIGURE 10.6: Incorrect Focus order highlighted on News article page

‘Login’ >‘clickable 1 link’

FIGURE 10.7: Another example of incorrect focus order highlighted on News article page

10.5.1 WCAG 2.4.3 (A) - Desktop

When navigating across the News article page, the focus moves from the ‘Login’ button and back to the message icon.

A further focus order issue exists on this page when the user navigates to the ‘Terms of service’ link, the focus move to the ‘DISQUS’ logo and then the back to the ‘Subscribe’ link.

The focus order should match the natural reading order of the language of the site. Therefore, the focus order should be left to right, top to bottom.

10.5.2 Recommendation

Consider the natural reading order of the page and place interactive elements in order semantically to maintain a correct focus order and to assist keyboard navigation.

In this instance, the focus should move from the message icon and then the ‘Login’ button. And the focus should move from the ‘Terms of service’ link to then to the ‘Subscribe’ link.

---