mirror of
https://git.sr.ht/~seirdy/seirdy.one
synced 2024-11-23 21:02:09 +00:00
A11y: drop draft ARIA, overhaul in-page links
- Stop using draft WAI-ARIA 1.3 that isn't supported yet - Make in-page links focusable across shortcodes/partials - Replace existing in-page heading anchor links with a more accessible option. - Make backlinks aria-labelledby instead of giving them an aria-label, so they can be translated.
This commit is contained in:
parent
47e55b9aef
commit
f798de7e63
10 changed files with 75 additions and 61 deletions
|
@ -62,7 +62,7 @@ html {
|
||||||
* between tappables" by creating margins/paddings between nav links;
|
* between tappables" by creating margins/paddings between nav links;
|
||||||
* re-use that same amount of space here. 24px is what it takes to
|
* re-use that same amount of space here. 24px is what it takes to
|
||||||
* create atl 48px of non-interactive space on <ul> and <ol> elements
|
* create atl 48px of non-interactive space on <ul> and <ol> elements
|
||||||
* containing lists of interactives.
|
* containing lists of interactives, with 8px in between.
|
||||||
* Don't use relative units here; this margin shouldn't scale with
|
* Don't use relative units here; this margin shouldn't scale with
|
||||||
* zoom, or else text will get narrower with zoom. */
|
* zoom, or else text will get narrower with zoom. */
|
||||||
padding: 0 24px;
|
padding: 0 24px;
|
||||||
|
@ -234,6 +234,11 @@ samp {
|
||||||
font-family: monospace, monospace;
|
font-family: monospace, monospace;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* Some browsers don't support the hidden attr */
|
||||||
|
span[hidden] {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
/* Narrow screens: long words can cause content to flow out of the
|
/* Narrow screens: long words can cause content to flow out of the
|
||||||
* viewport, triggering horizontal scrolling. Allow breaking words in
|
* viewport, triggering horizontal scrolling. Allow breaking words in
|
||||||
* content I don't control (comments, names). For content I do control,
|
* content I don't control (comments, names). For content I do control,
|
||||||
|
@ -292,6 +297,7 @@ picture > img {
|
||||||
* reducing the number of DOM nodes rendered at once. */
|
* reducing the number of DOM nodes rendered at once. */
|
||||||
aside,
|
aside,
|
||||||
footer,
|
footer,
|
||||||
|
section[role="doc-endnotes"],
|
||||||
section[aria-labelledby="webmentions"] {
|
section[aria-labelledby="webmentions"] {
|
||||||
border-top: 1px solid;
|
border-top: 1px solid;
|
||||||
content-visibility: auto;
|
content-visibility: auto;
|
||||||
|
|
|
@ -1,11 +1,8 @@
|
||||||
|
<h{{ .Level }} id="{{ .Anchor | safeURL }}" tabindex="-1">{{ .Text | safeHTML -}}</h{{ .Level }}>
|
||||||
{{- if and (eq .Level 2) (eq .Page.Section "posts") }}
|
{{- if and (eq .Level 2) (eq .Page.Section "posts") }}
|
||||||
<h{{ .Level }} id="{{ .Anchor | safeURL }}-hd">{{ .Text | safeHTML -}}</h{{ .Level }}>
|
|
||||||
<a
|
<a
|
||||||
id="{{ .Anchor | safeURL }}" href="#{{ .Anchor | safeURL }}"
|
id="{{ .Anchor | safeURL }}-anchor" href="#{{ .Anchor | safeURL }}"
|
||||||
aria-labelledby="{{ .Anchor | safeURL }}-prefix {{ .Anchor | safeURL }}-hd">
|
aria-labelledby="{{ .Anchor | safeURL }}-prefix {{ .Anchor | safeURL }}">
|
||||||
<span id="{{ .Anchor | safeURL }}-prefix">Permalink to section</span>
|
<span id="{{ .Anchor | safeURL }}-prefix">Permalink to section</span>
|
||||||
</a>
|
</a>
|
||||||
{{- else }}
|
|
||||||
{{- with . -}}
|
|
||||||
<h{{ .Level }} id="{{ .Anchor | safeURL }}">{{ .Text | safeHTML -}}</h{{ .Level }}>{{ end -}}
|
|
||||||
{{- end }}
|
{{- end }}
|
||||||
|
|
|
@ -1,4 +1,4 @@
|
||||||
<article aria-details="webmentions" class="h-entry hentry">
|
<article class="h-entry hentry"><!--Once WAI-ARIA 1.3 gains traction, I'll add aria-details for webmentions.-->
|
||||||
<header>
|
<header>
|
||||||
<h1 itemprop="name headline" class="p-name entry-title">{{ .Title }}</h1>
|
<h1 itemprop="name headline" class="p-name entry-title">{{ .Title }}</h1>
|
||||||
{{- if not .Params.disableMeta }}
|
{{- if not .Params.disableMeta }}
|
||||||
|
|
|
@ -24,23 +24,32 @@
|
||||||
</ol>
|
</ol>
|
||||||
</section>` -}}
|
</section>` -}}
|
||||||
|
|
||||||
<!--Descriptive footnote link names, remove unused class-->
|
<!--
|
||||||
{{- $badNoteRef := `class="footnote-ref" role="doc-noteref">([0-9]*)</a>` -}}
|
Descriptive footnote link names, remove unused class, put
|
||||||
{{- $goodNoteRef := `role="doc-noteref">note ${1}</a>` -}}
|
backlink id in <a> since <a> is focusable, remove unused class.
|
||||||
|
-->
|
||||||
|
{{- $badNoteRef := `<sup id="fnref([0-9\:]*)"><a( [^>]*)class="footnote-ref" role="doc-noteref">([0-9]*)</a>` -}}
|
||||||
|
{{- $goodNoteRef := `<sup><a${2}id="fnref${1}" role="doc-noteref">note ${3}</a>` -}}
|
||||||
|
|
||||||
<!--Move the Table of Contents heading *inside* the <nav> element-->
|
<!--Move the Table of Contents heading *inside* the <nav> element-->
|
||||||
{{- $tocHeadingOutside := `<h2>Table of Contents</h2><nav(?:.*)>` -}}
|
{{- $tocHeadingOutside := `<h2>Table of Contents</h2><nav(?:.*)>` -}}
|
||||||
{{- $tocHeadingInside := `<nav id=TableOfContents role="doc-toc" aria-labelledby="toc-hd"><h2 id="toc-hd">Table of Contents</h2>` -}}
|
{{- $tocHeadingInside := `<nav id=TableOfContents role="doc-toc" aria-labelledby="toc-hd" tabindex="-1">
|
||||||
|
<h2 id="toc-hd">Table of Contents</h2>` -}}
|
||||||
|
|
||||||
<!--Give footnote backlinks accessible names-->
|
<!--Give footnote backlinks accessible names-->
|
||||||
{{- $footnoteBacklinksBad := `<a href="#fnref:([0-9]*)" class="footnote-backref"(.*role="doc-backlink"(?:.*)?)>` -}}
|
{{- $footnoteBacklinksBad := `<a href="#fnref:([0-9]*)" class="footnote-backref"(.*role="doc-backlink"(?:[^>]*)?)>([^<]*)` -}}
|
||||||
{{- $footnoteBacklinksGood := `<a href="#fnref:${1}" aria-label="back to reference ${1}"${2}>` -}}
|
{{- $footnoteBacklinksGood := `<a href="#fnref:${1}" aria-labelledby="bl-${1}"${2}>${3} <span id="bl-${1}" hidden>back to reference ${1}</span>` -}}
|
||||||
|
|
||||||
<!--
|
<!--
|
||||||
If two backlinks exist, give them different names.
|
If two backlinks exist, give them different names.
|
||||||
I currently don't have any triple backlinks; if I ever do, I'll implement this properly with a loop.
|
I currently don't have any triple backlinks; if I ever do, I'll implement this properly with a loop.
|
||||||
-->
|
-->
|
||||||
{{- $repeatedFootnoteBacklinksBad := `"back to reference ([0-9]*)"(.*)<a href="#fnref([0-9]):([0-9]*)"(.*role="doc-backlink"(?:.*)?)>` -}}
|
{{- $repeatedFootnoteBacklinksBad := `<a href="#fnref([0-9]):([0-9]*)"(.*role="doc-backlink"(?:[^>]*)?)>([^<]*)` -}}
|
||||||
{{- $repeatedFootnoteBacklinksGood := `"back to reference ${1}, instance 1"${2}<a href="#fnref${3}:${4}" aria-label="back to reference ${4}, instance 2"${5}>` -}}
|
{{- $repeatedFootnoteBacklinksGood := `<a href="#fnref${1}:${2}" aria-labelledby="bl-${2}-2"${3}>${4} <span id="bl-${2}-2" hidden>back to reference ${2}, instance 2</span>` -}}
|
||||||
|
|
||||||
{{- .Content | replaceRE $referencesWithoutHeading $referencesWithHeading | replaceRE $badNoteRef $goodNoteRef | replaceRE $endnotesClosingDiv $endnotesClosingSection | replaceRE $tocHeadingOutside $tocHeadingInside | replaceRE $footnoteBacklinksBad $footnoteBacklinksGood | replaceRE $repeatedFootnoteBacklinksBad $repeatedFootnoteBacklinksGood | safeHTML -}}
|
<!--Make endnotes focusable by ATs. Necessary for VoiceOver compatibility.-->
|
||||||
|
{{- $endNotesNotFocusable := `<li id="fn:([0-9]*)">` -}}
|
||||||
|
{{- $endNotesFocusable := `<li id="fn:${1}" tabindex="-1">` -}}
|
||||||
|
|
||||||
|
|
||||||
|
{{- .Content | replaceRE $referencesWithoutHeading $referencesWithHeading | replaceRE $badNoteRef $goodNoteRef | replaceRE $endnotesClosingDiv $endnotesClosingSection | replaceRE $tocHeadingOutside $tocHeadingInside | replaceRE $footnoteBacklinksBad $footnoteBacklinksGood | replaceRE $repeatedFootnoteBacklinksBad $repeatedFootnoteBacklinksGood | replaceRE $endNotesNotFocusable $endNotesFocusable | safeHTML -}}
|
||||||
|
|
|
@ -1,20 +1,27 @@
|
||||||
<section aria-labelledby="webmentions">
|
<section aria-labelledby="webmentions">
|
||||||
<h2 id="webmentions">Webmen­tions</h2>
|
<h2 id="webmentions" tabindex="-1">Webmen­tions</h2>
|
||||||
<p>This site 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>
|
<p>This site 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>
|
||||||
<ul>
|
<dl>
|
||||||
{{- $target := .RelPermalink | replaceRE "^/~seirdy/" "/" }}
|
{{- $target := .RelPermalink | replaceRE "^/~seirdy/" "/" }}
|
||||||
{{ $url := printf "https://seirdy.one/webmentions/get?status=approved&target=https://seirdy.one%s" $target -}}
|
{{ $url := printf "https://seirdy.one/webmentions/get?status=approved&target=https://seirdy.one%s" $target -}}
|
||||||
{{ $webmentions := getJSON $url -}}
|
{{ $webmentions := getJSON $url -}}
|
||||||
{{ range $webmentions -}}
|
{{ range $webmentions -}}
|
||||||
{{ $webmention := . -}}
|
{{ $webmention := . -}}
|
||||||
{{ if (eq $webmention.type "like") -}}
|
{{ if (eq $webmention.type "like") -}}
|
||||||
<li itemprop="potentialAction" itemscope itemtype="https://schema.org/LikeAction" class="u-like h-cite">
|
<div itemprop="potentialAction" itemscope itemtype="https://schema.org/LikeAction" class="u-like h-cite">
|
||||||
{{- else -}}
|
{{- else -}}
|
||||||
<li itemprop="comment" itemscope itemtype="https://schema.org/Comment">
|
<div itemprop="comment" itemscope itemtype="https://schema.org/Comment" class="u-comment h-cite">
|
||||||
{{- end }}
|
{{- end -}}
|
||||||
<p role="comment" class="u-comment h-cite">
|
<!--Will eventually add role="comment" once WAI-ARIA 1.3 starts seeing some adoption.-->
|
||||||
<time class="dt-published" itemprop="{{ if (eq $webmention.type "like") -}}startTime{{ else }}datePublished{{ end }}" datetime="{{ dateFormat "2006-01-02 15:04:05Z07:00" $webmention.created_at }}">{{ dateFormat "2006-01-02" $webmention.created_at }}</time>
|
<dt>
|
||||||
<br>
|
<time
|
||||||
|
class="dt-published"
|
||||||
|
itemprop="{{ if (eq $webmention.type "like") -}}startTime{{ else }}datePublished{{ end }}"
|
||||||
|
datetime="{{ dateFormat "2006-01-02 15:04:05Z07:00" $webmention.created_at }}">
|
||||||
|
{{ dateFormat "2006-01-02" $webmention.created_at }}
|
||||||
|
</time>
|
||||||
|
</dt>
|
||||||
|
<dd><p>
|
||||||
{{ if (eq $webmention.type "like") -}}
|
{{ if (eq $webmention.type "like") -}}
|
||||||
{{ if $webmention.author_name -}}
|
{{ if $webmention.author_name -}}
|
||||||
<span itemprop="agent" itemscope itemtype="https://schema.org/Person" class="h-card p-author vcard"><span itemprop="name" class="p-name fn n">{{ $webmention.author_name }}</span></span>
|
<span itemprop="agent" itemscope itemtype="https://schema.org/Person" class="h-card p-author vcard"><span itemprop="name" class="p-name fn n">{{ $webmention.author_name }}</span></span>
|
||||||
|
@ -23,9 +30,9 @@
|
||||||
{{ else -}}
|
{{ else -}}
|
||||||
{{ $webmention.source -}}
|
{{ $webmention.source -}}
|
||||||
{{ end -}}
|
{{ end -}}
|
||||||
<a class="u-url" href="{{ $webmention.source }}" rel="nofollow ugc">liked</a> this
|
<a class="u-url" itemprop="url" href="{{ $webmention.source }}" rel="nofollow ugc">liked</a> this
|
||||||
{{ else -}}
|
{{ else -}}
|
||||||
<a class="u-url" href="{{ $webmention.source }}" rel="nofollow ugc">
|
<a class="u-url" itemprop="url" href="{{ $webmention.source }}" rel="nofollow ugc">
|
||||||
<span itemprop="name" class="p-content p-name">
|
<span itemprop="name" class="p-content p-name">
|
||||||
{{ if $webmention.title -}}
|
{{ if $webmention.title -}}
|
||||||
{{ $webmention.title | truncate 200 -}}
|
{{ $webmention.title | truncate 200 -}}
|
||||||
|
@ -38,11 +45,12 @@
|
||||||
by <span itemprop="author" itemscope itemtype="https://schema.org/Person" class="h-card p-author vcard"><span itemprop="name" class="p-name fn n">{{ $webmention.author_name }}</span></span>
|
by <span itemprop="author" itemscope itemtype="https://schema.org/Person" class="h-card p-author vcard"><span itemprop="name" class="p-name fn n">{{ $webmention.author_name }}</span></span>
|
||||||
{{- end -}}
|
{{- end -}}
|
||||||
{{- end }}
|
{{- end }}
|
||||||
</p>
|
</p></dd>
|
||||||
</li>
|
</div>
|
||||||
{{ else -}}
|
{{ else -}}
|
||||||
<li><p>This post doesn't have any approved Webmentions yet.</p></li>
|
<dt>Nothing here</dt>
|
||||||
|
<dd>This post does not have any approved Webmentions yet.</dd>
|
||||||
{{- end }}
|
{{- end }}
|
||||||
</ul>
|
</dl>
|
||||||
<p></p>
|
<p></p>
|
||||||
</section>
|
</section>
|
||||||
|
|
|
@ -9,7 +9,7 @@
|
||||||
{{- end -}}
|
{{- end -}}
|
||||||
{{- end -}}
|
{{- end -}}
|
||||||
<figcaption id="{{ $id }}-caption">
|
<figcaption id="{{ $id }}-caption">
|
||||||
<span id="{{ $id }}">
|
<span id="{{ $id }}" tabindex="-1">
|
||||||
<strong itemprop="name"> <span itemprop="codeSampleType">Code snippet</span> {{ $codeIndex }}</strong>{{with .Get "lang"}} (<span itemprop="programmingLanguage">{{ . }}</span>){{ end -}}
|
<strong itemprop="name"> <span itemprop="codeSampleType">Code snippet</span> {{ $codeIndex }}</strong>{{with .Get "lang"}} (<span itemprop="programmingLanguage">{{ . }}</span>){{ end -}}
|
||||||
</span>:
|
</span>:
|
||||||
{{ .Inner | markdownify | safeHTML }}
|
{{ .Inner | markdownify | safeHTML }}
|
||||||
|
|
|
@ -1,5 +1,5 @@
|
||||||
<figure itemscope itemtype="https://schema.org/ImageObject"
|
<figure itemscope itemtype="https://schema.org/ImageObject"
|
||||||
{{- with .Get "id" }} id="{{ . }}"{{ end -}}
|
{{- with .Get "id" }} id="{{ . }}" tabindex="-1"{{ end -}}
|
||||||
{{- if .Get "representative" }} itemprop="image">
|
{{- if .Get "representative" }} itemprop="image">
|
||||||
<meta itemprop="representativeOfPage" content="true">
|
<meta itemprop="representativeOfPage" content="true">
|
||||||
{{- else }} itemprop="hasPart">
|
{{- else }} itemprop="hasPart">
|
||||||
|
|
|
@ -2,6 +2,6 @@
|
||||||
{{- with .Get "itemprop" -}}
|
{{- with .Get "itemprop" -}}
|
||||||
{{- $itemprop = . -}}
|
{{- $itemprop = . -}}
|
||||||
{{- end -}}
|
{{- end -}}
|
||||||
<figure itemprop="{{ $itemprop }}"{{ with .Get "id" }} id="{{ . }}"{{ end }} itemscope itemtype="https://schema.org/Quotation">
|
<figure itemprop="{{ $itemprop }}"{{ with .Get "id" }} id="{{ . }}" tabindex="-1"{{ end }} itemscope itemtype="https://schema.org/Quotation">
|
||||||
{{ .Inner | markdownify }}
|
{{ .Inner | markdownify }}
|
||||||
</figure>
|
</figure>
|
||||||
|
|
|
@ -2,7 +2,6 @@
|
||||||
{{- with .Get "type" -}}
|
{{- with .Get "type" -}}
|
||||||
{{- $type = . -}}
|
{{- $type = . -}}
|
||||||
{{- end -}}
|
{{- end -}}
|
||||||
|
<section aria-label="{{ $type }}, caption, and transcript" itemprop="mentions" itemscope itemtype="https://schema.org/ImageObject" id="{{ .Get "id" }}" tabindex="-1">
|
||||||
<section aria-label="{{ $type }}, caption, and transcript" itemprop="mentions" itemscope itemtype="https://schema.org/ImageObject" id="{{ .Get "id" }}">
|
|
||||||
{{ .Inner | markdownify | safeHTML }}
|
{{ .Inner | markdownify | safeHTML }}
|
||||||
</section>
|
</section>
|
||||||
|
|
|
@ -14,11 +14,6 @@
|
||||||
and .firstColumn == 1
|
and .firstColumn == 1
|
||||||
and (.extract | test(" name=\"theme-color\""))
|
and (.extract | test(" name=\"theme-color\""))
|
||||||
)
|
)
|
||||||
or
|
|
||||||
( # See https://w3c.github.io/aria/#comment
|
|
||||||
.message == "Bad value “comment” for attribute “role” on element “p”."
|
|
||||||
and (.extract | test("u-comment"))
|
|
||||||
)
|
|
||||||
) | not
|
) | not
|
||||||
)
|
)
|
||||||
)
|
)
|
||||||
|
|
Loading…
Reference in a new issue