Fix a11y: remove redundant alt text from navbar logo image#4950
Conversation
|
Hi @huangkevin-apr! Thank you for your pull request and welcome to our community. Action RequiredIn order to merge any pull request (code, docs, etc.), we require contributors to sign our Contributor License Agreement, and we don't seem to have one on file for you. ProcessIn order for us to review and merge your suggested changes, please sign at https://code.facebook.com/cla. If you are contributing on behalf of someone else (eg your employer), the individual CLA may not be sufficient and your employer may need to sign the corporate CLA. Once the CLA is signed, our tooling will perform checks and validations. Afterwards, the pull request will be tagged with If you have received this in error or have any questions, please contact us at cla@meta.com. Thanks! |
✅ Deploy Preview for react-native ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
|
Thank you for signing our Contributor License Agreement. We can now accept your code for this (and any) Meta Open Source project. Thanks! |
Simek
left a comment
There was a problem hiding this comment.
Hey @huangkevin-apr, thanks for looking at the website a11y. 👍
It seems that https://www.accessibilitychecker.org/ also report this as an issue, and preview deployment does not trigger that warning, so the proposed change seems to be a good idea, let's ship it!
Issue Description
This PR fixes an accessibility violation reported by automated a11y
checks.When running IBM Accessibility Checker (Version 4.0.9) on the homepage, I find an accessibility violation as below:
On the React Native website, the navbar logo image is rendered inside a link and is adjacent to visible text (“React Native”). The logo image currently has an
alt="React Native", which duplicates the link text<b class="navbar__title text--truncate">React Native</b>exposed to assistive technologies.When an image inside (or adjacent to) a link repeats the same text as the link label, screen reader users may hear the same content announced multiple times, leading to redundant and confusing output. This violates accessibility best practices and WCAG guidance on redundant text alternatives.
Fix Description
Since the navbar already contains visible text that fully describes the link target, the logo image is decorative in this context. The correct fix is to provide a null alternative text (
alt="") so assistive technologies ignore the image and rely on the existing link text.The DOM of patched website:

Note: The patch submitted in this PR was generated by A11YRepair, an automated Web Accessibility repair tool that I developed to address common accessibility violations in web applications. The generated fixes were manually reviewed and validated before submission.