Description
Have you read the Contributing Guidelines on issues?
- I have read the Contributing Guidelines on issues.
Prerequisites
- I'm using the latest version of Docusaurus.
- I have tried the
npm run clearoryarn clearcommand. - I have tried
rm -rf node_modules yarn.lock package-lock.jsonand 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
When an image is truly decorative (i.e., it doesn't add additional context or information), we can apply alt="" (distinct from not supplying an alt attribute at all). This removes it from screenreader output, reducing clutter. This is especially pertinent for logos inside of links that also contain other link text, such as the typical navbar brand link. W3C's Web Accessibility Initiative's guidance on alt text for functional images includes an example just like this, where they recommend:
In this example, the W3C logo is used to supplement text within a link that leads to the W3C home page. The image does not represent different functionality or convey other information than that already provided in the link text, so a null (empty) value is applied, (
alt=""), to avoid redundancy and repetition. In effect the image is a decorative adjunct or visual cue to the link text…
Prior work (#3352 and #3817) enabled Docusaurus users to provide empty strings for these alt properties in their configs. However, when they do so, the logos are provided alts anyways, populated with the site title. As a result, Docusaurus users are not able to meaningfully mark their logos as decorative to reduce screenreader clutter.
Reproducible demo
https://stackblitz.com/edit/github-rvbfnk?file=docusaurus.config.js
Steps to reproduce
- Navigate to repro on StackBlitz
- Check
docusaurus.config.js, specifically the config for the navbar logo, which should have analt: ''property. - Inspect markup for navbar logo in the preview. Verify that the image has an
altattribute of"My Site", instead of the empty string. - Navigate to navbar brand link with a screenreader. Verify that the link is announced as "My Site My Site," because of the alt text duplication.
Expected behavior
If the user supplies an empty string for the logo's alt (distinct from not providing an alt at all, or providing undefined or null), the logo should apply alt="", marking it as decorative for assistive technologies. Screenreaders won't announce the logo, and navigating to the brand link should just announce the site title once.
Actual behavior
When the user supplies an empty string for the logo's alt config, the alt attribute is being populated with the site title. This means that screenreader announcements are cluttered with redundant duplication.
Your environment
Latest versions as used on the StackBlitz playground.
See repro on StackBlitz
Self-service
- I'd be willing to fix this bug myself.