Fix Accessibility Violations in Partner Logos Section
Problem
The IBM Equal Access Accessibility Checker detected two accessibility violations in the partner logos section of homepage:
- Missing accessible name for links: Hyperlinks must have an accessible name for their purpose
- SVG elements missing accessible name: Non-decorative SVG elements must have an accessible name
Solution
This patch addresses both violations by:
- Adding
aria-labelto link elements: Each partner logo link now includes anaria-label={name}attribute, providing a clear accessible name that describes the link's purpose (e.g., "DMA", "ITP", "Netlify", "GitHub Sponsors") - Marking SVG logos as decorative: When the Logo component is rendered as an SVG, it now includes
aria-hidden="true"to indicate it's decorative, since the accessible name is already provided by the parent link'saria-label
Generated Patch:
@@ -282,14 +282,15 @@ const IndexPage = ({ data }) => {
className={css.logo}
href={url}
target="_blank"
- rel="noreferrer">
+ rel="noreferrer"
+ aria-label={name}>
{typeof Logo === 'string' ? (
<GatsbyImage
image={data[Logo].childImageSharp.gatsbyImageData}
alt={name}
/>
) : (
- <Logo />
+ <Logo aria-hidden="true" />
)}
</a>
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.
Fix Before:
Fix After:
Testing
✅ IBM Equal Access Accessibility Checker now shows 0 violations (previously 2) ✅ Screen readers can now properly announce partner links ✅ Visual appearance remains unchanged
Impact
This fix improves accessibility for users relying on assistive technologies, ensuring all partner links are properly labeled and announced by screen readers.
Deploy Preview for java-processing-faf822 ready!
| Name | Link |
|---|---|
| Latest commit | a02e77b4f730495a709c850cd6de14cfe3937da0 |
| Latest deploy log | https://app.netlify.com/projects/java-processing-faf822/deploys/6963bb9d3c67a90008dd26d2 |
| Deploy Preview | https://deploy-preview-668--java-processing-faf822.netlify.app |
| Preview on mobile | Toggle QR Code...Use your smartphone camera to open QR code link. |
To edit notification comments on pull requests, go to your Netlify project configuration.