1
0
Fork 0
mirror of https://git.sr.ht/~seirdy/seirdy.one synced 2024-11-23 21:02:09 +00:00

a11y: Make backlink label start with name

The WCAG "label in name" SC requires visible labels to contain
accessible names, preferably by having accessible names start with
visible labels. This commit makes footnote backlinks display as a
hyperlink reading "Back" to meet this SC.
This commit is contained in:
Rohan Kumar 2022-07-11 15:18:15 -07:00
parent f0a91d2678
commit 9d4f18ffde
No known key found for this signature in database
GPG key ID: 1E892DB2A5F84479
2 changed files with 6 additions and 10 deletions

View file

@ -172,15 +172,11 @@ html {
margin: .25em;
}
/* Increase backlink tap target size */
/* Increase backlink tap target size to at least 48x48 */
a[role="doc-backlink"] {
padding: 0 1.75em 1.5em .25em;
}
/* Make room for those big backlink buttons so they don't overlap
* with links on the following endnote */
section[role="doc-endnotes"] li {
margin-bottom: 1.75em;
display: inline-block;
margin-left: -.5em;
padding: .75em .5em;
}
/* skip link: make it invisible until focused, and put it on the top. */

View file

@ -45,14 +45,14 @@
<!--Give footnote backlinks accessible names-->
{{- $footnoteBacklinksBad := `<a href="#fnref:([0-9]*)" class="footnote-backref"(.*role="doc-backlink"(?:[^>]*)?)>([^<]*)` -}}
{{- $footnoteBacklinksGood := `<a href="#fnref:${1}" aria-labelledby="bl-${1}"${2}>${3} <span id="bl-${1}" hidden="">back to reference ${1}</span>` -}}
{{- $footnoteBacklinksGood := `<br /><a href="#fnref:${1}" aria-labelledby="bl1-${1} bl2-${1}"${2}><span id="bl1-${1}">Back</span><span id="bl2-${1}" hidden=""> to reference ${1}</span>` -}}
<!--
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.
-->
{{- $repeatedFootnoteBacklinksBad := `<a href="#fnref([0-9]):([0-9]*)"(.*role="doc-backlink"(?:[^>]*)?)>([^<]*)` -}}
{{- $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>` -}}
{{- $repeatedFootnoteBacklinksGood := `<br /><a href="#fnref${1}:${2}" aria-labelledby="bl1-${2}-2 bl2-${2}-2"${3}><span id="bl1-${2}-2">Back</span><span id="bl2-${2}-2" hidden=""> to reference ${2}, instance 2</span>` -}}
<!--Make endnotes focusable by ATs. Necessary for VoiceOver compatibility.-->
{{- $endNotesNotFocusable := `<li id="fn:([0-9]*)">` -}}