WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Footnotes

for

From: Birkir R. Gunnarsson
Date: Aug 22, 2018 9:04PM

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 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 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
> > > > >
> > > > >


--
Work hard. Have fun. Make history.