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.
- 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.
