Hide logo images from accessibility tree
requested to merge 426363-new-navigation-unauthenticated-header-logo-filepath-read-to-screen-readers into master
What does this MR do and why?
Unauthenticated header logo SVG graphic reads filepath, hide image graphic from accessibility tree with alt="".
See findings and recordings from new navigation accessibility screen reader review &11510
Hide logo images from accessibility tree:
- Add
alt: ''to image logo - Add
aria-hidden="true"to SVG logos - Add
aria-label="Homepage"to wrapping link
Screenshots or screen recordings
| Before | After |
|---|---|
 |
 |
| CleanShot_2023-10-09_at_16.31.02 | CleanShot_2023-10-09_at_16.32.25 |
How to set up and validate locally
- Open GDK in incognito window
- Go to publically accessible page e.g. http://gdk.test:3000/flightjs/Flight/-/merge_requests/4
- Review logged out marketing header accessibility tree (Chrome | Firefox)
- Logo image should be ignored, wrapping link should provide context and label "Homepage"
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 #426363 (closed)
Edited by Scott de Jonge