[A11Y] [Low] Decorative elements not hidden from assistive technology

[continue]

Accessibility Issue: Decorative Elements Not Hidden from Assistive Technology

WCAG Level: A
Severity: Low to Medium
Category: ARIA Usage

Issue Description

Decorative elements (icons, dividers, animated effects) throughout the application are not hidden from screen readers using aria-hidden="true". This creates unnecessary noise and confusion for screen reader users.

User Impact

• Affected Users: Screen reader users
• Severity: Extra verbosity and confusion when navigating

Violations Found

File: app/page.tsx

Lines: 10-11, 16

{/* Scan lines overlay for Matrix effect */}
<div className="scan-lines pointer-events-none fixed inset-0 z-50" />

{/* Scroll indicator */}
<div className="absolute bottom-12 left-1/2 -translate-x-1/2 animate-bounce">
  <div className="h-8 w-px bg-gradient-to-b from-matrix-green to-transparent" />
</div>

Issue: Decorative effects not hidden from screen readers

---

File: components/intro-section.tsx

Lines: 14-17

<div className="pointer-events-none absolute inset-0 overflow-hidden opacity-20">
  <div className="matrix-rain absolute inset-0" />
</div>

Issue: Decorative matrix rain effect should be hidden

---

File: app/calculate/page.tsx

Lines: 103

{/* Subtle ambient glow */}
<div className="neon-stable-glow" aria-hidden />

Issue: Good! Already has aria-hidden but should be aria-hidden="true" (boolean)

---

Multiple files with icons

<AlertTriangle className="mt-0.5 h-4 w-4 shrink-0" />
<Upload className="mx-auto mb-3 h-12 w-12 text-matrix-green/60" />
<File className="h-4 w-4 text-matrix-green/80" />

Issue: Decorative icons next to text should have aria-hidden="true"

---

File: components/intro-section.tsx

Lines: 101

<div className="w-full max-w-md border-t border-zinc-800" aria-hidden />

Issue: Good! Divider is marked hidden, but should use aria-hidden="true"

---

Recommended Fix

<!-- Decorative backgrounds/effects -->
<div className="scan-lines pointer-events-none fixed inset-0 z-50" aria-hidden="true" />
<div className="neon-stable-glow" aria-hidden="true" />
<div className="matrix-rain absolute inset-0" aria-hidden="true" />

<!-- Decorative icons next to text -->
<div>
  <AlertTriangle className="mt-0.5 h-4 w-4 shrink-0" aria-hidden="true" />
  <span>Warning message that explains the alert</span>
</div>

<!-- Informative icons (standalone) - need accessible name instead -->
<button aria-label="Upload file">
  <Upload className="h-6 w-6" aria-hidden="true" />
</button>

<!-- Dividers and visual separators -->
<div className="h-4 w-px bg-zinc-800" aria-hidden="true" />
<div className="border-t border-zinc-800" aria-hidden="true" />

Changes Made:

1. Add aria-hidden="true" (with string value) to all decorative elements
2. Background effects, animations, and visual flourishes hidden
3. Icons next to text hidden (text conveys meaning)
4. Standalone icons get aria-label on parent instead
5. Dividers and separators hidden

---

Additional Instances

• All Lucide icons used decoratively throughout the application
• Loading spinners (the spinner is decorative, but loading state should be announced via aria-busy or live region)
• Badge components that duplicate text information

Testing Instructions

1. Use screen reader to navigate through the page
2. Verify decorative elements are not announced
3. Confirm important information is still conveyed
4. Check that icons with meaning have accessible names

Resources

• WCAG 1.1.1 Non-text Content
• MDN: aria-hidden
• WebAIM: Decorative Images

Acceptance Criteria

• All decorative backgrounds/effects have aria-hidden="true"
• Decorative icons next to text are hidden
• Informative icons have accessible names
• Screen reader navigation is clean and focused

---