Add skip link to bypass header

[ckundo]

Problem

No "skip to main content" link is provided for keyboard users to bypass the header and navigate directly to main content.

Files to Update

• Dashboard component (add skip link at top)
• CSS file (skip link styles)

Tasks

• Add skip link as first focusable element
• Link to main content area (requires main landmark)
• Style skip link to be visible only on focus
• Ensure skip link is keyboard accessible
• Test keyboard navigation

WCAG

2.4.1 Bypass Blocks (Level A) - Mechanism to skip repeated content blocks

Recommended Implementation

<a href="#main-content" class="skip-link">
  Skip to main content
</a>

<header>...</header>

<main id="main-content" tabindex="-1">
  <!-- Main content -->
</main>

.skip-link {
  position: absolute;
  top: -40px;
  left: 0;
  background: #000;
  color: #fff;
  padding: 8px 16px;
  z-index: 100;
}

.skip-link:focus {
  top: 0;
}

Expected Outcome

Keyboard users can skip header and jump directly to main content