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.
Use excessively harsh colors in response to a "prefers-contrast: more"
media query, but otherwise use something a bit softer to accommodate
overstimulation.
- 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.
- 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.
