WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Footnotes

for

From: Birkir R. Gunnarsson
Date: Feb 12, 2019 1:34PM

In one of our new designs we decided to have a copy of the footnote
text available as a tooltip, click the footnote reference and you can
read the text, click the "close" button, and Bob's your grandma.
We played around with other designs but felt this was the most user
friendly with the least amount of extra Javascript development effort.



On 2/12/19, Greg Jellin < <EMAIL REMOVED> > wrote:
> 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
>> > > > > >


--
Work hard. Have fun. Make history.