WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Footnotes

for

From: Isabel Holdsworth
Date: Feb 19, 2019 1:57AM

We opted for a similar approach, where clicking the footnote number in
the main text brings up a dialog containing the footnote text and a
"Close" button. This works well if the footnote is quite long, as
screenreader users can read it in a granular fashion, and it also
avoids the need to scroll the page.
Cheers, Isabel

On 12/02/2019, Birkir R. Gunnarsson < <EMAIL REMOVED> > wrote:
> 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.
> > > > >