Accessibility: docs sidebar: superfluous logo and <aside>

[timveld]

Have you read the Contributing Guidelines on issues?

• [X] I have read the Contributing Guidelines on issues.

Prerequisites

• [X] I'm using the latest version of Docusaurus.
• [X] I have tried the npm run clear or yarn clear command.
• [X] I have tried rm -rf node_modules yarn.lock package-lock.json and re-installing packages.
• [X] I have tried creating a repro with https://new.docusaurus.io.
• [X] 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.

[Josh-Cena]

The logo in the sidebar is visible if you have hideable navbar; but there's no value in announcing the logo in any case, right?

I agree about <aside>. I do think a single <nav> is good enough, since this sidebar is not an "aside" of the main content.

[timveld]

@Josh-Cena sorry I'm not yet familiar with Docusaurus, so I don't know where to find an example when the sidebar logo is visible (on the docusaurus website it is not, looks as though NVDA is actually repeating the docusaurus logo in the top left which is already part of the banner)

In case the logo is not visible, it should (of course) not be in the DOM or it should be hidden for a screen reader.

If it is visible, the question is whether it is functional or decorative. If it is just a decorative image, it should be hidden. But if it is a link, it should be in the DOM and should have a text alternative which describes what it does. If still in doubt: could you give me an example where a visible logo in the sidebar is used?

[Djunnni]

maybe you can see in docs. ex) http://localhost:3000/docs

https://user-images.githubusercontent.com/49237205/207354632-c00594df-af20-470d-8b99-891183152ff5.mov