processing-website icon indicating copy to clipboard operation
processing-website copied to clipboard

Fix Accessibility Violations in Partner Logos Section

Open huangkevin-apr opened this issue 1 week ago • 1 comments

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
image

Solution

This patch addresses both violations by:

  • Adding aria-label to link elements: Each partner logo link now includes an aria-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's aria-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: image

Fix After: image

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.

huangkevin-apr avatar Jan 11 '26 15:01 huangkevin-apr