Skip to content

fix(a11y): add alt text to images for better accessibility#4349

Open
huangkevin-apr wants to merge 1 commit intoalibaba:formily_nextfrom
huangkevin-apr:fix-a11y-img
Open

fix(a11y): add alt text to images for better accessibility#4349
huangkevin-apr wants to merge 1 commit intoalibaba:formily_nextfrom
huangkevin-apr:fix-a11y-img

Conversation

@huangkevin-apr
Copy link

Before submitting a pull request, please make sure the following is done...

  • Ensure the pull request title and commit message follow the Commit Specific in English.
  • Fork the repo and create your branch from master or formily_next.
  • If you've added code that should be tested, add tests!
  • If you've changed APIs, update the documentation.
  • Ensure the test suite passes (npm test).
  • Make sure your code lints (npm run lint) - we've done our best to make sure these rules match our internal linting guidelines.

Please do not delete the above content


What have you changed?

Summary

This PR fixes accessibility violations by adding descriptive alt attributes to all images that were missing them.

Problem

When running IBM Accessibility Checker (Version 4.0.9) on the homepage, the IBM Equal Access Accessibility Checker identified QR-code images without alt text, which creates barriers for users relying on screen readers.

image

Why is this important?
When an image contains important information, providing a text alternative makes the same information accessible through assistive technologies, such as a Braille display. When an image is decorative or redundant, providing correct markup allows assistive technologies to ignore or not repeat the information.

Solution

Added meaningful alt text to images in both English (index.md) and Chinese (index.zh-CN.md) documentation
Updated the QrCode component to accept an alt prop and pass it to the underlying <img> element
Used descriptive alt text that conveys the purpose/content of each image:

  • "Formily Form Builder" / "Formily 表单设计器"
  • "Formily Core" / "Formily 内核"
  • "Formily Community QR Code" / "Formily 社区二维码"

Testing

  • Verified alt text appears correctly in the rendered HTML
  • Confirmed IBM Equal Access Checker no longer reports violations for these images

Fix Before:
image

Fix After:
image

image

Impact

This change improves accessibility compliance and ensures all users, including those using assistive technologies, can understand the content and purpose of images on the site.

  • 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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant