Fix Accessibility Violation: Remove Redundant Alt Text from Logo

[huangkevin-apr]

Summary

This PR fixes an accessibility violation (img_alt_redundant) in the navigation bar where the logo image's alt text was redundantly repeating the adjacent link text "Memos", causing screen readers to announce the link content twice.

Issue Description

When running IBM Accessibility Checker (Version 4.0.9) on the homepage, it identified a violation where link text was repeated in an image's alt attribute within the same link.

Current behavior:

<a>
  <img alt="Memos" />
  Memos
</a>

Why is this important?
When the text equivalent of an image inside or adjacent to a link is the same as the link text, people who use a screen reader will hear the same text announced twice. Also, those who use text-only browsers will see both the link text and text equivalent of the image and can be confused by the redundant text.

Fix Description

Changed the logo image's alt attribute from "Memos" to an empty string "", marking it as decorative. Since the text "Memos" immediately follows the image within the same link, the image serves only a visual/decorative purpose and doesn't need alternative text.

Updated behavior:

<a>
  <img alt="" />
  Memos
</a>

Screen readers will now announce: "Link, Memos" - providing clear, non-redundant information.

Testing

✅ Verified with IBM Equal Access Accessibility Checker - violation resolved
✅ Visual appearance unchanged
✅ Screen reader announces link only once

Additional Info

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.

Reasoning Process of A11YRepair:

{
    "1/1": "### Bug Analysis\n\nThe accessibility report indicates an `img_alt_redundant` violation for the element with index `2`. The issue is that \"Link text is repeated in an image 'alt' value within the same link\".\n\nLooking at the screenshot, element `2` is the \"Memos\" logo and text in the top navigation bar. The provided HTML context, `<a ...><img alt=\"Memos\" ...>Memos</a>`, confirms that an `<a>` tag wraps both an `<img>` with `alt=\"Memos\"` and the text \"Memos\".\n\nThis structure causes screen readers to announce the link's content redundantly, for example, \"Link, Memos, Memos\". The image serves a decorative purpose here because the adjacent text \"Memos\" already describes the link's destination.\n\nTo fix this, the `alt` attribute of the `<img>` element should be empty (`alt=\"\"`), marking it as a decorative image that screen readers should ignore.\n\n### Code Analysis\n\nThe file `/src/app/layout.config.tsx` defines a `baseOptions` object which is used in both `/src/app/(home)/layout.tsx` and `/src/app/docs/layout.tsx`. This object contains the configuration for the navigation bar (`nav`).\n\nInside `baseOptions`, the `nav.title` property is a React fragment containing the `Image` component for the logo and the \"Memos\" text.\n\n```typescript\n// /src/app/layout.config.tsx\n\nexport const baseOptions: BaseLayoutProps = {\n  nav: {\n    title: (\n      <>\n        <Image src=\"/logo.png\" alt=\"Memos\" width={24} height={24} className=\"rounded\" priority />\n        Memos\n      </>\n    ),\n    role: \"banner\",\n  },\n  // ...\n};\n```\n\nThe `Image` component has `alt=\"Memos\"`, which is the source of the violation. I will change this to `alt=\"\"` to resolve the issue.\n\n### Patch Generation\n\n```typescript\n### /src/app/layout.config.tsx\n<<<<<<< SEARCH\n    title: (\n      <>\n        <Image src=\"/logo.png\" alt=\"Memos\" width={24} height={24} className=\"rounded\" priority />\n        Memos\n      </>\n    ),\n=======\n    title: (\n      <>\n        <Image src=\"/logo.png\" alt=\"\" width={24} height={24} className=\"rounded\" priority />\n        Memos\n      </>\n    ),\n>>>>>>> REPLACE\n```"
}