E-mail List Archives

You are here: Home > Community > E-mail List Archives > View Thread

Thread: Footnotes

Number of posts in this thread: 9 (In chronological order)

From: Greg Jellin
Date: Tue, Feb 12 2019 8:24AM
Subject: Footnotes
No previous message | Next message →

Hello friends,

I'm testing a site that has content with footnote references. The
footnotes are presented as superscript at the end of sentences (like
they would in printed text) and at the bottom of the page there is a
list of footnotes. The footnotes are not hyperlinked.

I have 2 questions:

1) Is the a violation of any of the WCAG A/AA SCs? 1.3.1?

2) What are your thoughts for a more inclusive approach? My initial
thought is to link each footnote reference to the corresponding footnote
at the bottom of the page, and to add an aria-label within the link with
something like "footnote 1". I wonder if using aria-described by on the
link to associate the footnote to the link would be a good addition,
then AT users could hear the entire footnote without leaving the context
of the current paragraph.

Thanks!

Greg

From: Jared Smith
Date: Tue, Feb 12 2019 8:55AM
Subject: Re: Footnotes
← Previous message | Next message →

Footnotes are defined as being an element for which there is not a
clear accessibility pattern nor sufficient semantics provided via
HTML. I wouldn't think that a non-linked reference to a footnote would
be a WCAG failure.

As for possible solutions, this topic has been discussed on this list
quite a few times in recent years. You can search the list archives at
https://webaim.org/search/?q=footnotes&scope=archives These two recent
threads may be of particular interest to you -
https://webaim.org/discussion/mail_thread?thread=8907 and
https://webaim.org/discussion/mail_thread?thread=7933

Having the entire footnote read in conjunction with the footnote
reference would not provide an equivalent experience due to the
notable amount of content being read (and content that would not
appear visually at that place in the page).

Jared

From: glen walker
Date: Tue, Feb 12 2019 9:05AM
Subject: Re: Footnotes
← Previous message | Next message →

I was about to post this right before Jared responded. It's essentially
the same thing I said in
https://webaim.org/discussion/mail_thread?thread=8907#post13 (which I had
forgotten I said last year :-)). Thanks for the archive link, Jared.

Here's a nice article on creating accessible footnotes,
https://www.sitepoint.com/accessible-footnotes-css/ .

The footnote superscript links to the bottom of the page which has a list
of footnotes and each footnote itself has a return link to go back.

I also have an example where one footnote is referenced by several places
on the page and I use some simple javascript to adjust the return link to
go back to the right place. I can post that if wanted. Just need to clean
it up an anonymize it.

Glen

From: Jim Allan
Date: Tue, Feb 12 2019 9:23AM
Subject: Re: Footnotes
← Previous message | Next message →

Glen
JavaScript would be appreciated!

On Tue, Feb 12, 2019, 10:05 AM glen walker < = EMAIL ADDRESS REMOVED = wrote:

> I was about to post this right before Jared responded. It's essentially
> the same thing I said in
> https://webaim.org/discussion/mail_thread?thread=8907#post13 (which I had
> forgotten I said last year :-)). Thanks for the archive link, Jared.
>
> Here's a nice article on creating accessible footnotes,
> https://www.sitepoint.com/accessible-footnotes-css/ .
>
> The footnote superscript links to the bottom of the page which has a list
> of footnotes and each footnote itself has a return link to go back.
>
> I also have an example where one footnote is referenced by several places
> on the page and I use some simple javascript to adjust the return link to
> go back to the right place. I can post that if wanted. Just need to clean
> it up an anonymize it.
>
> Glen
> > > > >

From: Greg Jellin
Date: Tue, Feb 12 2019 10:36AM
Subject: Re: Footnotes
← Previous message | Next message →

Thanks all for the help. Glen, I'd love to see that example if you have
the time and inclination.

Greg

On 2/12/2019 8:23 AM, Jim Allan wrote:
> Glen
> JavaScript would be appreciated!
>
> On Tue, Feb 12, 2019, 10:05 AM glen walker < = EMAIL ADDRESS REMOVED = wrote:
>
>> I was about to post this right before Jared responded. It's essentially
>> the same thing I said in
>> https://webaim.org/discussion/mail_thread?thread=8907#post13 (which I had
>> forgotten I said last year :-)). Thanks for the archive link, Jared.
>>
>> Here's a nice article on creating accessible footnotes,
>> https://www.sitepoint.com/accessible-footnotes-css/ .
>>
>> The footnote superscript links to the bottom of the page which has a list
>> of footnotes and each footnote itself has a return link to go back.
>>
>> I also have an example where one footnote is referenced by several places
>> on the page and I use some simple javascript to adjust the return link to
>> go back to the right place. I can post that if wanted. Just need to clean
>> it up an anonymize it.
>>
>> Glen
>> >> >> >> >>
> > > >

From: glen walker
Date: Tue, Feb 12 2019 11:01AM
Subject: Re: Footnotes
← Previous message | Next message →

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>




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





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.





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



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.





(*) 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>

From: Greg Jellin
Date: Tue, Feb 12 2019 11:10AM
Subject: Re: Footnotes
← Previous message | Next message →

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>
>
> 
>
> 
> Blah blah blah (<a id='alpha' href='#asterisk' onclick='myclick(event)'>*
> </a>)
> 
>
> 
>
> 
> 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.
> 
>
> 
>
> 
> More blah blah but different from first blah but same footnote (<a id='beta'
> href='#asterisk' onclick='myclick(event)'>*</a>)
> 
>
> 
> 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.
> 
>
> 
>
> 
> (*) 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>
> 
> > > List archives athttp://webaim.org/discussion/archives
>

From: Birkir R. Gunnarsson
Date: Tue, Feb 12 2019 1:34PM
Subject: Re: Footnotes
← Previous message | Next message →

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 ADDRESS 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>
>>
>> 
>>
>> 
>> Blah blah blah (<a id='alpha' href='#asterisk' onclick='myclick(event)'>*
>> </a>)
>> 
>>
>> 
>>
>> 
>> 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.
>> 
>>
>> 
>>
>> 
>> More blah blah but different from first blah but same footnote (<a
>> id='beta'
>> href='#asterisk' onclick='myclick(event)'>*</a>)
>> 
>>
>> 
>> 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.
>> 
>>
>> 
>>
>> 
>> (*) 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>
>> 
>> >> >> List archives athttp://webaim.org/discussion/archives
>> > > > > >

--
Work hard. Have fun. Make history.

From: Isabel Holdsworth
Date: Tue, Feb 19 2019 1:57AM
Subject: Re: Footnotes
← Previous message | No next message

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 ADDRESS 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 ADDRESS 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>
>>>
>>> 
>>>
>>> 
>>> Blah blah blah (<a id='alpha' href='#asterisk'
>>> onclick='myclick(event)'>*
>>> </a>)
>>> 
>>>
>>> 
>>>
>>> 
>>> 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.
>>> 
>>>
>>> 
>>>
>>> 
>>> More blah blah but different from first blah but same footnote (<a
>>> id='beta'
>>> href='#asterisk' onclick='myclick(event)'>*</a>)
>>> 
>>>
>>> 
>>> 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.
>>> 
>>>
>>> 
>>>
>>> 
>>> (*) 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>
>>> 
>>> >>> >>> List archives athttp://webaim.org/discussion/archives
>>> >> >> >> >> >>
>
>
> --
> Work hard. Have fun. Make history.
> > > > >