Skip to content

fix: add skip-to-main-content link for keyboard and screen reader acc…#185

Open
5hivam123 wants to merge 1 commit into
codepvg:mainfrom
5hivam123:fix/skip-to-main-content
Open

fix: add skip-to-main-content link for keyboard and screen reader acc…#185
5hivam123 wants to merge 1 commit into
codepvg:mainfrom
5hivam123:fix/skip-to-main-content

Conversation

@5hivam123

@5hivam123 5hivam123 commented Jun 15, 2026

Copy link
Copy Markdown
Contributor

Description

Added a visually-hidden "Skip to main content" link as the first focusable element on all navbar pages. This allows keyboard-only users to bypass the navigation menu and jump directly to the main content area, complying with WCAG 2.1 SC 2.4.1 (Bypass Blocks).

Linked Issue

Fixes #162

Changes Made

  • Added .skip-link CSS class to styles/main.css
  • Added <a href="#main-content" class="skip-link"> as first element in <body> of about.html, leaderboard.html, and registration.html
  • Added id="main-content" to <main> tag in all three files

Type of Change

  • Bug fix
  • New feature
  • UI/Visual update
  • Documentation update
  • Refactor

Testing

  • Tested locally
  • Tested on mobile viewport (if applicable)
  • No console errors introduced

Checklist

  • My code follows the project's coding style
  • I have formatted my code locally by running npx prettier --write . before submitting
  • I am submitting my PR from a dedicated feature/* branch, not the main branch
  • I have performed a self-review of my code
  • My changes generate no new warnings or errors
  • I have updated documentation if required
  • I have linked the relevant issue

Screenshots / Screen Recording

  • Skip link is invisible by default ✅
  • Skip link appears at top-left when focused via Tab key ✅
  • Clicking skip link jumps directly to main content ✅

@github-actions

github-actions Bot commented Jun 15, 2026

Copy link
Copy Markdown
Contributor

Thank you for submitting a pull request.

Please ensure your changes comply with the project's contribution guidelines and that all workflow checks pass successfully.

Formatting and Branching

  • Please confirm you have formatted your code locally using npx prettier --write ., or you can simply comment /format on this PR to have our bot do it for you!
  • Ensure this PR is made from a feature/* branch and not main.

Note: This project is currently maintained by a solo maintainer, so reviews and responses may sometimes take a little time. Thanks for your patience.

@5hivam123 5hivam123 mentioned this pull request Jun 15, 2026
Open
@jagdish-15

jagdish-15 commented Jun 15, 2026

Copy link
Copy Markdown
Collaborator

There seems to be a merge conflict. Could you pull the latest main branch, resolve the conflict locally, and push the updated branch once?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

No reviews

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

[A11y]: No skip-to-main-content link for keyboard and screen reader users

2 participants

@5hivam123 @jagdish-15