Homepage accessibility improvements
What does this MR do and why?
Splitting this off from !4461 (merged) for the sake of streamlining reviews.
Improvements:
- Fix heading structure (https://dequeuniversity.com/rules/axe/4.8/heading-order)
- Add ARIA labels to sections (see !4461 (comment 1733603298))
- Remove invalid ARIA labels (https://rocketvalidator.com/html-validation/the-img-role-is-unnecessary-for-element-img)
- Add an underline to low-contrast links in the "self-managed" section of the page (https://dequeuniversity.com/rules/axe/4.8/link-in-text-block)
Improves Lighthouse accessibility score on the homepage from 94% to 100%.
Screenshots, screen recordings, or links to review app
- Review app: https://homepage-a11y-fixes.docs.gitlab-review.app/
- Production: https://docs.gitlab.com/
How to set up and validate locally
Numbered steps to set up and validate the change are strongly suggested.
-
Configure a local GitLab Docs environment: https://gitlab.com/gitlab-org/gitlab-docs/-/blob/main/doc/setup.md. -
Visit the homepage and verify there are no significant visual changes. Small spacing discrepancies are OK since we're changing most of this very soon in !4461 (merged). -
Optional: run a Lighthouse audit in Chrome in an incognito window. The accessibility score should be 100% (improving over the current production site at 94%).
Merge request 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 merge request.
Edited by Sarah German