mirror of
https://git.sr.ht/~seirdy/seirdy.one
synced 2024-11-10 00:12:09 +00:00
Accessible in-page heading anchors!
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:
parent
b5dd4f21ab
commit
809fed4308
3 changed files with 32 additions and 34 deletions
|
@ -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 */
|
||||||
|
|
|
@ -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;
|
||||||
}
|
}
|
||||||
|
|
|
@ -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 }}
|
|
||||||
|
|
Loading…
Reference in a new issue