Open
Description
Summary
When a user with a screen reader enabled navigates to any page on the TCL website, their AT immediately focuses on our first skip link. This might prevent the user from hearing the navigation announcement.
Reproduction steps
Note: the following steps can be reproduced with both VoiceOver on MacOS and NVDA on Windows, so I have not included exact keybindings to replicate the steps.
- Start a screen reader
- Navigate to the collab lab website
- Observe that:
- the browser navigates; the screen reader begins the navigation announcement
- the navigation announcement is interrupted by the screen reader's virtual cursor focusing on the "skip to content" link
- Optionally, repeat steps 2 & 3 with the links in the nav region
Screen recording
TBA
Possible causes and fixes
I believe this happens because our skip links are direct children of the <body> element. Compare to other sites with skip links, like WebAIM, where a skip link is present in the DOM but the focus-on-navigation behavior does not happen. WebAIM's skip link is in the <header>.
We should probably move our skip links into our own <header>
Activity