Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

masthead logo alt attribute #2529

Closed
marcbompart opened this issue May 14, 2020 · 4 comments
Closed

masthead logo alt attribute #2529

marcbompart opened this issue May 14, 2020 · 4 comments

Comments

@marcbompart
Copy link

Can we have the masthead logo alt attribute populated with the "site.title" ?

@iBug
Copy link
Collaborator

iBug commented May 14, 2020

On line 8 of _includes/masthead.html, this should work:

-<a class="site-logo" href="{{ '/' | relative_url }}"><img src="{{ logo_path | relative_url }}" alt=""></a>
+<a class="site-logo" href="{{ '/' | relative_url }}"><img src="{{ logo_path | relative_url }}" alt="{{ site.masthead_title | default: site.title }}"></a>

@marcbompart
Copy link
Author

commit and push! ;-)

@mmistakes
Copy link
Owner

Adding the site title as alternate text for the logo is overkill and unnecessary. Right after the logo the site title appears, so for screen readers they're going to see it twice.

Alternate text should be used to describe the image. In this case it's not adding any additional context and is simply "decoration", which is why it's omitted.

@ChristopherBull
Copy link

ChristopherBull commented Feb 10, 2021

This remains an issue with automated accessibility tests, i.e., Lighthouse: https://web.dev/link-name/?utm_source=lighthouse&utm_medium=cli
I could add an exception to my assertions config that skip that failing test, but I can't as I need to ensure I catch other instances of this accessibility issue throughout my site.

I agree with your point about duplicate text for screen readers. Would it therefore be possible to allow us to define our own alt text for the Masthead logo in _config.yml, thus avoiding duplication of site title name? Something like "Company logo" or "Photo of xxx".

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

4 participants