Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Screen readers focus on skip link as soon as page loads #58

Open
mxmason opened this issue Apr 11, 2023 · 0 comments
Open

Screen readers focus on skip link as soon as page loads #58

mxmason opened this issue Apr 11, 2023 · 0 comments
Assignees
@mxmason
Labels
enhancement New feature or request

Comments

@mxmason
Copy link
Collaborator

mxmason commented Apr 11, 2023 •
edited
Loading

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.

  1. Start a screen reader
  2. Navigate to the collab lab website
  3. Observe that:
    1. the browser navigates; the screen reader begins the navigation announcement
    2. the navigation announcement is interrupted by the screen reader's virtual cursor focusing on the "skip to content" link
  4. 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>
@mxmason mxmason added the enhancement New feature or request label Apr 11, 2023
@mxmason mxmason self-assigned this Apr 11, 2023
@mxmason mxmason changed the title Screen reader users focus on skip link as soon as page loads Screen readers focus on skip link as soon as page loads Apr 11, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@mxmason mxmason

Labels
enhancement New feature or request
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
1 participant
@mxmason