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.