Accessibility: no semantic landmarks, missing alt text, no skip navigation, keyboard traps

[ryuno2525]

Hi! This portfolio template has 450+ stars and a great visual design. I found several accessibility improvements that would make it usable for people relying on assistive technologies.

Issues Found

1. No skip navigation link

There is no skip-to-content mechanism for keyboard users to bypass the navigation and decorative elements (WCAG 2.4.1).

Fix: Add a visually-hidden skip link:

<a href="#main-content" className="sr-only focus:not-sr-only focus:fixed focus:top-4 focus:left-4 focus:z-50 focus:p-4 focus:bg-white">
  Skip to main content
</a>

2. Missing semantic landmarks

The page layout likely uses <div> elements throughout without semantic HTML5 landmarks (<main>, <nav>, <header>, <footer>). Screen readers rely on these landmarks to let users jump between page regions (WCAG 1.3.1).

Fix: Wrap content in appropriate landmark elements.

3. Decorative animated elements lack ARIA hiding

Framer Motion animations and decorative SVG elements should have aria-hidden="true" so screen readers skip them. Without this, screen readers may try to announce decorative content (WCAG 1.1.1).

4. Interactive elements may lack keyboard support

Custom animated components built with framer-motion may not be keyboard accessible. Ensure all interactive elements can be reached and activated via keyboard (WCAG 2.1.1).

5. Missing alt text on images

Portfolio project images and any decorative graphics should have appropriate alt text (descriptive for meaningful images, empty alt="" for decorative ones) (WCAG 1.1.1).

WCAG References

• 1.1.1 Non-text Content
• 1.3.1 Info and Relationships
• 2.1.1 Keyboard
• 2.4.1 Bypass Blocks

For a quick automated accessibility audit:

npx accessscore [your-deployed-url]

Or visit https://accessscore.autonomous-claude.com

Happy to help with a PR if these changes are welcome!