question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

"navbar.logo.alt" is not allowed to be empty

See original GitHub issue

🐛 Bug Report

When I use an empty string for navbar.logo.alt in my config, I get the following validation error:

“navbar.logo.alt” is not allowed to be empty

However, since the logo in my navbar is redundant with the actual project name next to it, I don’t want screen readers to read out anything for the logo - it would just duplicate the project name.

Have you read the Contributing Guidelines on issues?

I did now.

To Reproduce

(Write your steps here:)

  1. Create a new Docusarus v2 project.
  2. Set navbar.logo.alt in themeConfig in docusaurus.config.js to ''.
  3. Run npm start.

Expected behavior

The website to start just fine.

Actual Behavior

You get the following output:

A validation error occured.
The validation system was added recently to Docusaurus as an attempt to avoid user configuration errors.
We may have made some mistakes.
If you think your configuration is valid and should keep working, please open a bug report.

ValidationError: "navbar.logo.alt" is not allowed to be empty

Your Environment

  • Docusaurus version used: Alpha 61 of v2
  • Environment name and version (e.g. Chrome 78.0.3904.108, Node.js 10.17.0): Node v12.18.2
  • Operating system and version (desktop or mobile): Ubuntu 20.04

Reproducible Demo

Just the default generated template, with the alt changed.

Issue Analytics

  • State:closed
  • Created 3 years ago
  • Comments:5 (2 by maintainers)

github_iconTop GitHub Comments

1reaction
slorbercommented, Aug 28, 2020

I see.

Do you have a link from an authority that claims alt=“” is a recommended practice in some cases?

1reaction
Vinnlcommented, Aug 28, 2020

@slorber That is about leaving out the alt attribute altogether 😃 I want to specify an empty alt tag, i.e. <img src="logo.svg" alt=""/>.

See also https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Img#Attributes

image

Read more comments on GitHub >

github_iconTop Results From Across the Web

Menu items not clearing logo in Bootstrap Navbar
I'm in the process of updating my company's website from Bootstrap 2 to Bootstrap 3 and have what I assume is a relatively...
Read more >
Image ALT Tag Tips for HTML - Penn State | Accessibility
Empty Alt Text for Decorative Images. Some images are used solely for layout purposes or to enhance the content for sighted users and...
Read more >
Navbar | Bulma
It has to appear as the last child of navbar-brand . It has to contain three empty span tags in order to visualize...
Read more >
Navbar | Components - BootstrapVue
The component is a responsive wrapper that positions branding, navigation, and other elements into a concise header. It's easily extensible and thanks to ......
Read more >
Navbar - React-Bootstrap
A powerful, responsive navigation header, the navbar. ... Use the expand prop to allow for collapsing the Navbar at lower ... alt="React Bootstrap...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found