fmaury/seirdy.one
1
0
Fork 0
mirror of https://git.sr.ht/~seirdy/seirdy.one synced 2024-11-14 01:32:11 +00:00
Code Issues Projects Releases Wiki Activity

a11y: Make backlink label start with name

Browse source 
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
Show stats Download patch file Download diff file Expand all files Collapse all files

12
assets/css/main.css
View file

@ -172,15 +172,11 @@ html {
margin: .25em; margin: .25em;
} }
/* Increase backlink tap target size */ /* Increase backlink tap target size to at least 48x48 */
a[role="doc-backlink"] { a[role="doc-backlink"] {
padding: 0 1.75em 1.5em .25em; display: inline-block;
} margin-left: -.5em;
padding: .75em .5em;
/* 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;
} }
/* skip link: make it invisible until focused, and put it on the top. */ /* skip link: make it invisible until focused, and put it on the top. */

4
layouts/partials/processed-content.html
View file

@ -45,14 +45,14 @@
<!--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-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. 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 := `<a href="#fnref([0-9]):([0-9]*)"(.*role="doc-backlink"(?:[^>]*)?)>([^<]*)` -}} {{- $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.--> <!--Make endnotes focusable by ATs. Necessary for VoiceOver compatibility.-->
{{- $endNotesNotFocusable := `<li id="fn:([0-9]*)">` -}} {{- $endNotesNotFocusable := `<li id="fn:([0-9]*)">` -}}