Fix WCAG 2 AA a11y issues on the homepage#76
Draft
etagwerker wants to merge 1 commit into
Draft
Conversation
axe-core flagged 23 issues on the current homepage: missing lang attribute, color-only link signifiers, low-contrast body and nav text, no skip link, multiple h1s, missing alt text on images. This commit fixes all of them while keeping the existing light visual style. Changes: - Set <html lang="en"> - Underline inline body paragraph links (was color-only) - Darken $dark-gray and $light-gray for AA contrast on white - Hero and footer render the photo as <img> with a solid scrim div so axe can compute contrast for the white text on top - Single page <h1> (the hero). Content sections demote to <h2>. Logo h1 becomes a div, footer wordmark h1 becomes a presentational <p>. RSpec selectors updated to match - Add <main> landmark and a visually-hidden skip-to-main link - Descriptive alt text on all four member badges - rel="noopener noreferrer" on every target="_blank" - aria-label on nav, social/engagement lists, sections, logo, and the decorative map div - prefers-reduced-motion override disables animations on request Verification: - bundle exec middleman build: Project built successfully - bundle exec rspec spec/features/index_spec.rb: 8 examples, 0 failures The CI a11y check that verifies "0 violations" comes in a follow-up PR stacked on top of this one. Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
This was referenced May 22, 2026
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.
This PR fixes the 23 accessibility issues axe-core flagged on the current homepage. The existing light visual style is preserved. The automated CI check that enforces "0 violations" comes in a follow-up PR stacked on this one.
What axe-core found
Running axe-core (WCAG 2 AA) against the current homepage surfaces 23 errors across three rules:
html-has-lang(1):<html>is missinglanglink-in-text-block(3): inline paragraph links are distinguishable only by colorcolor-contrast(19): low-contrast body text, nav links, and white-on-photo hero/footer textThis PR fixes all 23, plus a handful of semantic issues axe doesn't flag (multiple
<h1>per page, missing<main>landmark, missing alt on badges, missingrel="noopener noreferrer", no skip link).Changes
<html lang="en">$dark-gray(#787878 → #5e5e5e, ~6.5:1) and$light-gray(#bcbcbc → #6b6b6b, ~5.2:1) so body and nav text clear WCAG AA on white<img>with a solid-color scrim<div>over it. Axe can't compute contrast againstbackground-image, and this lets the white hero/footer text pass the check while preserving the photo<h1>(the hero). Content sections (about / connect / sponsors / badges) demote to<h2>. The logo<h1>becomes a<div>, the footer wordmark<h1>becomes a presentational<p>. RSpec selectors updated to match<main id="main-content" tabindex="-1">landmark plus a visually-hidden "Skip to main content" link that reveals on focusalton every member badge image,rel="noopener noreferrer"on everytarget="_blank",aria-labelon the nav, the social/engagement lists, the next-event/sponsors/badges sections, the logo, and the decorative map divprefers-reduced-motion: reducerule disables animations and transitions for users who request itVerification
The CI check that asserts "0 violations" lives in the stacked PR.
Stacking
This PR is opened against
ci/add-build-workflow(#74) because the follow-up CI check PR extends that workflow. Once #74 lands, happy to retarget this againstmain.Test plan
<main>,<nav>, and section labels announce🤖 Generated with Claude Code