WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Footnotes

for

From: Isabel Holdsworth
Date: Aug 23, 2018 5:54AM

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