E-mail List Archives
Thread: Footnotes
Number of posts in this thread: 15 (In chronological order)
From: Isabel Holdsworth
Date: Wed, Aug 22 2018 8:53AM
Subject: Footnotes
No previous message | Next message →
Hi all,
We're creating an exam test whose answer options have associated
footnotes, sometimes more than one.
We have a multiple choice question that has four possible answers and
three footnotes at the bottom of the page.
Answer 1 is associated with footnote 1.
Answer 2 doesn't have any footnotes.
Answer 3 is associated with footnotes 1 and 2.
Answer 4 is associated with footnote 3.
What would be the most accessible way of associating each option with
its footnote(s)? Using aria-describedby could work, but I don't feel
it's reliable enough. I'm using JAWS in expert mode and can't seem to
get access to descriptions marked up in this way. And it could get
confusing if an option is associated with more than one footnote.
I could ensure that the footnotes are located directly after the
answer options in the DOM. Would this be enough? Screenreaders in
forms mode would skip over the footnotes and straight to the submit
button, and users might never realise they are present. So this
doesn't feel like an acceptable solution.
I'd really appreciate your thoughts on this.
Cheers, Isabel
From: Isabel Holdsworth
Date: Wed, Aug 22 2018 9:01AM
Subject: Re: Footnotes
← Previous message | Next message →
Hi all,
We're creating an exam test, one of whose questions has four multiple
choice options. Three of these options have associated footnotes
(sometimes more than one), and just to make things interesting,
footnote 1 relates to both options 1 and 3. So effectively there's a
many-to-many relationship.
We're struggling to mark up this question accessibly.
We've tried using the aria-described attribute, but it isn't spoken by
JAWS in expert mode so it's not reliable enough for us.
We've tried locating the text just below the option radiobuttons in
the DOM, but of course when JAWS is in forms mode, pressing Tab skips
over the footnotes and straight to the Submit button.
Can anyone think of an accessible way to associate each option with
its footnotes in a way that works for screenreader, screen mag and
keyboard users?
I'd really appreciate your thoughts.
Thanks as always, Isabel
From: Brandon Keith Biggs
Date: Wed, Aug 22 2018 10:17AM
Subject: Re: Footnotes
← Previous message | Next message →
Hello,
I really like it when footnotes are links and the link takes me to the
footnote.
The problem is then that it is hard to get back to your place.
Could a modal pop up with the footnote when you click on the link and then
allow the user to read the note, then hit escape when they are done?
Thanks,
Brandon Keith Biggs <http://brandonkeithbiggs.com/>;
On Wed, Aug 22, 2018 at 7:53 AM Isabel Holdsworth < = EMAIL ADDRESS REMOVED = >
wrote:
> Hi all,
>
> We're creating an exam test whose answer options have associated
> footnotes, sometimes more than one.
>
> We have a multiple choice question that has four possible answers and
> three footnotes at the bottom of the page.
>
> Answer 1 is associated with footnote 1.
> Answer 2 doesn't have any footnotes.
> Answer 3 is associated with footnotes 1 and 2.
> Answer 4 is associated with footnote 3.
>
> What would be the most accessible way of associating each option with
> its footnote(s)? Using aria-describedby could work, but I don't feel
> it's reliable enough. I'm using JAWS in expert mode and can't seem to
> get access to descriptions marked up in this way. And it could get
> confusing if an option is associated with more than one footnote.
>
> I could ensure that the footnotes are located directly after the
> answer options in the DOM. Would this be enough? Screenreaders in
> forms mode would skip over the footnotes and straight to the submit
> button, and users might never realise they are present. So this
> doesn't feel like an acceptable solution.
>
> I'd really appreciate your thoughts on this.
>
> Cheers, Isabel
> > > > >
From: Guy Hickling
Date: Wed, Aug 22 2018 11:13AM
Subject: Re: Footnotes
← Previous message | Next message →
The best way to do accessible footnotes is not to have them! They are a
carry over from paper books, and in my view are something best left in
books and not carried over to the internet.
Paper books are for sighted people, and if there are footnotes at the
bottom of the page the sighted reader only has to take a quick glance down
to read them. But the internet is for everyone, and footnotes, even when
done as accessibly as possible, are not very manageable. Even sighted,
non-disabled people must scroll down, maybe more than once, to see the
footnotes, then scroll back up again and try to find where they were.
For disabled peopled it is much worse; keyboard-only users have to follow
links to the footnotes (assuming the developer has created links which is
not usually the case). As you have found yourself, screen readers don't
always handle them well. People with poor eyesight have to zoom just to
read them (and the superscript numbers or characters often need even more
zooming to read them, especially when they immediately follow a word of
text with no intervening space). And many designers and developers show
them in a light grey colour as well thus ensuring maximum difficulty for
all.
For an alternative solution, Brandon has just beaten me to the draw while I
was writing this, with his suggestion of modal popups instead, which I
like. Or for another alternative presentation, suppose you put the
footnotes for each question directly underneath the question they apply to
(yes, even though some might have to be repeated for more than one
question). Perhaps give them a different colour (but contrasting well
against the page) and/or font, to distinguish them from the question text,
and use the same size font so no one has to use zoom to read them.
Or lay out the page in two columns, with the exam question on the left side
of the page, and the footnotes applying to that question on the right
(probably narrower) side of the page? Either way, sighted users can see the
relevant footnotes without scrolling, and keyboard users, including screen
reader users, don't need to follow any links. They will immediately follow
the exam questions in the DOM, which helps screen readers users.
In your particular situation of exam questions, another solution might be:
do these footnotes need to be there? - perhaps some might be more
appropriate as instructions at the top of the list of questions? Just a
another thought. There are many ways to avoid footnotes.
If you cannot do any of the above, then there are procedures for making
footnotes accessible that have been described elsewhere in various places
so I won't go into them here. But the basic idea is to ensure that keyboard
users have a way to navigate to the footnote using a link, then to navigate
back again to where they were.
I hope I have been able to convince a few people to move away from
footnotes; I don't think they are very useful in websites!
Regards,
Guy Hickling
Accessibility
Auditor and
Consultant
From: chagnon
Date: Wed, Aug 22 2018 11:38AM
Subject: Re: Footnotes
← Previous message | Next message →
I think this is a very narrow view of what a footnotes does...and how it
should perform.
No matter what form of publishing we use -- web, digital, print -- there is
a need for accessory, explanatory detailed information about something.
I don't care what name we gives these pieces of information -- footnote,
endnote, reference, whatever -- the need is there.
Yes, footnotes were originally developed for printed books, but that doesn't
mean the concept is now outdated. Instead, we need to develop methods and
techniques that provide this information to the majority of people across
all technologies.
--Bevi
- - -
Bevi Chagnon, founder/CEO | = EMAIL ADDRESS REMOVED =
- - -
PubCom: Technologists for Accessible Design + Publishing
consulting . training . development . design . sec. 508 services
Upcoming classes at www.PubCom.com/classes
- - -
Latest blog-newsletter - Accessibility Tips at www.PubCom.com/blog
From: Lovely, Brian
Date: Wed, Aug 22 2018 11:38AM
Subject: Re: [External Sender] Footnotes
← Previous message | Next message →
There is a thread for that: https://webaim.org/discussion/mail_thread?thread=7933
Unfortunately, not all the links to examples work, but there may be some good info in there anyway.
From: Lovely, Brian
Date: Wed, Aug 22 2018 11:41AM
Subject: Re: [External Sender] Footnotes
← Previous message | Next message →
The link to the Web Experience Toolkit footnote example does still work: https://wet-boew.github.io/v4.0-ci/demos/footnotes/footnotes-en.html
From: Brandon Keith Biggs
Date: Wed, Aug 22 2018 12:06PM
Subject: Re: [External Sender] Footnotes
← Previous message | Next message →
Yes, this is perfect!
Thanks,
Brandon Keith Biggs <http://brandonkeithbiggs.com/>;
On Wed, Aug 22, 2018 at 10:41 AM Lovely, Brian via WebAIM-Forum <
= EMAIL ADDRESS REMOVED = > wrote:
> The link to the Web Experience Toolkit footnote example does still work:
> https://wet-boew.github.io/v4.0-ci/demos/footnotes/footnotes-en.html
>
>
From: JP Jamous
Date: Wed, Aug 22 2018 3:26PM
Subject: Re: Footnotes
← Previous message | Next message →
Thinking of this, I would definitely distracted if the footnote was in the
DOM right after the question. So how about this.
Place a button after the question with the caption "Footnote 1"
When the button is pressed, show a div that contains the footnote with a
close button
As a test taker, I would press the button and down-arrow to read the
footnote. Once I am done, I would hit Escape or press the Close button to
collapse it.
I think that would work better because the test taker is in charge of when
you hear the footnote.
Of course, you can hide the buttons using clipped CSS so sighted test takers
do not see them, but SR users can hear them. You do the same to the footnote
number, where the SR user does not hear it but the sighted user sees it.
I think this type of approach would work best.
--------------------
JP Jamous
Senior Digital Accessibility Engineer
E-Mail Me |Join My LinkedIn Network
--------------------
From: Andre Polykanine
Date: Wed, Aug 22 2018 3:55PM
Subject: Re: Footnotes
← Previous message | Next message →
Hello Isabel,
If I were you, I'd proceed like the following (which I did several
times, btw):
1. If you want your students to be able to return back to the
reference, after each question add a link to your footnote, and do give it an
ID, like this:
<a id="noteRef1" href="#note1">[1]</a>
Alternatively, if you want them to return to the question, give and ID
to the question <div> (or <article>, or whatever you have), and link
to the footnote like this:
<a href="#note1">[1]</a>
2. Towards the end of the page mark up a separate heading stating
"Footnotes".
3. Organize your footnotes to your liking (as an ordered or unordered
list, as a set of paragraphs, articles or whatever suits you better).
Each footnote (list item, paragraph, article...) must have the
ID corresponding to the ID in the href attribute of your link, i.e.:
<article id="note1">
4. At the end of each note there must be a link for returning back. As
you have a many-to-many relationship, I don't see any better solution
besides providing several links, like:
<a href="#noteRef1">Back to question 1</a><br>
<a href="#noteRef3">Back to question 3</a><br>
Remember that, as I stated earlier, you may choose to bring them back
to the questions themselves, not to the references.
I believe this solution is both accessible and usable.
--
With best regards from Ukraine,
Andre
Skype: menelion_elensule
Twitter (English only): @AndrePolykanine
------------ Original message ------------
From: Isabel Holdsworth < = EMAIL ADDRESS REMOVED = >
To: = EMAIL ADDRESS REMOVED =
Date created: , 6:01:51 PM
Subject: [WebAIM] Footnotes
Hi all,
We're creating an exam test, one of whose questions has four multiple
choice options. Three of these options have associated footnotes
(sometimes more than one), and just to make things interesting,
footnote 1 relates to both options 1 and 3. So effectively there's a
many-to-many relationship.
We're struggling to mark up this question accessibly.
We've tried using the aria-described attribute, but it isn't spoken by
JAWS in expert mode so it's not reliable enough for us.
We've tried locating the text just below the option radiobuttons in
the DOM, but of course when JAWS is in forms mode, pressing Tab skips
over the footnotes and straight to the Submit button.
Can anyone think of an accessible way to associate each option with
its footnotes in a way that works for screenreader, screen mag and
keyboard users?
I'd really appreciate your thoughts.
Thanks as always, Isabel
From: Birkir R. Gunnarsson
Date: Wed, Aug 22 2018 9:04PM
Subject: Re: Footnotes
← Previous message | Next message →
This is, at least as far as a screen reader user is concerned, where
aria-flowto would've been perfect. Sadly, it is only supported by
Jaws/Firefox (or at least it was ).
The refering element would have aria-flowto="id of footnote". With
Jaws and FF, pressing the = character took user from refernce to
footnote and shift-= took the user back (Jaws was smart enough to
remember where user navigated from).
In the absence of support for aria-flowto, me and a couple of friend
once developed a Javascript based solution where refernece links to
footnote and footnote back to refence, the Javascript is used to
remember where the user came from
http://a11yideas.com/testcode/footnotesManyToOne.html
If you shrink the example to a responsive view the footnote pops up as
a modal dialog.
Cheers
-B
On 8/22/18, Andre Polykanine < = EMAIL ADDRESS REMOVED = > wrote:
> Hello Isabel,
> If I were you, I'd proceed like the following (which I did several
> times, btw):
> 1. If you want your students to be able to return back to the
> reference, after each question add a link to your footnote, and do give it
> an
> ID, like this:
> <a id="noteRef1" href="#note1">[1]</a>
> Alternatively, if you want them to return to the question, give and ID
> to the question <div> (or <article>, or whatever you have), and link
> to the footnote like this:
> <a href="#note1">[1]</a>
> 2. Towards the end of the page mark up a separate heading stating
> "Footnotes".
> 3. Organize your footnotes to your liking (as an ordered or unordered
> list, as a set of paragraphs, articles or whatever suits you better).
> Each footnote (list item, paragraph, article...) must have the
> ID corresponding to the ID in the href attribute of your link, i.e.:
> <article id="note1">
> 4. At the end of each note there must be a link for returning back. As
> you have a many-to-many relationship, I don't see any better solution
> besides providing several links, like:
> <a href="#noteRef1">Back to question 1</a><br>
> <a href="#noteRef3">Back to question 3</a><br>
> Remember that, as I stated earlier, you may choose to bring them back
> to the questions themselves, not to the references.
> I believe this solution is both accessible and usable.
>
>
> --
> With best regards from Ukraine,
> Andre
> Skype: menelion_elensule
> Twitter (English only): @AndrePolykanine
>
>
> ------------ Original message ------------
> From: Isabel Holdsworth < = EMAIL ADDRESS REMOVED = >
> To: = EMAIL ADDRESS REMOVED =
> Date created: , 6:01:51 PM
> Subject: [WebAIM] Footnotes
>
>
> Hi all,
>
> We're creating an exam test, one of whose questions has four multiple
> choice options. Three of these options have associated footnotes
> (sometimes more than one), and just to make things interesting,
> footnote 1 relates to both options 1 and 3. So effectively there's a
> many-to-many relationship.
>
> We're struggling to mark up this question accessibly.
>
> We've tried using the aria-described attribute, but it isn't spoken by
> JAWS in expert mode so it's not reliable enough for us.
>
> We've tried locating the text just below the option radiobuttons in
> the DOM, but of course when JAWS is in forms mode, pressing Tab skips
> over the footnotes and straight to the Submit button.
>
> Can anyone think of an accessible way to associate each option with
> its footnotes in a way that works for screenreader, screen mag and
> keyboard users?
>
> I'd really appreciate your thoughts.
>
> Thanks as always, Isabel
> > > > >
> > > > >
--
Work hard. Have fun. Make history.
From: Isabel Holdsworth
Date: Thu, Aug 23 2018 5:54AM
Subject: Re: Footnotes
← Previous message | Next message →
Thanks everyone - this has been a very useful discussion indeed. Our
current solution is similar to Birkir's creation, and I thought it was
about the best we could get. But I really like the idea of opening a
modal dialogue containing the footnote. I'm off to do some prototyping
and convincing! Thanks again for the thought-provoking suggestions and
great mark-up.
On 23/08/2018, Birkir R. Gunnarsson < = EMAIL ADDRESS REMOVED = > wrote:
> This is, at least as far as a screen reader user is concerned, where
> aria-flowto would've been perfect. Sadly, it is only supported by
> Jaws/Firefox (or at least it was ).
> The refering element would have aria-flowto="id of footnote". With
> Jaws and FF, pressing the = character took user from refernce to
> footnote and shift-= took the user back (Jaws was smart enough to
> remember where user navigated from).
> In the absence of support for aria-flowto, me and a couple of friend
> once developed a Javascript based solution where refernece links to
> footnote and footnote back to refence, the Javascript is used to
> remember where the user came from
> http://a11yideas.com/testcode/footnotesManyToOne.html
> If you shrink the example to a responsive view the footnote pops up as
> a modal dialog.
> Cheers
> -B
>
> On 8/22/18, Andre Polykanine < = EMAIL ADDRESS REMOVED = > wrote:
>> Hello Isabel,
>> If I were you, I'd proceed like the following (which I did several
>> times, btw):
>> 1. If you want your students to be able to return back to the
>> reference, after each question add a link to your footnote, and do give
>> it
>> an
>> ID, like this:
>> <a id="noteRef1" href="#note1">[1]</a>
>> Alternatively, if you want them to return to the question, give and ID
>> to the question <div> (or <article>, or whatever you have), and link
>> to the footnote like this:
>> <a href="#note1">[1]</a>
>> 2. Towards the end of the page mark up a separate heading stating
>> "Footnotes".
>> 3. Organize your footnotes to your liking (as an ordered or unordered
>> list, as a set of paragraphs, articles or whatever suits you better).
>> Each footnote (list item, paragraph, article...) must have the
>> ID corresponding to the ID in the href attribute of your link, i.e.:
>> <article id="note1">
>> 4. At the end of each note there must be a link for returning back. As
>> you have a many-to-many relationship, I don't see any better solution
>> besides providing several links, like:
>> <a href="#noteRef1">Back to question 1</a><br>
>> <a href="#noteRef3">Back to question 3</a><br>
>> Remember that, as I stated earlier, you may choose to bring them back
>> to the questions themselves, not to the references.
>> I believe this solution is both accessible and usable.
>>
>>
>> --
>> With best regards from Ukraine,
>> Andre
>> Skype: menelion_elensule
>> Twitter (English only): @AndrePolykanine
>>
>>
>> ------------ Original message ------------
>> From: Isabel Holdsworth < = EMAIL ADDRESS REMOVED = >
>> To: = EMAIL ADDRESS REMOVED =
>> Date created: , 6:01:51 PM
>> Subject: [WebAIM] Footnotes
>>
>>
>> Hi all,
>>
>> We're creating an exam test, one of whose questions has four multiple
>> choice options. Three of these options have associated footnotes
>> (sometimes more than one), and just to make things interesting,
>> footnote 1 relates to both options 1 and 3. So effectively there's a
>> many-to-many relationship.
>>
>> We're struggling to mark up this question accessibly.
>>
>> We've tried using the aria-described attribute, but it isn't spoken by
>> JAWS in expert mode so it's not reliable enough for us.
>>
>> We've tried locating the text just below the option radiobuttons in
>> the DOM, but of course when JAWS is in forms mode, pressing Tab skips
>> over the footnotes and straight to the Submit button.
>>
>> Can anyone think of an accessible way to associate each option with
>> its footnotes in a way that works for screenreader, screen mag and
>> keyboard users?
>>
>> I'd really appreciate your thoughts.
>>
>> Thanks as always, Isabel
>> >> >> >> >>
>> >> >> >> >>
>
>
> --
> Work hard. Have fun. Make history.
> > > > >
From: Mallory
Date: Fri, Aug 24 2018 7:38AM
Subject: Re: Footnotes
← Previous message | Next message →
Like Brandon, I like mine to be links as well-- esp in this case where the same footnote can be referred to several times, I may not need to re-read it several times in a row or anything.
I like the idea of using a modal for the problem if getting back to where you were. Sounds like one of the few times a modal dialog actually isn't superfluous design woo.
cheers,
Mallory
On Wed, Aug 22, 2018, at 6:17 PM, Brandon Keith Biggs wrote:
> Hello,
> I really like it when footnotes are links and the link takes me to the
> footnote.
> The problem is then that it is hard to get back to your place.
> Could a modal pop up with the footnote when you click on the link and then
> allow the user to read the note, then hit escape when they are done?
> Thanks,
>
> Brandon Keith Biggs <http://brandonkeithbiggs.com/>;
>
>
> On Wed, Aug 22, 2018 at 7:53 AM Isabel Holdsworth < = EMAIL ADDRESS REMOVED = >
> wrote:
>
> > Hi all,
> >
> > We're creating an exam test whose answer options have associated
> > footnotes, sometimes more than one.
> >
> > We have a multiple choice question that has four possible answers and
> > three footnotes at the bottom of the page.
> >
> > Answer 1 is associated with footnote 1.
> > Answer 2 doesn't have any footnotes.
> > Answer 3 is associated with footnotes 1 and 2.
> > Answer 4 is associated with footnote 3.
> >
> > What would be the most accessible way of associating each option with
> > its footnote(s)? Using aria-describedby could work, but I don't feel
> > it's reliable enough. I'm using JAWS in expert mode and can't seem to
> > get access to descriptions marked up in this way. And it could get
> > confusing if an option is associated with more than one footnote.
> >
> > I could ensure that the footnotes are located directly after the
> > answer options in the DOM. Would this be enough? Screenreaders in
> > forms mode would skip over the footnotes and straight to the submit
> > button, and users might never realise they are present. So this
> > doesn't feel like an acceptable solution.
> >
> > I'd really appreciate your thoughts on this.
> >
> > Cheers, Isabel
> > > > > > > > > >
> > > >
From: glen walker
Date: Mon, Aug 27 2018 7:56PM
Subject: Re: Footnotes
← Previous message | Next message →
A bit late in the discussion (was on vacation), but I usually refer to this
blog when talking about accessible footnotes. It has some nice ideas.
https://www.sitepoint.com/accessible-footnotes-css/
Unfortunately, the examples they show are images instead of real code.
I had modified the examples in the blog so that I could have two different
questions point to the same footnote and the "back" from the footnote would
go back to the appropriate place.
From: Isabel Holdsworth
Date: Tue, Aug 28 2018 3:04AM
Subject: Re: Footnotes
← Previous message | No next message
Glen, I do like the Sitepoint example, and there's now an HTML
rendition near the bottom of the page. However, since my footnote
references are encapsulated inside radiobutton labels, I'm loath to
allow the focus to be moved in case some candidates are unsure of how
to get back where they came from. So I think a dialog works
beautifully in this instance. Simple is beautiful :-)
Cheers, Isabel
On 28/08/2018, glen walker < = EMAIL ADDRESS REMOVED = > wrote:
> A bit late in the discussion (was on vacation), but I usually refer to this
> blog when talking about accessible footnotes. It has some nice ideas.
>
> https://www.sitepoint.com/accessible-footnotes-css/
>
> Unfortunately, the examples they show are images instead of real code.
>
> I had modified the examples in the blog so that I could have two different
> questions point to the same footnote and the "back" from the footnote would
> go back to the appropriate place.
> > > > >