fmaury/seirdy.one
1
0
Fork 0
mirror of https://git.sr.ht/~seirdy/seirdy.one synced 2024-11-10 00:12:09 +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 */
sup {
background-color: #0b0b0b;
background-color: #000;
}
/* Only color <a> if it's a link; if href is empty, let it be. */
@ -24,12 +24,17 @@
color: #f1e7b2;
}
a:active {
color: #b93;
}
a:visited {
color: #fdf;
}
a:active {
color: #b93;
/* Small text needs higher contrast */
sup a:visited {
color: #ffe3ff;
}
/* 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
* and margin adjustments in nav children made to meet SC 2.5.5 */
header > nav,
footer > nav,
h2 + a {
margin-left: -.25em;
}
header > nav {
margin: 0 0 -.75em -.25em;
margin-bottom: -.75em;
}
footer > nav {
margin: -.75em 0 0 -.25em;
margin-top: -.75em;
}
summary {
@ -107,8 +112,14 @@ html {
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,
h2 + a,
li > a {
padding: .875em .25em;
}

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

@ -1,29 +1,11 @@
<!--
For now, make the anchor link invisible to screen readers.
1. The anchor would need an accessible name, but aria-labels don't
translate well with machine translation. It would need to be
labelledby another element hidden by CSS, which would crowd the
page for non-CSS users.
2. Screen reader users don't depend on visually identifying heading
levels and can easily jump between headings without scrolling to
the table of contents, so these anchor links are slightly less
useful to them.
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>
{{- if and (eq .Level 2) (eq .Page.Section "posts") }}
<h{{ .Level }} id="{{ .Anchor | safeURL }}-hd">{{ .Text | safeHTML -}}</h{{ .Level }}>
<a
id="{{ .Anchor | safeURL }}" href="#{{ .Anchor | safeURL }}"
aria-labelledby="{{ .Anchor | safeURL }}-prefix {{ .Anchor | safeURL }}-hd">
<span id="{{ .Anchor | safeURL }}-prefix">Permalink to section</span>
</a>
{{- else }}
{{- with . -}}
<h{{ .Level }} id="{{ .Anchor | safeURL }}">{{ .Text | safeHTML -}}</h{{ .Level }}>{{ end -}}
{{- end }}
</h{{ .Level }}>{{ end }}