1
0
Fork 0
mirror of https://git.sr.ht/~seirdy/seirdy.one synced 2024-11-10 00:12: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:
Rohan Kumar 2022-05-19 17:18:14 -07:00
parent 47e55b9aef
commit f798de7e63
No known key found for this signature in database
GPG key ID: 1E892DB2A5F84479
10 changed files with 75 additions and 61 deletions

View file

@ -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;

View file

@ -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 }}

View file

@ -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 }}

View file

@ -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&nbsp;${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&nbsp;${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 -}}

View file

@ -1,20 +1,27 @@
<section aria-labelledby="webmentions"> <section aria-labelledby="webmentions">
<h2 id="webmentions">Webmen&shy;tions</h2> <h2 id="webmentions" tabindex="-1">Webmen&shy;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>

View file

@ -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 }}

View file

@ -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">

View file

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

View file

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

View file

@ -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
) )
) )