Skip to content

fix(seo): a11y + CLS polish (homepage contrast/headings + Showcase logos)#2063

Open
moonming wants to merge 2 commits into
masterfrom
feat/seo-homepage-polish
Open

fix(seo): a11y + CLS polish (homepage contrast/headings + Showcase logos)#2063
moonming wants to merge 2 commits into
masterfrom
feat/seo-homepage-polish

Conversation

@moonming

Copy link
Copy Markdown
Member

Summary

Homepage accessibility polish — the P2 items from the homepage-rewrite audit (now that fix/homepage-layout has landed):

  • WCAG AA contrast — darken low-contrast text:
    • secondary greys #777 / #8a8a8a / #888#6b6b6b (~5.3:1)
    • CTA red text #e8433e#c7352f (the existing hover shade in the palette, ~5.3:1) on the Pathways / Integrations / AI-gateway CTAs and the comparison APISIX column
    • left the large bold hero stat value (passes AA-large at 3:1) and the decorative aria-hidden flow arrow unchanged
  • Heading hierarchy — Pathways card titles h3h2, fixing the homepage h1h3 skip. Styling is class-driven (.pathways__title), so there is no visual change.

8 lines changed; no layout or structural changes.

The CTA change keeps the brand red, just an AA-compliant darker shade for normal-size text (#c7352f is already the hover color). If you'd rather keep the brighter #e8433e on CTAs, that half is trivial to revert.

Out of scope

  • The 2 dimensionless <img> the CWV check flagged are on /showcase/ and /plugins/, not the homepage (the homepage Integrations logos already have explicit width/height).
  • Real CWV numbers still need a PSI API key or a Lighthouse run.

Test plan

  • Diff verified: exactly the 8 intended color/heading changes, no collateral
  • New colors are objectively WCAG AA (#6b6b6b 5.3:1, #c7352f ~5.3:1); class-driven h2 = no visual regression
  • CI deploy build green

moonming added 2 commits June 26, 2026 10:41
- Darken low-contrast text to meet WCAG AA:
  - secondary greys #777 / #8a8a8a / #888 -> #6b6b6b (5.3:1)
  - CTA red text #e8433e -> #c7352f (the existing hover shade, ~5.3:1) on the
    Pathways / Integrations / AI-gateway CTAs and the comparison APISIX column
  - left the large bold hero stat value (passes AA-large) and the decorative
    aria-hidden flow arrow unchanged
- Promote Pathways card titles h3 -> h2 to fix the homepage h1->h3 heading skip
  (styling is class-driven, so no visual change)
The Showcase user-logo wall sized logos with max-width/max-height only, so the
browser reserved no space until each (lazy, variable-aspect) logo loaded. Give
each logo a fixed 100x40 box with object-fit: contain plus matching width/height
attributes: space is reserved (no layout shift), logos are not distorted, and
the wall renders uniformly. The Plugin Hub logos use a 250x180 max and would
need a deliberate box-reservation design pass, so they're intentionally left.
@moonming moonming changed the title fix(seo): homepage a11y polish — WCAG AA contrast + heading hierarchy fix(seo): a11y + CLS polish (homepage contrast/headings + Showcase logos) Jun 26, 2026
@moonming

Copy link
Copy Markdown
Member Author

Added a second commit: reserve a fixed 100×40 object-fit: contain box for the Showcase user-logo wall (+ matching width/height attrs) so the variable-aspect logos no longer cause layout shift, without distortion.

Plugin Hub logos left intentionally: they use a 250×180 max and are dynamically sourced (variable aspect), so a correct CLS fix means box-reserving 250×180 — which would balloon small logos with whitespace and visibly change the hub just reworked in #2061. Not worth it for below-the-fold, lazy-loaded images; flagging for a deliberate design pass if desired.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant