Fix Accessibility Violations in Partner Logos Section by huangkevin-apr · Pull Request #668 · processing/processing-website

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-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:

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.