- Make webring links touch-friendly and accessible by using spaced-out
details elements.
- Make details elements touch-friendly by indicating interactive region
area and making summary padded.
- Sort featured posts by featured order.
- Ensure that at least one non-interactive tappable region exists on the
screen at all times, 48x48 px.
Adjust margins/paddings to actually meet the 48px recommended
tap-target size.
Also get rid of the unstyled-list class. Now my stylesheet only uses a
single class; everything else is actually-semantic-markup.
Increased font size to decrease chars-per-line (SC 1.4.8) and increase
tap target size.
Pad the nav links more and add some extra space between them to meet SC
2.5.5.
Fixing the misaligned inline nav using "inline-block" also made it
obvious that I can simplify compound selectors. The max number of
compound selectors has dropped from 4 to 2. Update stylelint configs to
reflect this.
Also fix containment to reflect a prior change (webmentions are a
section, not a footer.)
It's mobile-friendly as-is. I made sure that tap-targets were even
bigger and more spaced-apart, just to be safe.
Hide unnecessary nav-links in print mode.
- Better print stylesheet, now with a file dedicated just for print
style improvements.
- Hide extra stuff in print.
- Bring back navbar for print because it also tells users the current
section and the site name.
- Dark theme: make superscripts bold instead of using a higher-contrast
color.
- Goldmark 1.4.12 switches footnotes from a <section> to a <div>; update
regexes and stylesheet to account for this.
- Goldmark 1.4.12 allows multiple footnotes with the same reference; use
that.
- Clean up templates for unminified output. Also delete an unused class.
- Switch to unminified output by default.
Existing link colors made it hard to distinguish between visited and
unvisted links on screens that had warmer color temperatures. Adjusted
the colors to make the distinction clear.
Unfortunately, that adjustment made superscript visited links (for
footnotes) fail the APCA, so I added a solid black background to
superscripts. Now they too should have good contrast.
- I felt dark-mode links were still a bit harsh, so I lightened them.
- Improved perceptual contrast of the purple visited links by making the
background color slightly less blue.
- On widescreen, make footer links inline. They happen to be about the
same width as the global nav, which makes this work well.
WCAG recommends telling visitors about their current place in a site's
hierarchy. All pages are exactly zero or one level below a section, so
simply emphasizing a member of the navigation links should be
sufficient.
- Use borders instead of <hr>
- Distinguish <kbd> from <code> and body text with boldness
- Improve dark contrast and make dark visited links look distinct from
regular text
- Improve focus indicators
- Fix print directive i accidentally deleted
- Switch from inline-start to "left" since old browsers prolly outnumber
the number of poeple using Eng-Arabic machine translation engines that
also alter the text direction.
- 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.
- 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
- Even less halation for dark theme
- More contrast for borders
- Slightly larger font, fixes APCA contrast issue for <small>
- Make responsive navbar work in NetSurf
- Make aria-current page bold
- Use content-visibility to unload footers and endnotes
- Add aria-labels to unclear webring link text
- Replace <hr> elements with css borders; the semantic meaning of <hr>
was unnecessary with section breaks.
Use -inline-start instead of -left for machine translators that change
direction. Wrap that in a feature query so browsers that don't support
these rules can fall back to default styling. Those browsers are desktop
browsers anyway, where this doesn't relaly make a huge difference.
Add reduced-contrast for dark mode, for readers with severe astigmatism.
Reduced-contrast is the same as regular dark mode, except that the
background is lighter.
Somehow fit all of this in <1kb, any bigger and I'll have to stop
inlining.
- Add dark variant of an image
- Some WebP images weren't significantly smaller than their PNG
counterparts; replace them with JPEG-XL. No browser supports it yet
but I need those meme image formats aaaaaaaaa
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
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.
Pulls content exported from Buku, so I don't have to commit every time I
add a bookmark.
Since I added another nav item, I had to adjust the navbar css.
WCAG AAA guidelines encourage limiting text to 80 chars. Unlike A and
AA, the AAA level is more of a list of suggestions than a requirement.
Most other studies seem to indicate 70 is a good minimum but 100 is a
bit excessive.
"ch" units are broken on NetSurf, so I went with the closest "em"
approximation (since I already use "em" everywhere else).
All pages should now look good on screens 230px wide (DPR=1), inc. most
feature-phones running e.g. KaiOS.
Add borders to images so they look distinct from the surrounding page.
This requires making <nav> *not* display inline except for the
unstyled-list navlinks. This should also do a better job at appeasing
reader modes.
For the same reason, also make one link a citation
- Remove reference to unused syntax.css
- Stop Apple's magic phone-number-linkification. If I need to link a
telephone number I'll use a tel: URI, thank you very much.
The newish APCA contrast algorithm correctly reveals that blue-on-black
and purple-on-black links have lower perceptual contrast than
yellow-on-black links.
A Fediverse survey with 19 participants revealed that others tend to
prefer the older look over this one, but the number in favor was much
larger than I thought; it was a 3:2 split. I decided that on my poor
laptop screen facing sunlight with simulated color vision deficiencies,
the yellow links are indeed easier to read so I went with them.
Statically grab and include webmentions during Hugo builds, no JS
involved. Hugo supports making web requests and parsing the resulting
JSON, so there was no need to use an external program either.
- 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
- Use the recommended resolution for the open graph image
- Since the mask-icon is onl served as a cache-busted asset and never
served as a plain link from the site root, move it to assets/
- Cache-bust the webmanifest and put it in assets/
