Accessibility: contrast, landmarks, and screen-reader hygiene#4
Merged
Conversation
The live site is the standalone index.html (deploy.yml rsyncs only that file; .nojekyll disables Jekyll). All fixes are scoped to it. Colorblind / low-vision (WCAG 1.4.3 contrast, white text on initial badges, 18px bold => needs 4.5:1): - Darken badges that failed or only met the large-text bar so all reach >=5:1 while keeping each brand hue: Toast #e8590c->#c2410c, Grindr #f0a020->#b45309 (was 2.15:1), Compare the Market #0ca678->#0f766e, SciPro #2f9e44->#197a37, Position Calculator feature badge accent-2 #3fb950->#177e39 (was 2.54:1). Expedia/Guvera already passed and are unchanged. Screen readers: - Add a <main> landmark around the Experience and Projects sections. - aria-hidden the decorative SVG link icons (+ focusable="false"); the visible "Email"/"GitHub"/"Resume" text is the accessible name. - aria-hidden the single-letter company initials and the "∑" project badge — redundant with the adjacent name, and announced as noise otherwise. - aria-hidden the decorative "→" in "Open it →". Keyboard: - Add a visible :focus-visible outline (only :hover was styled before). Body, muted, link and arrow text already pass (7:1–16:1) and are unchanged. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
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.
What & why
Improves the live landing page for colorblind / low-vision and screen-reader users.
Scope note: the live site is the standalone
index.html—.github/workflows/deploy.ymlrsyncs only that file to the droplet, and.nojekylldisables Jekyll, so the_includes/_layouts/_postsare dead code. All changes are confined toindex.html.Colorblind / low-vision — contrast (WCAG 1.4.3)
The colored initial badges use white text at 18px bold (just under the 18.66px "large text" threshold, so they need 4.5:1). Measured ratios before:
#f0a020#b45309→ 5.02:1 ✅#3fb950#177e39→ 5.15:1 ✅#0ca678#0f766e→ 5.47:1 ✅#2f9e44#197a37→ 5.41:1 ✅#e8590c#c2410c→ 5.18:1 ✅#1668e3#7048e8Each darker shade preserves the original brand hue. Body, muted, link, and arrow text already pass comfortably (7:1–16:1 in both dark and light mode) and are untouched. No information is conveyed by color alone — every badge sits beside the company name.
Screen readers
<main>landmark around the Experience and Projects sections (banner/main/contentinfo are now all present).aria-hidden="true"+focusable="false"on the decorative SVG link icons; the visible Email / GitHub / Resume text remains the accessible name.aria-hidden="true"on the single-letter company initials and the∑project badge — redundant with the adjacent heading and otherwise announced as noise.aria-hidden="true"on the decorative→in "Open it →".Keyboard
:focus-visibleoutline (previously only:hoverwas styled).Verification
<main>; 11aria-hidden; 3focusable="false").🤖 Generated with Claude Code