WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Footnotes


From: Guy Hickling
Date: Aug 22, 2018 11:13AM

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

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!

Guy Hickling
Auditor and