Accessibility and performance pass - #40
Merged
Merged
Conversation
…photo Measured with axe-core against the built site, and with the resource timing API for weight. Performance: the home page shipped profile.jpg at 3.0 MB, the 4060x5904 original, scaled by the browser to 280px. It sat in public/, and Astro only optimises images it can resolve at build time, so <Image> passed it through untouched. Importing it from src/assets produces 11 kB at 1x and 54 kB at 2x. The page went from 3212 kB to 201 kB. Accessibility: - The newsletter small print and its two links ran at 2.4:1 against the card, well under 4.5:1, and that text carries the privacy notice. opacity-80 puts it at about 5:1. 75 was tried first and still failed at 4.45:1. - The share label ran at 3.62:1 and is now at /70. - No page had an h1. Page titles were divs, so work, projects, blog and every post failed page-has-heading-one. Promoted to h1, with the per-entry company and the hackathons section as h2. Tailwind's preflight zeroes heading sizes, so nothing looks different. Also adds the internal link checker from the consulting site, wired into the build. Its first run found a genuinely broken image: a project page referenced sharknado_3.png where the file is sharknado_3.jpg. axe reports no violations on home, work, projects, blog index, and an English and a German post, in both light and dark mode.
leinss
added a commit
that referenced
this pull request
Aug 19, 2026
…photo (#40) Measured with axe-core against the built site, and with the resource timing API for weight. Performance: the home page shipped profile.jpg at 3.0 MB, the 4060x5904 original, scaled by the browser to 280px. It sat in public/, and Astro only optimises images it can resolve at build time, so <Image> passed it through untouched. Importing it from src/assets produces 11 kB at 1x and 54 kB at 2x. The page went from 3212 kB to 201 kB. Accessibility: - The newsletter small print and its two links ran at 2.4:1 against the card, well under 4.5:1, and that text carries the privacy notice. opacity-80 puts it at about 5:1. 75 was tried first and still failed at 4.45:1. - The share label ran at 3.62:1 and is now at /70. - No page had an h1. Page titles were divs, so work, projects, blog and every post failed page-has-heading-one. Promoted to h1, with the per-entry company and the hackathons section as h2. Tailwind's preflight zeroes heading sizes, so nothing looks different. Also adds the internal link checker from the consulting site, wired into the build. Its first run found a genuinely broken image: a project page referenced sharknado_3.png where the file is sharknado_3.jpg. axe reports no violations on home, work, projects, blog index, and an English and a German post, in both light and dark mode.
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.
Performance
The home page shipped
profile.jpgat 3.0 MB: the 4060x5904 original,scaled to 280px by the browser. It lived in
public/, and Astro only optimisesimages it can resolve at build time, so
<Image>passed it straight throughwith
width/heightattributes and nothing else.Importing it from
src/assetsgives 11 kB at 1x and 54 kB at 2x.Accessibility
Measured with axe-core 4.10.2 against the built site.
2.4:1 against the card background, against a 4.5:1 requirement, and that text
carries the privacy notice.
opacity-80puts it near 5:1.opacity-75wastried first and still failed, at 4.45:1, so this was measured rather than
guessed.
/70.h1. Every page title was adiv, sowork,projects,blogand every post failedpage-has-heading-one. Titles are nowh1, theper-entry company name and the hackathons section are
h2. Tailwind'spreflight zeroes heading sizes, so the rendering is unchanged.
Link checker
Ports
scripts/check-internal-links.mjsfrom the consulting site into the build.Its first run found a real broken image:
src/content/projects/ethromereferenced
sharknado_3.pngwhere the file on disk issharknado_3.jpg. Fixed.Test plan
pnpm build,pnpm lint,pnpm check:spacingpass/,/work,/projects,/blog/, an English postand a German post