FazBrowse GitHub Viewer | Trending |
URL:
| Home
Tools: [Download Repo ZIP]   [Original HTTPS Page]

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

Repository navigation

Fix Accessibility Violations in Partner Logos Section - #668

Open
huangkevin-apr wants to merge 1 commit into
processing:mainfrom
huangkevin-apr:fix-a11y-svg
Open

huangkevin-apr wants to merge 1 commit into
processing:mainfrom
huangkevin-apr:fix-a11y-svg

Conversation

Copy link
Copy Markdown

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.

netlify Bot commented Jan 11, 2026 •
edited
Loading

Copy link
Copy Markdown

✅ Deploy Preview for java-processing-faf822 ready!

Name Link
🔨 Latest commit a02e77b
🔍 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.

This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode characters
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant


Back | FazBrowse Home | New Git URL