facebook/Docusaurus

Accessibility: docs sidebar: superfluous logo and <aside>

Open

#8429 opened on Dec 12, 2022

View on GitHub
 (3 comments) (0 reactions) (0 assignees)JavaScript (12,167 stars) (1,074 forks)batch import
bugdomain: a11yhelp wanted

Description

Have you read the Contributing Guidelines on issues?

Prerequisites

  • I'm using the latest version of Docusaurus.
  • I have tried the npm run clear or yarn clear command.
  • I have tried rm -rf node_modules yarn.lock package-lock.json and re-installing packages.
  • I have tried creating a repro with https://new.docusaurus.io.
  • I have read the console error message carefully (if applicable).

Description

The pseudocode of the docs sidebar (docusaurus website) is: <aside> [docusaurus logo with tabindex -1] <nav aria-label=docs sidebar> ... </nav> <collapse sidebar button] </aside> The effect on the NVDA screen reader is that it reads: "complementary landmark [Docusaurus logo] docs side navigation landmark ..."

First, the logo (if it has tabindex -1 and is not visually present) should not be there, or should be aria-hidden.

Second, the aside element is superfluous. IMO the whole navigation bar incl logo and collapse button should be contained within a single <nav aria-label="docs sidebar"> element. Putting an additional region around it only clutters the page. Using <aside> for a navigational sidebar is not common and semantically dubious. Plus, the <nav> describes the goal of the region much more precisely than <aside>.

Reproducible demo

No response

Steps to reproduce

Inspect code of a docusaurus page with docs navigation sidebar

Expected behavior

Pseudocode should be: <nav aria-label="docs sidebar">[logo, but only if it is visually present and focusable; aria-hidden otherwise] ... [collapse sidebar button] </nav>

Actual behavior

pseudocode is: <aside> [docusaurus logo with tabindex -1] <nav aria-label="docs sidebar"> ... </nav> [collapse sidebar button] </aside>

Your environment

No response

Self-service

  • I'd be willing to fix this bug myself.

Contributor guide

Tech stack
reactjavascripthtml
Domain
frontendaccessibility
Issue type
accessibility
DifficultyEstimated implementation difficulty for a new contributor, from 1 for very small changes to 5 for expert-level work.
2
Estimated timeA rough time range for an experienced contributor to investigate, implement, test, and prepare a pull request.
1-3 hours
Activity statusHow available the issue appears right now: fresh, active, stale, blocked, or waiting on maintainer input.
stale
ClarityHow clearly the issue explains the expected change, acceptance criteria, and next step.
clear
Prerequisites
HTMLARIAReact
Newbie friendlinessA 1-100 score estimating how approachable this issue is for first-time contributors.
70
Research direction
Investigate the DocSidebar component in the Docusaurus source code (e.g., packages/docusaurus theme classic/src/theme/DocSidebar/index.js). Ensure the logo is hidden from screen readers when not visually present, and replace the outer <aside> with a <nav> element. Refer to the issue's expected behavior. Also verify using a screen reader like NVDA.