Pre-Launch Accessibility Checklist v2

Grace Lutheran Church · gracetampa.org rebuild · WCAG 2.2 AA

Scoped to Rejoice Pro + Contact Form 7. Final pre-launch verification pass. Rejoice = theme-specific · CF7 = forms · critical = common audit failure · new in v2 = added with the palette change

Retired Token Cleanup 1.4.3 · 1.4.11new in v2

The palette swap is only done when the old hexes are gone from every layer. Three places hold colour independently: the child style.css, Customizer → Additional CSS, and hexes baked into .gpv- blocks in post_content.

• No retired hexes anywhere in the build

  Grep all three layers for #1E3A5F (navy), #e8772e (orange), #9C3D1F (rust), #F7F7F7 (gray band). Each one either fails contrast or reads as a different meaning than intended.
• Footer orange/red resolved Rejoice

  Tracked in the PENDING block in style.css. Footer background should be #563A22, links and description #FAF6F0, link hover #8FCB84.
• Signature green used for display only

  #049244 is 4.04:1 on white — logo file and 18px+/bold display type only. Anything text-level, including links and small labels, uses #037A39.
• Camel and gold carry no meaning

  #C68D58 (2.65:1) and #C89B3C (2.38:1) are below the 3:1 that borders, icons and state indicators need. Allowed only where a text label directly beside them says the same thing.

Colour & Contrast 1.4.3 · 1.4.11 · 1.4.1

The swatch sheet solves the palette; these verify it’s actually applied in the build.

• Body text hits 4.5:1 everywhere

  Espresso #2B2420 on cream is 14.18:1. Spot-check pages where Rejoice injects its own colours (Customizer defaults, widget areas) — theme values can override your tokens.
• Links are underlined sitewide

  Green against espresso body text is under 3:1, so colour alone doesn’t mark a link. The footer is the sharpest case: links and description text are both #FAF6F0, so the underline is the only thing distinguishing them.
• CF7 field borders visible CF7

  Confirm inputs use #8C7B6A (4.07:1 vs white), not Rejoice’s default faint border. Rejoice’s input styling is the thing to override.
• Donate button uses the leaf fill, not primary green

  On the trunk top bar, #5CAC4F with an espresso #2B2420 label reads at 5.43:1. Primary green on trunk is only 2.80:1.
• Active nav state isn’t colour-only Rejoice

  #E5E9DD tint with #563A22 text (8.41:1) plus the 3px #037A39 underline. The underline is what makes the state non-colour-only.
• Text over hero images has a scrim

  Overlay #1A1512 at 0.7 opacity, or a text shadow. Check against the actual photos, not the placeholder.
• Success messages carry an icon or text label

  Green is now the primary interactive colour, so #3D4F2F success states no longer read as distinct from links on colour alone.

Focus & Keyboard 2.4.7 · 2.1.1 · 2.4.3

Rejoice strips focus outlines for aesthetics — still the single most frequent failure. The v2 ring inverts on dark fills, so there are two things to check, not one.

• Focus ring visible on every interactive element Rejoice

  Tab through each page. Missing outlines mean the theme set outline:none. Restore with trunk #402F1D, 3px, 2px offset — 11.88:1 on cream, 12.79:1 on the white header.
• Ring inverts to cream on green, olive, brown and trunk fills

  Trunk drops to 2.34:1 on the green fill. Cream #FAF6F0 holds 5.07:1 there and 9.64:1 on the brown footer. The outline-color override needs !important — the sitewide a:focus-visible rule uses the outline shorthand with !important and will otherwise win.

  :focus-visible{
    outline:3px solid #402F1D;
    outline-offset:2px;
    border-radius:8px;
  }
  .gpv-btn:focus-visible,
  .gpv-donate:focus-visible,
  .gpv-footer a:focus-visible{
    outline-color:#FAF6F0 !important;
    box-shadow:0 0 0 5px #402F1D;
  }

• Leaf fill is the exception — trunk ring, not cream new in v2

  On #5CAC4F (the Donate button) the trunk ring is 4.55:1 and the cream ring only 2.61:1. This is the one dark-ish fill that keeps the light-surface ring.
• Nav hover doesn’t produce green-on-green Rejoice

  Check the Rejoice nav link hover value against whatever bar it actually sits on. Primary green over a green fill disappears; cream #FAF6F0 is the fix where the bar isn’t white.
• Whole site operable by keyboard alone

  No mouse: reach every link, form field, menu item, and the Google Calendar agenda embed. Watch the mobile nav toggle.
• No keyboard traps

  Tab out of every widget — the calendar iframe especially, plus any modal.
• Focus order matches reading order

  Rejoice’s offset-/column tricks can scramble tab order against visual order.

Forms 1.3.1 · 3.3.1 · 3.3.2 · 4.1.3

Every CF7 form needs the same passes. Resolve outstanding form-tag/mail-tag mismatches first — a form that errors on submit can’t be validation-tested.

• Columbarium and Plan a Visit forms submit clean CF7

  Both were showing three errors each — likely form-tag vs. mail-tag name mismatches. Fix before running the validation tests below.
• Every field has a real label tied to it CF7

  The bare-<label>-wrapping pattern satisfies this when the input sits inside the label. Verify placeholders aren’t standing in for labels.
• Required fields marked beyond colour CF7

  Asterisk or “(required)” text, not just a border colour. Add aria-required.
• Error messages announced and specific CF7

  Validation text should say what’s wrong, sit in aria-live, and not rely on #A6321E alone. Submit a bad entry on each form.
• Success confirmation is perceivable CF7

  CF7’s response output is role="alert" by default — confirm it survived styling and reaches a screen reader.
• Placeholder text meets contrast

  #6E5F55 is 6.12:1 on white. Rejoice’s default placeholder gray usually fails.
• Spam widget is keyboard reachable new in v2

  If Turnstile goes in before launch, tab to it and confirm it isn’t skipped or trapped, and that a challenge failure produces a message that isn’t colour-only.

Images & Media 1.1.1

• All staff headshots have alt text

  Audrey’s photos across every profile page — each needs alt="[Name], [role]". Decorative flourishes get empty alt="".
• Meaningful images described, decorative ones empty-alt’d

  Logo and any icon carrying information → described. Background and ornamental → alt="" so screen readers skip them.
• Tabler icons hidden or named new in v2

  Decorative icons get aria-hidden="true". Icon-only links and buttons need an accessible name — visually hidden text or aria-label.
• Google Calendar embed has a title Rejoice

  <iframe title="Grace events calendar"> — an unlabelled iframe reads as just “frame”.

Structure & Semantics 1.3.1 · 2.4.1 · 2.4.2 · 2.4.6

• One <h1> per page, headings nested in order

  No skipping h2→h4. Rejoice section titles sometimes hard-code a level — check the outline.
• Every page has a unique, descriptive title new in v2

  Worth a pass after the page consolidations — 301’d and renamed pages can inherit a stale or duplicated <title>.
• Link text makes sense out of context

  No bare “click here” or seven identical “read more” links. “Read Pastor Jennifer’s bio” beats “read more”.
• “Skip to content” link present Rejoice

  Lets keyboard users bypass the nav. Rejoice may not ship one. If it’s visually hidden until focused, it needs the trunk ring when it appears.
• Page language set

  <html lang="en"> — usually handled by WordPress, confirm it isn’t blank.

Responsive & Target Size 1.4.4 · 1.4.10 · 2.5.8

• Readable at 200% zoom, no horizontal scroll

  Content reflows, nothing clipped.
• Tap targets ≥24×24px new in 2.2

  Mobile nav items, form buttons, social and Tabler icon rows. Cramped icon rows are the usual miss.
• No information conveyed by colour alone 1.4.1

  Links underlined, error states have icon or text, required fields marked with more than a border colour, active nav carries the underline.

Motion & Timing 2.2.2 · 2.3.3new in v2

• Auto-advancing slider can be paused or stopped Rejoice

  If any Rejoice slider auto-rotates for more than five seconds, it needs a pause control — or turn autoplay off, which is the simpler fix.
• Reduced-motion preference respected

  Wrap transitions and slider animation in @media (prefers-reduced-motion: reduce) so they shorten or stop.

Grace Lutheran Church at Carrollwood · accessibility checklist v2 · aligned to palette v2 (logo-derived)