The My page button is visually before the user menu button so it should be before it in the focus order. See C27: Making the DOM order match the visual order for details of the success criteria this addresses and the assistive technology use cases it supports.
Actual outcome
The user menu buttons is before the My page button in the focus order.
Severity
The success criterion covering this issue is WCAG level A – the minimum level. Most organizations aim for a conformance level of AA, which includes all level A criteria. In this particular case this issue seems unlikely to seriously hamper anybody's work but as it's level A it's still moderately severe.
Recommendation
Render the header nav's DOM elements in the same order as they'll appear visually, and remove the CSS that inverts the visual order.
Steps to reproduce
⌘ + F5to start VoiceOver.My pagebutton in the header nav.Expected outcome
The
My pagebutton is visually before the user menu button so it should be before it in the focus order. See C27: Making the DOM order match the visual order for details of the success criteria this addresses and the assistive technology use cases it supports.Actual outcome
The user menu buttons is before the
My pagebutton in the focus order.Severity
The success criterion covering this issue is WCAG level A – the minimum level. Most organizations aim for a conformance level of AA, which includes all level A criteria. In this particular case this issue seems unlikely to seriously hamper anybody's work but as it's level A it's still moderately severe.
Recommendation
Render the header nav's DOM elements in the same order as they'll appear visually, and remove the CSS that inverts the visual order.