Accessibility: theme toggle lacks label, no skip navigation, missing nav ARIA attributes

[ryuno2525]

Hi! This portfolio template is used by 1100+ developers. I reviewed the source code and found several accessibility improvements.

Issues Found

1. Theme toggle switch lacks accessible label

In src/components/Header.js, the <Switch> component with id="icon-switch" has no aria-label or associated <label> element. Screen readers will announce it as an unlabeled toggle, and users won't know what it controls (WCAG 4.1.2).

Fix: Add aria-label="Toggle dark mode" to the Switch component.

2. No skip navigation link

There is no skip-to-content mechanism. Keyboard users must tab through all header content and navigation items before reaching the main content (WCAG 2.4.1).

Fix: Add a visually-hidden skip link as the first focusable element in the body.

3. Navigation links lack ARIA attributes

The navigation should be wrapped in a <nav> element with an aria-label for screen reader identification. If there are multiple navigation regions, each should have a unique label (WCAG 1.3.1).

4. Iconify icons used without accessible alternatives

The header uses <span className="iconify"> elements for icons. These don't have accessible text alternatives. While the Switch component provides visual icons (owl and sun), screen readers can't convey their meaning (WCAG 1.1.1).

Fix: Add aria-hidden="true" to purely decorative icons, and provide accessible text for meaningful ones.

5. window.innerHeight in render causes accessibility issues

The header style uses height: window.innerHeight - 140 which causes layout recalculation and can cause content to be cut off when users zoom or use custom viewport sizes (WCAG 1.4.10 Reflow).

WCAG References

• 1.1.1 Non-text Content
• 1.3.1 Info and Relationships
• 2.4.1 Bypass Blocks
• 4.1.2 Name, Role, Value

For a quick automated accessibility scan of your deployed site, try:

npx accessscore [your-deployed-url]

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

Happy to help with a PR!