mirror of
https://git.sr.ht/~seirdy/seirdy.one
synced 2024-11-10 00:12: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:
parent
f0a91d2678
commit
9d4f18ffde
2 changed files with 6 additions and 10 deletions
|
@ -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. */
|
||||
|
|
|
@ -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]*)">` -}}
|
||||
|
|
Loading…
Reference in a new issue