Update brand logo accessible name for screen readers
requested to merge 398771-super-sidebar-customised-logo-and-tanuki-screen-reader-validation into master
What does this MR do and why?
Validate how customised logo image and the tanuki-logo are read by screen-readers.
From: !114840 (comment 1324782390)
Non-blocking questions:
- If the SVG used
aria-hidden
and a.gl-sr-only
span
was used for the text instead of atitle
, would you avoid "image" being announced? - Can the SVG have
role="img"
so there's no chance of it being traversed?
Proposal
- Update HTML markup to be more robust, replace
title
attribute with visually-hidden<span>
within the link - Ensure custom logo filename is not read with
alt=""
- Hide Tanuki SVG from screen-readers
Changes
Update brand logo accessible name for screen readers
- Remove
title
attribute from<a>
- Add
alt=""
to remove custom logo<img>
filename being read - Add
.gl-sr-only
span containing accessible "Homepage" label for link - Add
aria-hidden
to logo wrapper - Add
role="img"
to<svg>
to remove form being traversed
Screenshots or screen recordings
GitLab logo
OS | Browser | Screen-reader | Before | After |
---|---|---|---|---|
Windows | Chrome | JAWS | current-jaws-chrome | role-img-jaws-chrome |
Windows | Firefox | NVDA | current-nvda-firefox | role-img-nvda-firefox |
MacOS | Safari | VoiceOver | current-voiceover-safari | role-img-voiceover-safari |
Custom logo
OS | Browser | Screen-reader | Before | After |
---|---|---|---|---|
Windows | Chrome | JAWS | current-custom-logo-jaws-chrome | custom-logo-jaws-chrome |
Windows | Firefox | NVDA | current-custom-logo-nvda-firefox | custom-logo-nvda-firefox |
MacOS | Safari | VoiceOver | current-custom-logo-voiceover-safari | custom-logo-voiceover-safari |
How to set up and validate locally
- Review new navigation logo with screen readers
- Add custom header logo in
/admin/application_settings/appearance
and review with screen readers
MR acceptance checklist
This checklist encourages us to confirm any changes have been analyzed to reduce risks in quality, performance, reliability, security, and maintainability.
-
I have evaluated the MR acceptance checklist for this MR.
Related to #398771 (closed)
Edited by Scott de Jonge