Drop redundant aria-required attr

The JS-free infinite scroll that doesn't make you lose your place.

Makefile.online

@@ -11,10 +11,10 @@ CHROME_PATH = $(CHROME_DIR)/chrome
 CHROMEDRIVER_PATH = $(CHROME_DIR)/chromedriver
 CHROME_PROFILE ?= /tmp/chrome-lighthouse
 JS_FLAGS=''
-CHROME_FLAGS += --disable-extensions --no-default-browser-check --disable-client-side-phishing-detection --disable-component-update --disable-default-apps --disable-device-discovery-notifications --disable-domain-reliability --disable-background-timer-throttling --disable-breakpad --enable-blink-features=LayoutInstabilityAPI --no-first-run --disable-background-networking --user-data-dir=$(CHROME_PROFILE) --enable-quic --origin-to-force-quic-on=$(DOMAIN):443
+CHROME_FLAGS += --disable-extensions --no-default-browser-check --disable-client-side-phishing-detection --disable-component-update --disable-default-apps --disable-device-discovery-notifications --disable-domain-reliability --disable-background-timer-throttling --disable-breakpad --enable-blink-features=LayoutInstabilityAPI --no-first-run --disable-background-networking --user-data-dir=$(CHROME_PROFILE) --enable-quic --start-in-incognito --origin-to-force-quic-on=$(DOMAIN):443
 CHROME_FLAGS_COMMA = 'disable-extensions,no-default-browser-check,disable-client-side-phishing-detection,disable-component-update,disable-default-apps,disable-device-discovery-notifications,disable-domain-reliability,disable-background-timer-throttling,disable-breakpad,no-first-run,disable-background-networking,js-flags=--jitless'
 CPU_SLOWDOWN=2.8
-LIGHTHOUSE_ARGS += --budget-path linter-configs/budget.json --output html --output json --output-file lighthouse-results --throttling.cpuSlowdownMultiplier=$(CPU_SLOWDOWN) --chrome-flags="$(CHROME_FLAGS)"
+LIGHTHOUSE_ARGS += --view --budget-path linter-configs/budget.json --output html --output json --output-file lighthouse-results --throttling.cpuSlowdownMultiplier=$(CPU_SLOWDOWN) --chrome-flags="$(CHROME_FLAGS)"
 
 hint-online:
 	hint --config linter-configs/hintrc -f codeframe $(URL)

assets/css/main.css

@@ -1,18 +1,21 @@
 /* CSS that adds the bare minimum for a simple, accessible,
  * touch-friendly layout.
- * Nothing here exists purely for aesthetics; everything addresses a
+ * Nothing here exists purely for cosmetics; everything addresses a
  * specific a11y, compatibility, or critical
  * usability need.
  *
  * Two exceptions: I re-set the input styles so Safari wouldn't make
- * them pill-shaped, and I tweaked some margins to make some things
- * evenly aligned.
+ * them pill-shaped, and I tweaked some margins/paddings to make some
+ * things evenly aligned.
  *
- * I also don't use any classes except to optimize embedded content.
- * (e.g. to specify that an image should have pixelated rendering or be
- * inverted in dark mode). One exception: a class for narrow width body
- * text. My HTML contains microformats2 classnames for IndieWeb parsers,
- * but I don't actually use those for styling.
+ * I also don't use any classes except when styling depends on
+ * *content* of an element rather than structure/semantics. Examples
+ * include images that look better with pixelated upscaling, and
+ * posts on the list of entries in the "notes" section that are tall
+ * and need a larger contain-intrinsic-size.
+ * One exception: a class for narrow width body text. My HTML contains
+ * microformats2 classnames for IndieWeb parsers, but I don't actually
+ * use those for styling.
  *
  * To keep myself from caring about minute details, I limited myself to
  * only defining spacing in increments of .25em. Pixels are 1px or
@@ -94,7 +97,10 @@ html {
 	 * long lists of content. */
 	body > :not(main),
 	main > :not(article),
-	article > * {
+	li article, /* Archive pages */
+	/* We increase the target size of h2/h3 links in a way that would cause
+	 * issues with content containment */
+	article > :not(h2):not(h3) {
 		contain: content;
 		/* Add padding on both sides so that focus outlines don't escape their
 		 * containers. This will let us enable CSS containment without
@@ -102,6 +108,22 @@ html {
 		padding: 0 .5em;
 	}
 
+	/* Archive pages can get long. Allow them to get long without slowing
+	 * down the browser by using content-visibility. */
+	li article {
+		content-visibility: auto;
+		contain-intrinsic-size: 16em;
+	}
+
+	/* Notes can get a bit long. */
+	li article[itemtype="https://schema.org/SocialMediaPosting"] {
+		contain-intrinsic-size: 36em;
+	}
+
+	.tall {
+		contain-intrinsic-size: 50em;
+	}
+
 	summary {
 		/* It's not obvious that a <summary> has button semantics.
 		 * "cursor: pointer" is used on MDN, web.dev, GitHub, gov.uk, and
@@ -119,7 +141,7 @@ html {
 	/* Make superscripts a bit easier to tap. */
 	sup > a {
 		margin-left: .25em;
-		padding-bottom: .25em;
+		padding-bottom: .5em;
 	}
 
 	/* SC 2.5.5, Google a11y: Increase tap target size a bit
@@ -161,6 +183,7 @@ html {
 		margin: -.75em -.25em;
 	}
 
+	header > nav,
 	a[href="#h1"], /* skip link */
 	div[itemprop="comment"] dd > a ,
 	footer > nav,
@@ -169,15 +192,22 @@ html {
 	li > a,
 	aside > a,
 	nav ol a {
-		margin-left: -.25em;
 		display: inline-block;
+		margin-left: -.25em;
+	}
+
+	/* Increase tap-target size of title links. */
+	h2 > a,
+	h3 > a {
+		display: inline-block;
+		padding: .5em .25em;
 	}
 
 	/* The nav has to be distant-enough from the top to make room for a
-	 * skip-link. */
+	 * skip-link. The breadcrumbs also can't have their focus-outlines
+	 * overflow while CSS containment is enabled. */
 	header > nav {
-		margin: .75em 0 0 -.25em;
-		display: block;
+		padding: .75em 0 .25em;
 	}
 
 	/* Multiple consecutive <dt> that share a <dd> shouldn't have tap targets overlap */
@@ -199,9 +229,9 @@ html {
 
 	/* skip link: make it invisible until focused, and put it on the top. */
 	a[href="#h1"] {
+		padding: 0 .25em;
 		position: absolute;
 		top: -2em;
-		padding: 0 .25em;
 	}
 
 	a[href="#h1"]:focus {
@@ -238,10 +268,11 @@ nav ul {
 	padding: 0;
 }
 
-/* Make breadcrumbs inline, so they look familiar. */
+/* step 2: remove bullets and make elements inline. */
 nav[itemprop="breadcrumb"] ol,
 nav[itemprop="breadcrumb"] li,
-nav[itemprop="breadcrumb"] > span {
+nav[itemprop="breadcrumb"] > span,
+nav ul li {
 	display: inline-block;
 }
 
@@ -253,15 +284,6 @@ nav[itemprop="breadcrumb"] ol {
 nav[itemprop="breadcrumb"] li:not(:last-of-type)::after {
 	content: "→";
 }
-
-/* step 2: remove bullets and make elements inline.
- * Also: bump up the line-height and margins to increase space
- * between tap-targets (SC 2.5.5). Google a11y guidelines require 8 CSS
- * pixels between tap targets. */
-nav ul li {
-	display: inline-block;
-	margin-right: .5em;
-}
 /* narrow screens: we reduce margin for blockquotes a lot, using
  * a border instead. */
 blockquote {
@@ -469,10 +491,9 @@ form :focus {
 }
 
 /* Remove :focus styling for browsers that do support :focus-visible.
- * Leave it on for form stuff. */
+ * Leave it on for elements that are supposed to show focus on click. */
 @supports selector(:focus-visible) {
 	a:focus:not(:focus-visible),
-	summary:focus:not(:focus-visible),
 	pre[tabindex]:focus:not(:focus-visible) {
 		outline: none;
 	}

assets/css/print.css

@@ -7,7 +7,7 @@
 	}
 
 	/* Hide screen-only content */
-	header a[href="#main"], /* Skip link */
+	a[href="#h1"], /* Skip link */
 	aside:not([role="note"]),
 	/* An un-opened summary inside an article has no use in print.
 	 * Outside an article it's used in my webring list where it has some

content/meta/_index.md

@@ -49,11 +49,12 @@ This site is featured in some cool directories.
 
 </details>
 
-## Awards
+Awards
+------
 
 {{<image-figure id="iso-8601">}}
 
-{{< picture name="8601" alt="Viatrix's ISO 8601 Award! Seirdy's Home, awarded 23/17/22" class="pix" sf=2 >}}
+{{< picture name="8601" alt="Bitmap font reading: “Viatrix's ISO 8601 Award! Seirdy's Home, awarded 23/17/22”" class="pix" sf=2 >}}
 
 <figcaption itemprop="caption">
 
@@ -62,3 +63,4 @@ This site is featured in some cool directories.
 </figcaption>
 
 {{</image-figure>}}
+

content/meta/wcag-conformance.md

@@ -77,7 +77,7 @@ Principle 1: Perceivable
 : I use `autocomplete` attributes wherever appropriate ([ST H98](https://w3c.github.io/wcag/techniques/html/H98)), and use `type` attributes to specify acceptable values.
 
 [SC 1.3.6: Identify Purpose](https://w3c.github.io/wcag/understanding/identify-purpose.html)
-: This site uses no icons; all interactive elements are represented textually. I use WAI-ARIA ([ST ARIA11](https://w3c.github.io/wcag/techniques/aria/ARIA11)) and DPUB-ARIA to identify sections of a page, and I use microdata with schema.org vocabulary (I'm not sure if any assistive technologies actually use microdata, but it's a part of WCAG for some reason). Required inputs receive a `required` and `aria-required` attribute; SC 1.3.6 lists this as an advisory technique.
+: This site uses no icons; all interactive elements are represented textually. I use WAI-ARIA ([ST ARIA11](https://w3c.github.io/wcag/techniques/aria/ARIA11)) and DPUB-ARIA to identify sections of a page, and I use microdata with schema.org vocabulary (I'm not sure if any assistive technologies actually use microdata, but it's a part of WCAG for some reason). Required inputs receive a `required` attribute; SC 1.3.6 describes use of the older `aria-required` attribute as an advisory technique.
 
 ### Guideline 1.4: Distinguishable
 

content/notes/_index.md

@@ -9,4 +9,4 @@ sitemap:
 Notes
 =====
 
-This is my microblog, containing short informal entries. [See my blog](../posts/) for longer entries. An [An Atom feed](./atom.xml) contains the full text of all my notes. If that has any problems, I also have [a legacy RSS feed](./index.xml).
+This is my microblog, containing short informal entries. [See my blog](../posts/) for longer entries. [An Atom feed](./atom.xml) contains the full text of all my notes. If that has any problems, I also have [a legacy RSS feed](./index.xml).

content/posts/stylometric-fingerprinting-redux.gmi

@@ -132,6 +132,14 @@ I have my share of fingerprintable stylistic and formatting quirks. A non-exhaus
 * Introducing some articles with HTML description lists before elaborating on each entry in that list.
 * Using soft-hyphens so text can wrap to narrow widths.
 
+## Anonymous writing is a skill
+
+Developing a high-quality writing style is hard. Developing and switching between multiple different styles is even harder. It takes time to master multiple style guides, cultivate a different "voice" free of your usual idiosyncrasies, and keep your different voices from influencing one another. "Getting into character" won't happen overnight if you don't have experience.
+
+Translation tools are training-wheels to help you learn to identify idiosyncrasies. As you get better, you might be able to filter out problematic language without their help.
+
+Don't feel pressured to start soon! If you want to publish under a truly anonymous pseudonym, you should first hone your craft. Alternatively, find a good editor (I am not the best person for this job, sorry).
+
 ## Conclusion
 
 If you wish to write anonymously, I recommend the following:

content/posts/stylometric-fingerprinting-redux.md

@@ -14,8 +14,8 @@ I am open to feedback, especially from anybody with a more thorough background i
 
 <section role="doc-introduction">
 
-Introduction
-------------
+Intro&shy;duction {#introduction}
+-----------------
 
 Following a recent landmark <abbr title="Supreme Court of the United States">SCOTUS</abbr> ruling, many have been trying to publish resources to help people find reproductive healthcare. They often wish to publish anonymously, to avoid being harassed or doxxed by overzealous religious fundamentalists. Some people asked me for help.
 
@@ -148,6 +148,15 @@ I have my share of fingerprintable stylistic and formatting quirks. A non-exhaus
 
 - Using soft-hyphens so text can wrap to narrow widths.
 
+Writing is a skill
+------------------
+
+Developing a high-quality writing style is hard. Developing and switching between multiple different styles is even harder. It takes time to master multiple style guides, cultivate a different "voice" free of your usual idiosyncrasies, and keep your different voices from influencing one another. "Getting into character" won't happen overnight if you don't have experience.
+
+Translation tools are <span data-literal="temporary learning aids">training-wheels</span> to help you learn to identify idiosyncrasies. As you get better, you might be able to filter out problematic language without their help.
+
+Don't feel pressured to start soon! If you want to publish under a truly anonymous pseudonym, you should first hone your craft. Alternatively, find a good editor.[^2]
+
 <section role="doc-conclusion">
 
 Conclusion
@@ -172,4 +181,6 @@ Stay safe, everyone.
 
 [^1]: I didn't pick Esperanto for any particular reason.
 
+[^2]: I am not the best person for this job, sorry.
+
 

layouts/_default/list.html

@@ -9,8 +9,15 @@
 		{{- $pages := (where site.RegularPages "Section" .Section) -}}
 		{{- range $pages -}}
 		{{- $canonicalRelPermalink := .RelPermalink | replaceRE "^/~seirdy/" "/" -}}
+		{{- $isTall := and (eq .Section "notes") (gt .WordCount 200) -}}
+		{{- $itemtype := "SocialMediaPosting" -}}
+		{{- if eq .Section "posts" -}}
+			{{- $itemtype = "BlogPosting" -}}
+		{{- end -}}
 		<li itemprop="dataFeedElement" itemscope="" itemtype="https://schema.org/DataFeedItem">
-			<article class="h-entry hentry" itemprop="item" itemscope="" itemtype="https://schema.org/SocialMediaPosting" itemid="{{ .Site.Params.CanonicalBaseURL }}{{ $canonicalRelPermalink }}">
+			<article
+				class="h-entry hentry{{ with $isTall }} tall{{ end }}"
+				itemprop="item" itemscope="" itemtype="https://schema.org/{{ $itemtype }}" itemid="{{ .Site.Params.CanonicalBaseURL }}{{ $canonicalRelPermalink }}">
 				<h2 itemprop="name headline" class="p-name entry-title">
 					<a href="{{ .Permalink }}" itemprop="url" class="u-url url" rel="bookmark">
 						{{ .Title }}

layouts/partials/search.html

@@ -11,7 +11,7 @@
 	</label>
 	<div><!--We need the extra divs to serve as pseudo-table-cells.-->
 		<input itemprop="query-input" id="search" type="search" name="q"
-		required="" aria-required="true" spellcheck="true" autocomplete="on" />
+		required="" spellcheck="true" autocomplete="on" />
 		<div><input type="submit" value="search" /></div>
 	</div>
 </form>

layouts/partials/webmention-form.html

@@ -8,7 +8,7 @@
 		<input type="hidden" name="target" value="{{ .Site.Params.canonicalBaseURL }}{{ $canonicalRelPermalink }}" />
 		<label for="menchie">URL of page linking here</label>
 		<div><!--We need the extra divs to serve as pseudo-table-cells.-->
-			<input id="menchie" type="url" autocomplete="on" required="" aria-required="true" name="source" /><!--enable autocomplete if the same URL mentions multiple pages.-->
+			<input id="menchie" type="url" autocomplete="on" required="" name="source" /><!--enable autocomplete if the same URL mentions multiple pages.-->
 			<div><input type="submit" value="submit" /></div>
 		</div>
 	</form>

linter-configs/vnu_filter.jq

@@ -14,6 +14,10 @@
 				and (.extract | test(" name=\"theme-color\""))
 			)
 			or
+			( # see https://github.com/w3c/css-validator/issues/369
+				.message == "CSS: “contain-intrinsic-size”: Property “contain-intrinsic-size” doesn't exist."
+			)
+			or
 			( # the search page has raw templates, let those slide. I validate the final dynamic search page manually.
 				.url | test ("/search/index.")
 			)