fix: improve website accessibility and CTA clarity - #31
Merged
Merged
Conversation
Applies marketing and design review feedback on the landing page. Accessibility: the --muted token was 3.87:1 on white, below the AA threshold for body text, and it drives the tagline, section leads, nav links, captions, and footer. Darkened it along with the terminal block's comment color and the diagram's Allowed/Blocked labels, which failed the same check. The docs theme has its own palette where --ifm-color-content-secondary was 4.49:1 while rendering real body copy. UX: dropped the hover lift on the approach cards and the pill styling on the hero badges, both of which implied clickable controls. The badges are now a plain attribute list. The wide "how it works" diagram scaled its 9px labels below legibility on phones, so a vertically stacked variant now takes over under 720px. Copy: removed the hero logo, already present in the sticky nav, to lift the headline above the fold; "coming soon" became "on the roadmap", and the primary CTAs name their destination.
|
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.
Applies a round of marketing and design review feedback on the landing page. Seven points were raised; all seven held up on inspection and are applied here.
Accessibility
--mutedwas#7a8291, 3.87:1 on white — below the 4.5:1 AA threshold for body text. It is the token behind the tagline, section leads, nav links, badge text, diagram caption, and footer, so it accounted for most of the reported failures. Now#616a79(5.46:1 on white, 5.14:1 on--bg-subtle).Three further failures of the same kind that were not in the feedback:
.cli-block .comment—#6b7280on#14181fwas 3.68:1The docs site carries a separate palette, where
--ifm-color-content-secondarywas 4.49:1 on white while rendering real body copy in.enclave-box p; the footer copyright was 4.33:1 on navy. Both fixed.All 16 changed foreground/background pairs now compute at ≥5.0:1.
False affordances
translateYhover lift but are not links. Removed.coming-soonbadge reused the primary CTA's exact gradient. Replaced with a plain attribute list (.hero-facts) — no fill, border, or radius, each item prefixed with a small check glyph so it reads as a spec list rather than a row of disabled buttons.Mobile diagram
The "how it works" diagram is a 720-wide viewBox with 9px labels, which render around 4px at a 320px viewport. A vertically stacked variant (
340×510, Developer → Container → Gateway → Allowed/Blocked) now takes over under 720px and the wide one hides. Capped at 340px so it renders near 1:1 instead of scaling up.display: nonealso keeps the inactive variant out of the accessibility tree, so there is no duplicate announcement.Copy and layout
104px → 84px, the headline moves up roughly 120px.Also corrected a stale comment in
styles.cssclaiming the docs theme mirrors these tokens — it has its own palette.Verification
<svg>; no duplicateids across the page.make check-license-headerspasses (458 files).Not verified: no browser was available in the authoring environment, so these changes have not been seen rendered. The stacked diagram's visual balance and the wrapping of
.hero-factsat narrow widths are reasoned from geometry rather than observed — worth a look viawebsite/preview.shbefore merging.make build/test/lintwere not run, as no Go code changed.