feat(a11y): improve accessibility across all pages#7
Closed
Conversation
- Add skip-to-content link on community, download, and dashboard pages (home page already had it; now all pages are consistent) - Add aria-current="page" to active navigation links in Navbar, both desktop and mobile menus — screen readers now announce current page - Add aria-labelledby to major page sections (Features, How It Works, Supported Games on home; Preview Features on community) using matching id attributes on h2 elements - Add role="region" + aria-label to dashboard charts container - Add role="img" + aria-labelledby to individual chart wrappers (Recharts canvases are opaque to screen readers) - Add scope="col" to all dashboard table headers for correct cell-header associations in screen readers - Add aria-label="Recent ping test results" to the results table - Add aria-hidden="true" to purely decorative icons (Download, Construction, animated status dot) so screen readers skip them - Add aria-label and aria-disabled to download button for clear state announcement during loading - Add .sr-only utility class to globals.css (visually hidden but accessible to assistive tech) — used for the preview features section heading on the community page No new dependencies. No existing features removed. Build passes clean.
|
You have reached your Codex usage limits for code reviews. You can see your limits in the Codex usage dashboard. |
bokiko
pushed a commit
that referenced
this pull request
Mar 20, 2026
- Wrap all dashboard derived values in useMemo (PR #8) - Add skip-to-content links on dashboard, community, download pages (PR #9) - Add ARIA labels to stat cards, charts, table cells (PR #9) - Add scope="col" on table headers, <time> on timestamps (PR #9) - Add aria-label on nav, aria-haspopup on mobile toggle, role="menu" (PR #9) - Add aria-current="page" on active nav links (PR #7) - Add aria-labelledby on home page sections (PR #7) - Add .sr-only CSS utility class (PR #7) Closes #8, closes #9. Supersedes #7. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
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
Accessibility pass across the entire site. No new dependencies. Build passes clean.
Changes
Skip-to-content links
Community, download, and dashboard pages were missing the skip-to-content link that home already had. Added to all three pages with matching
id="main-content"on the<main>element.Active navigation state
Added
aria-current="page"to active links in Navbar (both desktop and mobile menus). Screen readers now announce which page is currently active.Landmark regions with labels
Added
aria-labelledbyto major<section>elements on the home and community pages, usingidattributes on the corresponding<h2>headings. Screen reader users navigating by landmarks now get meaningful section names.Dashboard charts
Recharts renders to
<canvas>/ SVG that screen readers cannot interpret. Wrapped each chart inrole="img"witharia-labelledbypointing to the visible h3 heading.Results table
Added
scope="col"to all<th>elements andaria-labelon the<table>itself so screen readers correctly associate headers with data cells.Decorative icons
Added
aria-hidden="true"to purely decorative Lucide icons (Download, Construction, animated status dot) to prevent redundant screen reader announcements.Download button state
Added
aria-labelandaria-disabledto the download anchor during loading state for clear announcement of loading vs ready state.sr-only utility
Added
.sr-onlyCSS utility toglobals.css— standard visually-hidden pattern used for the community preview features section heading.Files changed
web/src/app/globals.cssweb/src/components/Navbar.tsxweb/src/app/page.tsxweb/src/app/community/page.tsxweb/src/app/dashboard/page.tsxweb/src/app/download/page.tsxLines
+57 / -27