Fix two accessibility failures Lighthouse cannot see - #16
Merged
Merged
Conversation
Lighthouse reported 100 for accessibility on every page. Lighthouse runs a subset of axe-core; the full suite, plus a measurement neither tool can make, found two more. Muted text fails AA in practice. --text-muted (#6f7468) scores 4.52:1 against plain cream, a pass by 0.02 — but no text sits on plain cream. The fixed grain and grid layer darkens the ground to a measured median of #e6e5e1 (sampled from a screenshot, 26k pixels around the lede), where it is 3.81:1. Both tools treat that layer as a background image they cannot evaluate, so neither failed it. #5d6157 is 5.03:1 against the measured median, 4.75:1 at its darkest 1%, and 5.52:1 on the tinted sections, where the old value was already 4.18:1 by the tools' own model. The contact shortcuts were outside every landmark (axe: region, on every page). Fixed to the viewport, the div sat outside header, main and footer, so anyone moving by landmark could not reach the two most useful controls on the site. It is now an <aside>. Full axe-core 4.13, WCAG 2.0-2.2 A/AA plus best-practice: zero violations on all eight routes.
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.
Lighthouse scored accessibility 100 on every page after #15. But Lighthouse runs a subset of axe-core — the full suite, plus a measurement neither tool can make, found two more real failures.
1. Muted text fails WCAG AA in practice
--text-muted(#6f7468) scores 4.52:1 against plain cream — a pass by 0.02. But no text on this site sits on plain cream: the fixed grain-and-grid layer (Atmosphere) darkens the ground.Measured, not modelled: sampled ~26,000 background pixels around the lede from a screenshot.
#faf8f3cream#e6e5e1Both tools treat that layer as a background image they cannot evaluate (axe returns it as incomplete), so neither failed it. A colour model of the overlay predicted 3.81:1 to two decimals before sampling, which is why I trust the measurement.
#5d6157is the fix — 5.03:1 against the measured median, 4.75:1 at its darkest 1% (margin for JPEG sampling error), and 5.52:1 on the tinted sections, where the old value already failed at 4.18:1 by the tools' own plain-colour model.2. The contact shortcuts were outside every landmark
axe
region, on every page. Fixed to the viewport, the Call/WhatsApp group sat outsideheader,mainandfooter, so anyone moving through the page by landmark — the usual way with a screen reader — couldn't reach the two most useful controls on the site. Now an<aside aria-label="Contact shortcuts">.Verification
Full axe-core 4.13, WCAG 2.0–2.2 A/AA + best-practice, all eight routes: zero violations. One transient hit on the homepage was the decorative "Scroll" cue sampled mid fade-in (opacity 0.6); at rest it passes.
The giant ghost numbers on Services also came back incomplete — they're
aria-hiddendecoration, which WCAG exempts.