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 3 months 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

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

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify project configuration.

netlify[bot] avatar Jan 11 '26 15:01 netlify[bot]