Description

The header/navigation components currently lack proper ARIA attributes for improved accessibility.

Current State

Navigation links and menu buttons don't have:

• aria-label attributes (for icon-only buttons)
• aria-expanded attribute (for hamburger/toggle menu)
• role attributes on custom menu elements

Suggested Changes

Add accessibility improvements to:

• Header.js: Add aria-label to hamburger menu button, aria-expanded state
• Navigation list items: Add proper role attributes if using custom elements
• Close button (if exists): Add aria-label

Example

// Before
<button onClick={toggleMenu}>☰</button>

// After  
<button 
  onClick={toggleMenu} 
  aria-label="Toggle navigation menu"
  aria-expanded={isOpen}
>
  ☰
</button>

Benefits

• Improves accessibility for screen reader users
• Helps with keyboard navigation
• Better SEO
• Aligns with WCAG 2.1 AA standards

Resources

• ARIA Authoring Practices Guide
• MDN: ARIA Labels