Accessibility Issue: Focusable Elements with aria-hidden="true"

[huangkevin-apr]

👟 Reproduction steps

1. Navigate to the homepage https://appwrite.io/
2. Use keyboard navigation (Tab key) to focus on technology platform icons
3. Use a screen reader to verify that hidden elements are being announced
4. Run IBM Accessibility Checker to detect violations

39 Violation Elements:

Issue Report:
http%3A%2F%2Flocalhost%3A5173%2F_llm_processed_group_size_final.json

👍 Expected behavior

1. All interactive technology platform icons should be:

   • Fully accessible to screen readers
   • Keyboard navigable
   • Properly announced to assistive technologies

2. Decorative SVG elements should be:

   • Hidden from assistive technologies using aria-hidden="true"
   • Not announced by screen readers

👎 Actual Behavior

Description

Two critical accessibility issues have been identified in the technology platform icons section:

1. Focusable elements with aria-hidden="true": Interactive buttons and links are hidden from assistive technologies while remaining keyboard focusable
2. Unlabeled decorative SVG: A decorative SVG noise/grain texture effect lacks an accessible name and is not properly hidden from screen readers

Impact

• WCAG Violations:
  • 1.1.1 (Non-text Content)
  • 1.3.1 (Info and Relationships)
  • 4.1.2 (Name, Role, Value)
• Affected Users: Keyboard users and screen reader users

Location

Both violations occur in the technology platform icons section on the homepage:

• Issue 1: src/routes/(marketing)/(components)/platforms.svelte
• Issue 2: src/lib/components/fancy/noise.svelte

🎲 Appwrite version

Appwrite Cloud

💻 Operating system

Linux

🧱 Your Environment

No response

👀 Have you spent some time to check if this issue has been raised before?

• I checked and didn't find similar issue

🏢 Have you read the Code of Conduct?

• I have read the Code of Conduct