Accessibility pass, plus /now, /uses and the nav separator - #47
Merged
Conversation
35 of 82 pages had no h1 at all. PageLayout takes a `title` but only puts it in
`<head>`, so four templates rendered their page title in a styled `div` and the
document had no top-level heading: the two dynamic routes, education and
social. A screen reader user landing on a project page got a document whose
first heading was an h2 belonging to the newsletter widget.
Promotes the existing title element from `div` to `h1` rather than adding a
second heading. Zero visual change, because Tailwind preflight resets heading
font-size and margin and every class is carried over. Verified in the browser
against the built site: the promoted h1 computes to font-size 18px, weight 600,
margin-top 0, which is what the div rendered.
Also adds alt text to the one image that had none, on the Farcaster project
page. That image is the only content of a link to a YouTube video, so with no
alt the link had no accessible name either.
Not changed, having checked: twelve other image-only links were flagged by a
first pass and are fine. An img with alt text names its wrapping link, and they
all carry `alt="demo image"`. That alt is uninformative and worth improving as
content, but it is not a missing name.
Test plan:
- [x] `pnpm run lint` and `pnpm run build` pass, 82 pages
- [x] internal link check still 1760 links, none broken
- [x] re-audit: pages with no h1 went 35 -> 0, images without alt 1 -> 0,
genuinely unnamed links 1 -> 0
- [x] computed style of a promoted h1 read from the rendered page, not assumed
Three things, all visible on the live site. The nav rendered "now uses / work / projects". The separator was hardcoded between the fixed entries only, while the static pages were mapped with nothing between them, so any two of them ran together. Emitting it before every mapped entry except the first is correct for one page or five. /now did not mention the day job at all. It described the apps and the consultancy and stopped, so the single most substantial thing on the page was missing: senior backend engineer at Gnosis working on Circles, owning the backend services and the platform under them. It now leads with that and carries the figures already published on the CV, then the apps, then the consulting. Also dated June and now two and a half months stale; refreshed, and TobiBoard's F-Droid repository is linked because it is a thing a reader can install. /uses carried three `TODO(Tobias)` comments shipped in the content and described a stack far smaller than the real one. It listed a Mac, zsh, fnm and Astro, and omitted the entire infrastructure side, which is the professionally interesting half. Now covers the terminal tooling, the mobile and distribution stack including the self-hosted F-Droid repository, and the self-hosted infrastructure: Ansible, Docker and Traefik, the Prometheus and Grafana and Loki and Alertmanager stack, Tailscale, Borg, PostgreSQL with replication. Deliberately not listed there, and the page says so: the identity, DNS-filtering and intrusion-detection components. Naming those is a small favour to somebody scanning and no favour to a reader. The editor line is gone rather than guessed. One of the TODOs asked to confirm it and I would only have invented an answer. Test plan: - [x] `pnpm run lint` and `pnpm run build` pass, 82 pages - [x] internal link check passes, none broken - [x] nav renders "now / uses / work / projects" in the built HTML - [x] both pages served and screenshotted, headings h1 then h2 throughout - [x] no TODO comments left in staticPages
leinss
changed the title
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.
35 of 82 pages had no h1 at all. PageLayout takes a
titlebut only puts it in<head>, so four templates rendered their page title in a styleddivand thedocument had no top-level heading: the two dynamic routes, education and
social. A screen reader user landing on a project page got a document whose
first heading was an h2 belonging to the newsletter widget.
Promotes the existing title element from
divtoh1rather than adding asecond heading. Zero visual change, because Tailwind preflight resets heading
font-size and margin and every class is carried over. Verified in the browser
against the built site: the promoted h1 computes to font-size 18px, weight 600,
margin-top 0, which is what the div rendered.
Also adds alt text to the one image that had none, on the Farcaster project
page. That image is the only content of a link to a YouTube video, so with no
alt the link had no accessible name either.
Not changed, having checked: twelve other image-only links were flagged by a
first pass and are fine. An img with alt text names its wrapping link, and they
all carry
alt="demo image". That alt is uninformative and worth improving ascontent, but it is not a missing name.
Test plan:
pnpm run lintandpnpm run buildpass, 82 pagesgenuinely unnamed links 1 -> 0