WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Footnotes

for

From: Andre Polykanine
Date: Aug 22, 2018 3:55PM

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 REMOVED> >
To: <EMAIL 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