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.
All pages except bookmarks can now fit on your smartwatch without any
adjustments, so we can disable the auto-zoom-out-to-match-mobile
wizardry that watch browsers do (comparable to the
zoom-out-to-match-desktop stuff that early mobile browsers did).
Yay.
- 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.
Order is significant for the ToC and post list so make them ordered.
I opted to make post-lists a reversed list, so I don't end up having
every post change its number every time I post.
Visitors can see that on post update dates; I can see that in
builds.sr.ht.
This results in not having to upload every page on a trivial change. Add
the "-c" rsync flag to take advantage of that. Doing so should also
result in longer-lived cached copies, with etags and last-modified
headers.
- 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.
- Some webrings I might eventually join require sending the origin via
referrer. Make per-link exceptions to my "no-referrer" policy sent via
HTTP header.
- Add hotline webring
- Add criteria for me to join a webring.
No browser I know of falls back to a PNG when given an SVG with a PNG
fallback. The Tor version of my site uses no SVGs.
Exclude the SVG favicon in the Tor version of the site, since the Tor
Browser disables SVG on the safest setting.
- SearchMySite.net uses the "keywords" meta property to categorize
sites, so include keywords on the homepage
- Exclude the published date if it doesn't exist.
- apple-touch-icon not needed, will be fetched from doc root
- re-order <head> elements to optimize for compression algorithm size
savings. shaved off like 15 bytes. this was a good use of my time.
- 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 favicon is 175 bytes, smaller than the size of the HTTP headers to
fetch it. It can be inlined.
Now, pages that don't have any other images need just a single request.
The main stylesheet for the sit is just 721 bytes uncompressed. I can
inline it safely to shave off a request, since the headers alone are
probably comparable to the size of the CSS.
- The default time is browser-default colors, not "light". The only
"theme" for my site is the dark theme.
- The "color-scheme" doesn't have wide support
- The "color-scheme" property doesn't really do anything much if you use
browser-defaults or a dark theme with @prefers-color-scheme
- Footer should contain date last built so people don't start scratching
their heads wondering why webmentions aren't showing up
- Add rel="nofollow ugc" to webmention links.
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.
Inspired by the h-entry implementation on Charlie Owen's personal
website: https://whalecoiner.com
The u-photo re-uses the 32px favicon that the browser has already
cached, so it shouldn't bloat up the page anymore.
These changes required a bit of additional CSS. I snuck in come color
changes too.
