- 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
Fediverse users gave good feedback, and I found other info elsewhere.
- Avoid the system-ui font
- Re-clarify article scope (textual websites)
- Mention dynamic content injection
- Describe saving pages offline
- Mention pictures of text versus narrow viewports
- Remove unnecessary info on why i removed margins from figures
- Mention indentation in preformatted code
- Describe appropriate size ranges for inlining images.
- Mention possibility of reporting issues in reading mode section
- Add info on screen readers changing kb nav to "future updates"
- Add info on special keyboard-driven browsers to "future updates"
- Describe best-practices for alt-text, figcaptions, and briefly
mention transcripts.
- Add a conclusion
Also fix anchors for headings containing HTML entities and some minor
fixes throughout.
- Mention calculation of font metrics
- Add related issues to lazy loading
- Justify importance of dark themes
- Trivial formatting tweak in a <pre> block
- Mention OCSP stapling, 0-RTT
- Spelling/grammar help machine translation
- Add more details to "future work" section
- Acknowledge Axess Lab
Add a better screenshot showcasing bad custom colors. Also give it a
figcaption.
The figcaption meant that I had to revise a statement later down when I
said I don't use figcaptions for images.
These recommendations also included stuff for <figure> elements; in the
spirit of dogfooding, I used some <figure> elements where appropriate
elsewhere in the page.
- Describe how contrast overkill in dark mode can cause halation
- Add more info on compatibility with the Tor browser
- Mention the rationale for a custom image border color
- More accurately note how in addition to fontconfig mappings, I also
set my browser preferred font to "sans-serif".
- Clarify that underlines help identify both the beginnings and ends of
hyperlinks.
- Formatting/phrasing fixes, esp in Gemtext.
This should reduce a lot of repetition. Supports first/last names,
nicknames, generic names that don't conform to first/last norms, and
has basic support for affiliated organizations.
Also snuck in more info on website colors to the web best practices
article, inc. a link to Chris' Wiki.
- Add a cache-busting fingerprint to all the icons in the webmanifest
- Add a <meta> and open graph tag for a description.
- Include a 512px icon in the manifest
Reduce Cumulative Layout Shift (CLS) by declaring original image
dimensions in HTML before re-scaling with CSS. This tells browsers the
image's aspect ratio before the image and the stylesheet load, allowing
browsers to block out space accordingly to avoid making elements "jump"
during loading.
More info: https://web.dev/optimize-cls/
