Some old browser engines don't fully support hyphenation, so they need
some extra help. Now, the entire site should fit in a 150 CSS-pixel wide
viewport.
Clean up some link text too so the text alone is more useful.
- Shrink some excessive alt text
- Remove some redundant links
- Screenreaders that split elements up aren't just on touchscreens
- Mention ChromeVox in list of screen readers
- Move TOC higher in page
- Spelling
- Drop more unused classes
Putting the heading in the navigation element makes the structure more
logical and matches the behavior of most other websites.
Move it before the introduction in my web best practices post.
- Replace hashes in code snippets with variables for screen-readability
- Use hyphens where valid instead of combined words for screen reader
pronunciation
- Typo
- Add WIP section on screen reader support tips not already covered.
- New section on in-page search
- Mention most alt search indexes don't support JS
- Background images bad
- More sample tests: word processors that support HTML
- Mention checking privacy policies for 3p content
- Elaborate on more mainstream examples of color overrides
- Link to CSS WG docs instead of MDN for prefers-contrast since they're
more detailed.
- Specify that I'm just removing margins in <figure> elements for
quotations.
- Add quote describing how blind readers struggle to find non-semantic context
- Mention that longdesc is deprecated by simple hyperlinks. Describe an alternative.
- Transcripts are necessary for machine translation
- Improve alt-text used alongside an image transcript
- Re-phrase a line referring to a previous section; after some
re-arrangements, that section is no longer a "previous" section.
- Replace spatial terminology ("bottom") with sequential terminology
("end")
- Add note on font enumeration without the Font Access API
- Acknowledge testing in grayscale but emphasize that it isn't enough.
- Move defense of link underlines to just after the section on custom
colors, since it's more relevant to it.
- Add xkcd image into the page instead of just linking, since the linked
page content is an image that doesn't include a transcript or
descriptive alt-text.
- Trivial rephrasings
- Make sure that headings don't have the same name as any links, to
avoid creating links with similar names but different purposes
- Remove useless <aside> elements that wrap landmarks.
- Move TOC down a bit, after the intro.
- Elaborate on each image optimization tool
- Mention using GNU Parallel or squoosh.app
- Describe libavif with libaom+butteraugli and the YUV400 color space
- Why you should avoid srcsets based on viewport or display properties
- Fix code snippet for <picture> sample
Threw in some formatting and very minor phrasing fixes.
- Elaborate on how contrast needs to be maintained under different
conditions like different screens, gamma adjustments, and color
blindnesses
- Add my skepticism about progressive decoding.
- Describe how to calculate intrinsic side to avoid layout-shifts caused
by CSS Containment
- Mention use of relative font sizes.
- Replace incorrect use of the word "inline" when describing images.
- Cite WAI more
- Mention merit of dark image variants
- Fix shitty ARIA
- use a <dl> list in one place.
- Describe use of `prefers-contrast: less`
- Narrow screen fixes.
- Give the intro a heading
- Make the preface an <aside> with a "doc-preface" DPUB-ARIA role
- Move the TOC before the intro
- Give the TOC a "doc-toc" DPUB-ARIA role
- Provide a TLDR
- Mention that captions can be repositioned relative to figure content
- Edit my captions in light of that fact
- Add unformatted/plain-text agents to "future work"
- Lowercase a heading
Describe how to best include images and figures in a way that flows well
and is accessible to both sighted and non-sighted users.
Describe how sticky elements can be a usability hazard on short
viewports
- Add changefreq
- Clean up structured data for quotations
- Add more sample unorthodox tests
TODO: dark image variant of image in new "Beyond alt-text" section
