[FEATURE] Implement "Skip to Main Content" Accessibility Link [Good First Issue] #4614
Description
Why do we need this improvement?
The website currently does not provide a "Skip to Main Content" link.
This link is an important accessibility element that allows keyboard and screen-reader users to:
bypass repeated navigation menus
directly jump to the main content area
improve browsing efficiency
comply with WCAG accessibility standards
Adding this feature significantly improves usability for people who rely on keyboard navigation or assistive technologies.
How will this change help?
-
Enhances accessibility and inclusiveness
-
Reduces friction for keyboard users who would otherwise tab through all header/nav items
-
Improves compatibility with screen readers
-
Helps the AsyncAPI website align with WCAG 2.1 AA guidelines
-
Improves SEO and overall UX quality
This is a small but high-impact improvement.
Screenshots
Typically becomes visible only on keyboard focus.
If needed, I can provide UI mockups for styling variations.
How could it be implemented/designed?
Files to Modify
pages/_app.tsx
components/layout/Layout.tsx
Implementation Steps
Add a skip link as the first focusable element
Give the main layout an accessible target
...Add accessible keyboard-only styles
Ensure the link works with all page layouts
Place it inside Layout.tsx so it appears on all pages
Ensure navigation does not override focus behavior
Test with keyboard-only navigation (Tab / Shift+Tab)
This is a minimal, non-intrusive change that benefits all users.
🚧 Breaking changes
No
👀 Have you checked for similar open issues?
- I checked and didn't find a similar issue
🏢 Have you read the Contributing Guidelines?
- I have read the Contributing Guidelines
Are you willing to work on this issue?
None