Add skip link for keyboard accessibility#15
Conversation
👷 Deploy request for thecodeversehub pending review.Visit the deploys page to approve it
|
youngcoder45
requested review from
Copilot,
rokybeast and
youngcoder45
and removed request for
youngcoder45
There was a problem hiding this comment.
Pull request overview
Adds a global “Skip to main content” link to improve keyboard/screen-reader navigation (WCAG 2.4.1 Bypass Blocks), and wires up skip targets on several primary pages.
Changes:
- Added a visually-hidden-until-focus skip link in
RootLayoutpointing to#main-content. - Added
id="main-content"andtabIndex={-1}to<main>on/,/pages,/resources, and/ban-appeal. - Wrapped the home page content in a
<main>landmark to serve as the skip target.
Reviewed changes
Copilot reviewed 5 out of 5 changed files in this pull request and generated 1 comment.
Show a summary per file
| File | Description |
|---|---|
| src/app/layout.tsx | Adds global skip-link anchor at the top of <body>. |
| src/app/page.tsx | Wraps the home page’s primary content in <main id="main-content">. |
| src/app/pages/page.tsx | Marks the docs index <main> as the skip target. |
| src/app/resources/page.tsx | Marks the resources content <main> as the skip target. |
| src/app/ban-appeal/page.tsx | Marks the ban appeal form <main> as the skip target. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| <a | ||
| href="#main-content" | ||
| className="sr-only focus:not-sr-only focus:fixed focus:left-4 focus:top-4 focus:z-[100] focus:rounded-md focus:bg-white focus:px-4 focus:py-2 focus:text-sm focus:font-semibold focus:text-black focus:outline-none focus:ring-2 focus:ring-violet-500" | ||
| > | ||
| Skip to main content | ||
| </a> |
|
Addressed the skip-link target feedback by adding |
web3blind
force-pushed
the
accessibility-skip-link
branch
from
64182c0 to
c4731eb
Compare
Summary
Adds a skip-to-content link so keyboard and screen-reader users can bypass repeated navigation and jump directly to the main content.
What changed
Skip to main contentlink in the root layout.id="main-content"andtabIndex={-1}to the main landmarks on key pages.Why
This addresses #13 and supports WCAG 2.4.1 Bypass Blocks by giving users a reliable way to skip repeated navigation.
Validation