WebAIM - Web Accessibility In Mind

E-mail List Archives

RE: footnotes

for

From: Kynn Bartlett
Date: Nov 3, 2001 12:34AM


At 11:10 AM 11/2/2001 , Jason Addie wrote:
>I am trying to figure out how to deal with footnotes. I was thinking of using the superscript tag to indicate that there is a footnote. Such as the following:
>"E-mail<sup>1</sup>:"
>However, the screen readers that I have tested this on just reads "E-mail 1" with no indication that it was a superscript (footnote).
>I am also trying to figure out how to allow them to read the footnote right away. I was thinking about a link to either a pop-up window or to the bottom of the page. I know that pop-up windows are not highly favored. If I went with the last option, I was thinking of having a link that would send them back to where they were before the clicked on the footnote link.
My recommendation is what you say -- a link that sends them back to
where they were (since you know what that is).
Here is my sample code.
In main.html:
Email
<sup>
<a href="footnotes.html#f1" name="f1" id="f1"
rel="help" title="Footnote 1: Email">
1
</a>
</sup>
In footnotes.html:
<h3>
<a name="f1" id="f1">
Footnote 1: Email
</a>
</h3>
<p>
Text of footnote
</p>
<a href="main.html#f1" rev="help">
Back to Main Document
</a>
Note there is not a defined link type for "footnote" although there
probably should be. The keyword "help" is the closest, although
"glossary" or "appendix" could also be used, e.g.:
rel="help appendix glossary"
Also note the title on the link in main.html. This is because it
allows for identification of the link when it is out of context,
and there is no easy way to associate the number with the item it
is footnoting. (You could make "Email" the link text, but there
are some benefits -- most of them when printing -- to use
traditional footnotes rather than simply hypertext links.)
--Kynn
-- Kynn Bartlett < <EMAIL REMOVED> > http://kynn.com/
Chief Technologist, Idyll Mountain Internet http://idyllmtn.com/
Online Instructor, Accessible Web Design http://kynn.com/+d201