A11y and perf improvements

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

assets/css/dark.css

@@ -3,8 +3,8 @@
 		/* "background" is short for a bunch of unnecessary CSS rules
 		 * background-color is all I need
 		 * I've been told that pure white on black is a bit harsh */
-		background-color: #0c0c0c;
-		color: #ececec;
+		background-color: #0e0e0e;
+		color: #eee;
 	}
 
 	a {
@@ -21,10 +21,9 @@
 
 	blockquote,
 	:not(pre) > code,
-	hr,
 	img,
 	pre {
-		border-color: #333;
+		border-color: #444;
 	}
 
 	/* stylelint-disable -- hasn't heard of "prefers-contrast" yet */

assets/css/main.css

@@ -1,37 +1,20 @@
 /* CSS that adds the bare minimum for a simple layout.
  * Nothing here exists purely for aesthetics except the unstyled-list;
  * everything else addresses a specific a11y, compatibility, or critical
- * usability need. */
+ * usability need.
+ * I also don't define any non-semantic classes besides unstyled-list.
+ * The the other classnames referenced here are from microformats2. */
 
-/* This site's CSS does 10 major things:
- * 1. sans-serif instead of serif for low-res screens.
- * 2. Consistent font size; <pre> and <code> shouldn't be smaller than
- *    regular text.
- * 3. max content width for readability
- * 4. single-row nav links widescreen, multiline nav on narrow screens
- * 5. Soft border around code and images to disginguish from the
- *    surrounding page. Images with white/black or transparent
- *    backgrounds should have clear dimensions, and multiple consecutive
- *    inline <code> spans should look separate. A <code> span that
- *    continues across multiple lines should not look like multiple different
- *    spans.
- * 6. Increase the line-spacing a bit so users on mobile devices can
- *    tap links more easily.
- * 7. Horizontally center non-inline images; left-aligned stick out.
- * 8. dark.css changes a few colors if the browser wants dark mode.
- * 9. Support unstyled lists: for webmentions, post lists, nav links.
- * 10. Narrow screen optimization: less-indented blockquotes, overflow
- *     behavior for <pre>, no figure margins.
- * Everything else is browser defaults:
- * default fonts, non-dark-mode colors, etc.
- */
+/* Start with browser defaults: default fonts, non-dark-mode colors, etc
+ * Only change things to solve a specific a11y or significant usability
+ * need. One exception: cosmetic improvement for unstyled-list */
 
 html {
 	/* Mobile screens benefit from greater line-spacing so links are
 	 * further apart. Dyslexic users prefer the spacing too.
 	 * <100dpi screens: sans-serif is better. Why did browsers settle
 	 * on serif being the default?? */
-	font: 100%/1.5 sans-serif;
+	font: 105%/1.5 sans-serif;
 
 	/* Aligning to the center with space on both sides prevents accidental
 	* link activation on mobile devices. */
@@ -55,21 +38,30 @@ html {
 
 @supports (border-inline-start: 6px) {
 	/* narrow screens: reduce margin for blockquotes a lot, using
-	 * a thick left-side border instead. */
+	 * a thick left-side border instead, or a right-side border in
+	 * RTL locales. Some browsers like NetSurf or IE don't support this,
+	 * but they're pretty much only used on the desktop where a huge indent
+	 * is less of a problem.*/
 	blockquote {
-		border-inline-start: 6px solid #bbb;
+		border-inline-start: 5px solid #aaa;
 		margin: 0;
 		padding: 0 0.8em;
 	}
+}
 
 /* single-line nav on widescreen and print.
  * Single-line nav on print saves almost half a page. */
-	@media print, (min-width: 32em) {
+@media (min-width: 32em) {
 	header nav li {
 		display: inline;
-			padding-inline-end: 0.5em;
+		/* inline-end doesn't work in netsurf. -right should stil make sense
+		 * in RTL machine translation, it'll just look a bit indented. */
+		padding-right: 0.5em;
 	}
 }
+
+a[aria-current="page"] {
+	font-weight: bold;
 }
 
 /* narrow screens: remove unused figure margin. */
@@ -133,7 +125,7 @@ pre {
 img,
 pre,
 :not(pre) > code {
-	border: 1px solid #bbb;
+	border: 1px solid #aaa;
 }
 
 /* center images that aren't my indieweb icon; same justification as
@@ -146,15 +138,21 @@ img:not(.u-photo) {
 	max-width: 100%;
 }
 
+/* WCAG Technique C25: use borders to separate sections.
+ * Also use "content-visibility: auto" to improve performance by
+ * reducing the number of DOM nodes rendered at once. */
+footer,
+section[role="doc-endnotes"] {
+	border-top: 1px solid #aaa;
+	content-visibility: auto;
+}
+
 /* Todo:
  * - Some browsers don't scale SVGs properly; the img container
  *   dimensions crop the image rather than scale it. Investigate
  *   if this only applies to Internet Explorer or if it applies to
  *   other uncommon browsers too. If any non-IE browsers do this and/or
  *   if the spec allows this behavior, try to correct it here.
- * - Investigate reduced-contrast for dark mode
  * - Wait till Webkit fixes its broken-ass default dark stylesheet
  *   then consider trimming the dark stylesheet I provide.
- * - Investigate CSS-based hints to screenreaders.
- * - See if any "-left" properties should switch to "-right" for users
- *   who machine-translate the page to a RTL language. */
+ * - Investigate CSS-based hints to screenreaders. */

layouts/partials/footer.html

@@ -1,4 +1,3 @@
-<hr>
 <footer id="site-footer">
 	<p>
 		Copyright © <span itemprop="copyrightYear">{{now.Year}}</span> <span itemprop="copyrightHolder">{{- partial "indieweb-author.html" -}}</span> ·

layouts/partials/webrings.html

@@ -14,9 +14,9 @@
 {{ range $i, $r := after 1 (getCSV "," "/csv/webrings.csv") }}
 <li>
 <p>
-<a href="{{- index $r 1 -}}" rel="nofollow ugc" referrerpolicy="{{ $refPol }}">←</a> ·
+<a href="{{- index $r 1 -}}" rel="nofollow ugc" referrerpolicy="{{ $refPol }}" aria-label="previous site">←</a> ·
 <a href="{{- index $r 2 -}}">{{- index $r 0 -}}</a> ·
-<a href="{{- index $r 3 -}}" rel="nofollow ugc" referrerpolicy="{{ $refPol }}">→</a>
+<a href="{{- index $r 3 -}}" rel="nofollow ugc" referrerpolicy="{{ $refPol }}" aria-label="next site">→</a>
 </p>
 </li>
 {{ end }}

layouts/posts/single.html

@@ -25,13 +25,6 @@
 			{{ partial "processed-content" . -}}
 		</div>
 	</article>
-	<hr>
-	<p>
-	{{- if .PrevInSection -}}<a href="{{ .PrevInSection.Permalink }}">Previous</a>{{- end -}}
-	{{- if and (.PrevInSection) (.NextInSection) }} · {{ end -}}
-	{{- if .NextInSection -}}<a href="{{ .NextInSection.Permalink }}">Next</a>{{- end -}}
-	</p>
-	<hr>
 	<footer class="comment">
 		<p><a href="mailto:~seirdy/seirdy.one-comments@lists.sr.ht">Send an email</a> to leave a comment in the <a href="https://lists.sr.ht/~seirdy/seirdy.one-comments">mailing list</a> for seirdy.one. You'll have to send in plain text; please <a href="https://useplaintext.email/">learn how</a>. Alternatively, send your email <a href="mailto:seirdy@seirdy.one">directly to me</a>; it won’t show up on the mailing list, but I’ll see it.</p>
 		<p>This site also supports <a href="https://indieweb.org/webmention">Webmentions</a>. Webmentions received for this post will appear below after I approve them. I sometimes send Webmentions to myself on behalf of linking sites that don't support them. Check the <a href="https://web.archive.org/">Wayback Machine</a> if any links are broken.</p>