accessibility: add ARIA labels, table semantics, and skip navigation links#9
Closed
accessibility: add ARIA labels, table semantics, and skip navigation links#9
Conversation
…links
Comprehensive accessibility pass covering the dashboard, navbar, and
secondary pages. Zero new dependencies, no feature regressions.
Changes by file:
web/src/app/dashboard/page.tsx
- Add <a href="#main-content"> skip link (keyboard users can bypass nav)
- Add id="main-content" to <main> anchor target
- Wrap stats card grid in role="region" aria-label for screen readers
- Add aria-label to each stat card with full readable description
- Mark decorative icons with aria-hidden="true"
- Add role="img" + aria-label to both chart containers describing data
- Add aria-label to <table> with visible result count
- Add scope="col" to all <th> elements (required for table semantics)
- Wrap result timestamps in <time dateTime={...}> for machine readability
- Add aria-label to ping and packet-loss <td> cells (color is not the
only indicator of quality — text label now read aloud by screen readers)
web/src/components/Navbar.tsx
- Add aria-label="Main navigation" to <nav> (landmark is now named)
- Add aria-haspopup="true" to mobile menu toggle button
- Add role="menu" + aria-label to mobile menu container
- Improve mobile toggle aria-label wording to be more descriptive
web/src/app/community/page.tsx
web/src/app/download/page.tsx
- Add skip-to-content link and id="main-content" (these pages were
missing both, making keyboard-only navigation significantly harder)
|
You have reached your Codex usage limits for code reviews. You can see your limits in the Codex usage dashboard. |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Comprehensive accessibility (a11y) pass covering the dashboard, navbar, and secondary pages. No new dependencies, no feature regressions, build and lint pass clean.
What changed and why
Dashboard (
web/src/app/dashboard/page.tsx)id="main-content"anchor target — keyboard users can bypass the sticky navrole="region" aria-label— screen readers announce the section before reading numbersaria-labelto each stat card with a complete readable description (e.g. "Average ping: 45 milliseconds — Good")aria-hidden="true"— removes noise for screen reader usersrole="img" aria-labelto chart containers — charts are otherwise completely invisible to assistive techaria-labelto the<table>element including result countscope="col"to all<th>elements — required for correct table semantics per WCAG 1.3.1<time dateTime={...}>— machine-readable date for assistive tech and parsersaria-labelto ping and packet-loss cells — color alone cannot convey quality level (WCAG 1.4.1)Navbar (
web/src/components/Navbar.tsx)aria-label="Main navigation"to<nav>— named landmark required for screen reader navaria-haspopup="true"to mobile menu togglerole="menu" aria-labelto the mobile menu containerCommunity + Download pages
id="main-content"to both pages — they were missing entirelyLines
+64 / -30