Now that more mobile browsers support text zoom, I don't need to worry
about font size as much. Moreover, iOS and Android support a zoomed mode
that makes all tap targets and text larger. This mode made my site's
larger text uncomfortably larger than other sites. On Android, this is
the "Display size" setting; on iOS, this is the "display zoom" setting
under "Display and Brightness" section.
This commit switches everything back to the browser's default font
sizes to better accomodate non-default zoom levels and display zoom
settings.
New foreground colors when BOTH "prefers-color-scheme: dark" and
"prefers-contrast: more" media queries evaluate to "true" at the same
time. Regular and reduced-contrast dark-mode remain unchanged, and
non-dark colors continue to be browser-defaults.
High-contrast dark-mode now has visually distinct visited/unvisited
links for red-green and blue-yellow color blindness, and targets an even
higher APCA contrast.
- CSS containment was cutting off nested list-item markers; increase
their padding to compensate
- Remove nested <details> use, it was causing problems and was probably
unnecessary
- Increase list padding so that ordered-list decimal markers have space
to fit without overflowing.
- Improve style for removing underline between h-card name and photo, so
it doesn't apply to any unnecessary elements.
- Reduce budget for document size.
- Fix unnecessarily excessive spacing around "li > article" entry data
(was due to containment)
- Aesthetic tweak: ugly underline between microformat u-photo and p-name
- Make CSS file smaller by using some microformats2 classnames instead
of microdata attributes.
- Remove unnecessary elements from attribute selectors wherever it
improves compression.
- Dark theme: prevent active link color from being overridden.
- Sort properties/attributes to improve compression ratios.
- Bump font size from 109% to 109.375% so the default font size hits
17.5px and we get nice round numbers.
CSS containmnet crops breadcrumb focus indicators when they overflow
their containers. Instead of adding a new rule for this, refactor some
old rules so padding-increases also apply to the breadcrumb containers.
Add padding to elements so content containment won't cause cropping.
Adjust the global body padding accordingly. This also exposed a
redundancy in the stylesheet, which was removed.
Now the site headers/footers, article elements (including archive
pages), <pre> elements, and other top-level elements are contained.
Rendering long-ass articles with thousands of nodes should be a little
faster.
Link targets need to be focusable to work with VoiceOver.
Making <main> focusable causes some side-effects, like making the TAB
key go to the beginning of <main> instead of the element after the
currently-clicked region.
Also removes the annoying outline around "main" in some non-mainstream
browsers, without having to add extra CSS.
I respect whatever you're into, but that doesn't mean it belongs on my
site. Disable the text inflation algorithm. Don't make landscape fonts
comically large.
The WCAG "label in name" SC requires visible labels to contain
accessible names, preferably by having accessible names start with
visible labels. This commit makes footnote backlinks display as a
hyperlink reading "Back" to meet this SC.
- Adjust transcript shortcodes to also support <audio> elements.
- Add audio element shortcode based on <picture> shortcode
- Make <audio> elements match container width.
- Display reply content in webmentions, when it's available
- Truncate titles and redundant content from webmentions
- Add note on a11y issues regarding badly-formatted webmentions from
brid.gy's mastodon integration.
I increased a bunch of tap targets to fit the recommended 48x48 sizes
and 56x56 non-overlapping regions, but unfortunately this caused
outlines to overlap with each other. This commit turns these elements
into inline-block elements and makes the necessary fixes to accomodate
this change.
- Drop copyright symbol: I put it there because certain programs
explicitly look for it, but between rel=license, schema.org microdata,
and creative commons RDFa, I think scrapers should be covered.
- Update the theme-color and friends to work with my site's updated dark
theme.
Use excessively harsh colors in response to a "prefers-contrast: more"
media query, but otherwise use something a bit softer to accommodate
overstimulation.
Move "in defense of link underlines" to subsection of new "visible
interactive semantics" section. Add info on distinguishing between
buttons and links, and making non-interactive space look visually
distinct from interactive space.
- Stop using draft WAI-ARIA 1.3 that isn't supported yet
- Make in-page links focusable across shortcodes/partials
- Replace existing in-page heading anchor links with a more accessible
option.
- Make backlinks aria-labelledby instead of giving them an aria-label,
so they can be translated.
Allow specifying open graph images for individual pages. Change default
site-wide open graph image alt-text to an empty string since the default
image only has visual value, and is better off hidden from assistive
technologies.
Set an open graph image for two articles.
- Streamline CSS to reduce duplication
- Better backlink accessible names for endnotes with multiple backlinks
This required updating a false positive filter in my vnu jq filter.
- Adopt more shortcodes in older posts.
- Contain figures, excluding images. Slightly decreases paint times.
- Fix spacing issues for nested articles.
- Always enable vertical scrollbar, since pretty much all pages are
taller than the viewport. Eliminates a layout shift.
- Moar microdata
- Set fixed updated dates for some posts so they don't get new
date-updated values until I actually change the content significantly
Side margins created to prevent mis-taps on scrollbars or swipe-backs
for going back should not scale with zoom; that would make reading while
zoomed in impossible.
- 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.
