WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Footnotes

for

From: Greg Jellin
Date: Feb 12, 2019 11:10AM

This is great! Thanks. I'll play around with it and see if I can get it
working for my needs.

Greg

On 2/12/2019 10:01 AM, glen walker wrote:
> 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>
> > > List archives athttp://webaim.org/discussion/archives
>