WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Footnotes

for

From: glen walker
Date: Feb 12, 2019 11:01AM

It's pretty basic and can certainly be improved on a great deal. The back
link in the footnote itself should really go back to the text that has the
footnote, and not to the link to the footnote, but that could easily be
fixed.

The basic premise is that there's an onclick handler for the link, which
just sets the href attribute of the footnote before letting the event
bubble up.

<script>
function myclick(event) {
document.getElementById("footnote").setAttribute('href', '#' +
event.target.id);
/* don't drain the event, let click bubble up */
}
</script>

<!-- link to a footnote -->

<p>
Blah blah blah (<a id='alpha' href='#asterisk' onclick='myclick(event)'>*
</a>)
</p>

<!-- other stuff on the page -->

<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas
porttitor congue massa. Fusce posuere, magna sed
pulvinar ultricies, purus lectus malesuada libero, sit amet commodo magna
eros quis urna.
Nunc viverra imperdiet enim. Fusce est. Vivamus a tellus.
</p>

<!-- another link to the same footnote -->

<p>
More blah blah but different from first blah but same footnote (<a id='beta'
href='#asterisk' onclick='myclick(event)'>*</a>)
</p>

<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas
porttitor congue massa. Fusce posuere, magna sed
pulvinar ultricies, purus lectus malesuada libero, sit amet commodo magna
eros quis urna.
Nunc viverra imperdiet enim. Fusce est. Vivamus a tellus.
</p>

<!-- somewhere near the bottom of the page -->

<span id="asterisk" tabindex="-1">
(*) Here's the footnote that pertains to both sections. It has a return
link whose href is set dynamically
<a id="footnote" href="" aria-label="Back to content" style="font-size:
150%">&crarr;</a>
</span>