Accessibility fixes and updates

Created on 12 September 2025, 21 days ago

Problem/Motivation

The back to top button could use some accessibility updates to ensure those using a screen reader can use the back to top button and navigate effectively. Redundant ARIA roles and adding display: none to the parent element of the button will ensure better accessibility for all.

Proposed resolution

  • Change the aria-label on the <nav> element to be an aria-labelledby, set to the id of the <button> element. This nav element can just use the button's text as its accessible name.
  • If the <button> element does not have text inside it, only then should an aria-label of "Back to Top" be added. Add the aria-label only if the <button> text is empty.
  • Instead of controlling the show-hide functionality on the <button> element, add the show and hide functionality to the <nav> element that contains the button. Currently VoiceOver reads out the empty <nav> when at the top of the page when the button is hidden.
✨ Feature request
Status

Active

Version

3.0

Component

Code

Created by

πŸ‡ΊπŸ‡ΈUnited States starshaped

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Comments & Activities

Not all content is available!

It's likely this issue predates Contrib.social: some issue and comment data are missing.

No activities found.

Production build 0.71.5 2024