fmaury/seirdy.one
1
0
Fork 0
mirror of https://git.sr.ht/~seirdy/seirdy.one synced 2024-09-19 20:02:10 +00:00
Code Issues Projects Releases Wiki Activity

Accessible in-page heading anchors!

Browse source 
Bit the bullet and decided to make anchors that look great to
terminal/textual browsers, ARIA + screen reader combos, and a regular
browser.
This commit is contained in:
Rohan Kumar 2022-05-19 13:21:10 -07:00
parent b5dd4f21ab
commit 809fed4308
No known key found for this signature in database
GPG key ID: 1E892DB2A5F84479
3 changed files with 32 additions and 34 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

11
assets/css/dark.css
View file

@ -16,7 +16,7 @@
/* Small text needs higher contrast */ /* Small text needs higher contrast */
sup { sup {
background-color: #0b0b0b; background-color: #000;
} }
/* Only color <a> if it's a link; if href is empty, let it be. */ /* Only color <a> if it's a link; if href is empty, let it be. */
@ -24,12 +24,17 @@
color: #f1e7b2; color: #f1e7b2;
} }
a:active {
color: #b93;
}
a:visited { a:visited {
color: #fdf; color: #fdf;
} }
a:active { /* Small text needs higher contrast */
color: #b93; sup a:visited {
color: #ffe3ff;
} }
/* stylelint-disable -- hasn't heard of "prefers-contrast" yet */ /* stylelint-disable -- hasn't heard of "prefers-contrast" yet */

17
assets/css/main.css
View file

@ -77,11 +77,16 @@ html {
/* Compensate for misalignment and wasted space caused by padding /* Compensate for misalignment and wasted space caused by padding
* and margin adjustments in nav children made to meet SC 2.5.5 */ * and margin adjustments in nav children made to meet SC 2.5.5 */
header > nav,
footer > nav,
h2 + a {
margin-left: -.25em;
}
header > nav { header > nav {
margin: 0 0 -.75em -.25em; margin-bottom: -.75em;
} }
footer > nav { footer > nav {
margin: -.75em 0 0 -.25em; margin-top: -.75em;
} }
summary { summary {
@ -107,8 +112,14 @@ html {
padding: 1em 0; padding: 1em 0;
} }
/* SC 2.5.5, Google a11y: Increase tap target size a bit */ /* SC 2.5.5, Google a11y: Increase tap target size a bit
* - Summary is a tappable button
* - standalone links in lists are usually parts of collections of
* links that should be easy to fat-finger
* - links that directly follow h2 without being contained in a
* paragraph are section permalinks. */
summary, summary,
h2 + a,
li > a { li > a {
padding: .875em .25em; padding: .875em .25em;
} }

38
layouts/_default/_markup/render-heading.html
View file

@ -1,29 +1,11 @@
<!-- {{- if and (eq .Level 2) (eq .Page.Section "posts") }}
For now, make the anchor link invisible to screen readers. <h{{ .Level }} id="{{ .Anchor | safeURL }}-hd">{{ .Text | safeHTML -}}</h{{ .Level }}>
1. The anchor would need an accessible name, but aria-labels don't <a
translate well with machine translation. It would need to be id="{{ .Anchor | safeURL }}" href="#{{ .Anchor | safeURL }}"
labelledby another element hidden by CSS, which would crowd the aria-labelledby="{{ .Anchor | safeURL }}-prefix {{ .Anchor | safeURL }}-hd">
page for non-CSS users. <span id="{{ .Anchor | safeURL }}-prefix">Permalink to section</span>
2. Screen reader users don't depend on visually identifying heading </a>
levels and can easily jump between headings without scrolling to {{- else }}
the table of contents, so these anchor links are slightly less {{- with . -}}
useful to them. <h{{ .Level }} id="{{ .Anchor | safeURL }}">{{ .Text | safeHTML -}}</h{{ .Level }}>{{ end -}}
3. These links don't expose new functionality, since users could
already copy heading anchor links in the TOC. This just makes some
existing functionality slightly more easily. So it's less of a big
deal
4. This reliably hides them from certain reading-mode implementations
(e.g. Readability)
Yeah I know, the situation isn't optimal.
-->{{- with . -}}
<h{{ .Level }} id="{{ .Anchor | safeURL }}">{{ .Text | safeHTML -}}
{{- if and (gt .Level 1) (eq .Page.Section "posts") -}}
<span aria-hidden="true"> <!--Wrap in a span so the whitespace before the link is also hidden-->
<a href="#{{ .Anchor | safeURL }}" tabindex="-1">
{{- $octothorpes := sub .Level 1 -}}
{{- range $i, $sequence := (seq $octothorpes) -}}
{{- print `#` -}}
{{- end -}}
</a></span>
{{- end }} {{- end }}
</h{{ .Level }}>{{ end }}