[A11Y] [Medium] Missing skip navigation link #5
Description
Accessibility Issue: Missing Skip Navigation Link
WCAG Level: A
Severity: Medium
Category: Skip Links & Navigation
Issue Description
The application lacks a "Skip to main content" link, forcing keyboard users to tab through the entire header navigation on every page before reaching the main content.
User Impact
- Affected Users: Keyboard-only users, screen reader users
- Severity: Users must repeatedly navigate through the same header elements on each page
Violations Found
File: app/layout.tsx
Lines: 26-32
export default function RootLayout({ children }) {
return (
<html lang="en" className="dark">
<body ...>
{children}
<Analytics />
</body>
</html>
);
}Issue: No skip link present at the start of the body
File: app/calculate/page.tsx
Lines: 103-122
<header className="sticky top-0 z-20 ...">
<div className="mx-auto flex ...">
<Link href="/">← Home</Link>
...multiple nav items...
</div>
</header>
<main className="relative z-10 ...">Issue: Main content has no skip link, users must tab through entire header
Recommended Fix
File: app/layout.tsx
export default function RootLayout({ children }) {
return (
<html lang="en" className="dark">
<body ...>
<a
href="#main-content"
className="sr-only focus:not-sr-only focus:absolute focus:top-4 focus:left-4 focus:z-50 focus:bg-black focus:text-matrix-green focus:px-4 focus:py-2 focus:rounded focus:border focus:border-matrix-green"
>
Skip to main content
</a>
{children}
...
</body>
</html>
);
}All page files (app/*/page.tsx)
<main id="main-content" className="..." tabIndex={-1}>CSS for sr-only utility (if not in globals.css):
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border-width: 0;
}Changes Made:
- Add visually hidden skip link as first focusable element
- Link becomes visible on focus
- Add
id="main-content"to main landmark - Add
tabIndex={-1}to main for programmatic focus
Files to Update
app/layout.tsx(add skip link)app/page.tsx(add id to main)app/calculate/page.tsx(add id to main)app/semiconductor/page.tsx(add id to main)app/community/page.tsx(add id to main)app/mace-freeze/page.tsx(add id to main)
Testing Instructions
- Load any page and press Tab immediately
- Skip link should appear visually on focus
- Press Enter on skip link
- Focus should move to main content area
- Next Tab should focus first interactive element in main content
Resources
Acceptance Criteria
- Skip link is first focusable element
- Skip link is hidden until focused
- Skip link moves focus to main content
- Works on all pages
- Tested with keyboard navigation