a11y: fix contrast, footer link affordance, and table headers (metric: Accessibility) - #5
Merged
Merged
Conversation
Metric: Accessibility (90-93 -> expected 100 on all ten audited pages) Three axe failures repeat across every page: 1. color-contrast (10/10 pages). text-gray-500 (#6a7282) is used for secondary text on the dark backgrounds, giving 3.13-4.02:1 against the six backgrounds in use (#0d0d0d, #141414, #171717, #1c1c1c, #222222, #262626) where 4.5:1 is required. text-gray-600 (#4a5565) on the co-author line was worse at 2.00:1. Both are replaced with text-gray-400 (#99a1af), which measures 5.82:1 in the worst case (#262626) and 7.47:1 in the best. 2. link-in-text-block (10/10 pages). The footer link is #ff6900 inside #6a7282 text, 1.67:1 where 3:1 is required, and had no non-colour affordance. Recolouring cannot fix this - even against the new gray-400 the ratio is 1.11:1 - so the link is now permanently underlined instead of only on hover. 3. td-has-header (7/10 pages). Every ranking table ends with an empty <th> above the Stats/Profile link column, leaving those data cells without a header. Each now carries a visually hidden label. The hidden labels follow the existing BEM + @apply convention rather than putting a bare sr-only utility in the markup. Co-Authored-By: Claude Opus 5 <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
2 participants
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.
Metric targeted: Accessibility
Currently 90–93 across all ten pages I audited (Lighthouse, Chrome 151, mobile preset). Three axe failures repeat site-wide:
color-contrastlink-in-text-blocktd-has-header1. Colour contrast — 10/10 pages
text-gray-500(#6a7282) is the site's secondary-text colour. Measured against the six dark backgrounds actually in use:All fail the required 4.5:1.
text-gray-600(#4a5565), used on the co-author line, was worse at 2.00:1. Both becometext-gray-400, which clears 4.5:1 everywhere with margin.2. Footer link relies on colour — 10/10 pages
#ff6900on#6a7282surrounding text is 1.67:1 (3:1 required), with no other affordance. This one cannot be fixed by recolouring — even against the new gray-400 the ratio is only 1.11:1 — so the link is now permanently underlined rather than underlined on hover.3. Data cells without headers — 7/10 pages
Every ranking table ends with an empty
<th>above the Stats/Profile link column:so those
<td>s have no associated header. Each now carries a visually hidden label ("Stats" or "Profile" to match the column's link text), using a BEM class with@apply sr-onlyper the project's styling convention rather than a bare utility in the markup.Scope note
The contrast change is applied to all
text-gray-500/600occurrences in the components, not only the specific nodes Lighthouse happened to reach — the same colour on the same backgrounds fails identically in states the audit didn't exercise. This is a deliberate, visible design change: secondary text gets lighter.Verification
npm run buildandvue-tsc --noEmitboth pass;sr-onlycompiles into the emitted CSS.🤖 Generated with Claude Code