Badge icons all show "Project badge" alt text, making them inaccessible
Summary
A project's main page shows a line with the badges that are defined for it. For example, https://gitlab.com/gitlab-org/gitlab shows three badges: the pipeline, Ruby coverage, and JS coverage. Unfortunately, the alt text for each badge is just "Project badge", which makes them indistinguishable to e.g. screen readers.
Steps to reproduce
Go to https://gitlab.com/gitlab-org/gitlab, hover the mouse on one of the badge images, open the context menu with the mouse, and select "Inspect accessibility properties" (that's for Firefox; other browsers have equivalent functionality).
You can see that the alt text has been translated into the image's accessible name
. The HTML has this; note that it has alt="Project badge"
on each <img>
:
<div class="project-badges mb-2" data-qa-selector="project_badges_content">
<a class="gl-mr-3" data-qa-link-url="https://gitlab.com/gitlab-org/gitlab/commits/master" data-qa-selector="badge_image_link" href="https://gitlab.com/gitlab-org/gitlab/commits/master" rel="noopener noreferrer" target="_blank">
<img alt="Project badge" aria-hidden class="project-badge" src="https://gitlab.com/gitlab-org/gitlab/badges/master/pipeline.svg">
</a>
<a class="gl-mr-3" data-qa-link-url="https://gitlab-org.gitlab.io/gitlab/coverage-ruby/" data-qa-selector="badge_image_link" href="https://gitlab-org.gitlab.io/gitlab/coverage-ruby/" rel="noopener noreferrer" target="_blank">
<img alt="Project badge" aria-hidden class="project-badge" src="https://gitlab.com/gitlab-org/gitlab/badges/master/coverage.svg?job=coverage&key_text=Ruby%20Coverage&key_width=90">
</a>
<a class="gl-mr-3" data-qa-link-url="https://gitlab-org.gitlab.io/gitlab/coverage-frontend/lcov-report/" data-qa-selector="badge_image_link" href="https://gitlab-org.gitlab.io/gitlab/coverage-frontend/lcov-report/" rel="noopener noreferrer" target="_blank">
<img alt="Project badge" aria-hidden class="project-badge" src="https://gitlab.com/gitlab-org/gitlab/badges/master/coverage.svg?job=coverage-frontend&key_text=JS%20Coverage&key_width=85">
</a>
</div>
What is the expected correct behavior?
The alt text should probably provide a super-short summary of what the badge is trying to show. "Pipeline passing" or "Pipeline failed"; "Ruby coverage: 42%", etc.
Maybe that needs to be set up by the person who sets up the badge. The project's Settings page for badges already allows to define a custom Name for each badge, but it does not allow string substitutions within it like for the Link and Badge Image URL options. Maybe allow such substitutions there, and use the Name as the alt text? Or have a separate field for a generated human-readable representation of what the badge is intended to show?