Footnotes and endnotes in HTML.next
"How to" tips and testing results

I've taken an action item with John Foliot to propose a new element in HTML5 for footnotes. The <note> and related <noteref> elements would provide an easy way for authors to create functioning footnotes, such as those in MS Word. Here's a Q&A to start the discussion.

Why is this necessary, when in page # links can be used?

It is reasonably easy to create footnotes in HTML using in-page hash # links and the back button to return. However, in 20 years of HTML there has been little uptake of links to/from notes in online academic documents. We are not going to see people magically begin to use footnotes after 20 years unless we make an explicit way to provide notes in HTML, and expect authors to use it.

Why do people use proper footnotes in MS Word?

Footnotes (and endnotes) have been available in Microsoft Word as an explicit command since the 1980s. Virtually all academic documents created in Microsoft Word today use this footnote feature which allows users to easily jump to and from the note from it's reference point. Proper footnotes are weaved in the fabric of academic documents created in Microsoft Word. While there may be many reasons for this success, here are the major reasons:

• It is an explicit "footnote" command
• It is easy to do
• It works well
• It looks good

This is what I'm hoping for its HTML counterpart, an "out of the box" html <note> element .

What about multiple references to a note?

In some documents there may be more than one reference to a note and therefore having a link back to the originating link would be problematic.

I don't think this is common, but we could find the prevalence of this practice. If common, here are some possible solutions:

• The link on the note could jump back to the place where the user came from. This is the most logical use case. Is there ever a case where this wouldn't be true?
• If there are good reasons to jump to another reference to the note from note:
  • there could be an attribute option to not return to the source link. OR
  • Provide option to return to any of the references with an automatically generated dropdown list of links.

Is it really harder for people who are blind to access notes that are not linked than sighted people?

Everyone is different, but in general is harder for people who are blind to quickly find a reference on the page. A sighted person can visually scan the page, find the footnote, and remember find their way back quickly. A blind person would have to use the "find" feature and therefore would have to memorize exact words in a sentence that preceded the link to the note. This means for every footnote they would go back and reread the sentence leading up to the reference and memorize some of its words before trying to find the note, read the note, and remember the keywords to enter into the "find".

Let's make footnotes easy to write and easy to read. School is hard enough without having to go looking for references.

What are some of the options and behaviours a note element could have?

• Hyperlink to the note from the ref point in document, and a default option to return to the point of reference
• If there is more than one point of reference, the returning link would return to the point from where it was accessed.
• Hyperlinks back to reference can be turned off with an attribute setting if there are multiple links to it in the doc.
• Speculative feature: an attribute that allows the footnote to open in-line like the summary and details element right on the page where the reference to it is found.
• WAI-ARIA could provide new region roles for role="footnotes" and role="endnotes".

What about the problem of one footnoote and many references to it in a document. How can we know where to return the user?

This issue seems to be used as a blocker whenever momentum gathers about a a new dedicate note/footnote element. Usually a user is starting in the document, and they want to reader the footnote and return where to where they came from. There are several ways to address this that allow the user to return easily.

1. The footnote could come up as a modal lightbox which gets focus and returns the user to when they hit escape key or click the "return" button.
2. The footnote comes up as a show/hide imediately after the reference, which can be opened and closed like <details><summary>
3. The user can be taken to the footnote, and the back button takes them where they were.

What if the user wants to know every reference or a list of references to a footnote in a document?

It is a completely separate use case to want a list of EVERY reference to a footnote. I think that should be secondary requirement and not used as a blocker. It could be in the second round of this extension. If option one above is choes, and the footnote is in a lightbox, it could be done as an optional control lightbox . So there is a "return" button and a "list all other reference to this note" button which provides a light box with the list of links that can take the user to any of these references.

I don't however think this should be in our first version of this, as it complicates the issue and is not a very common use case. When HTML form element behaviours were specified there were lots of options, but the consensus was to stay with simplicity.

What about Daisy and EPUB? What is available right now in those standards?

REGION

The Daisy 3 standard says this about regions:

region (CDATA, IMPLIED): Specifies the region (defined in layout in document head) in which the text will be presented. References the id of the appropriate region... For example ... notes (e.g., footnotes) might be displayed in a separate area at the bottom of the screen (region="notes").

EPUB

What would the code look like? These are common semantics in ePub which can be used as a discussion point.

							<p>lorum ipsum.<a epub:type="noteref" href="#fn01">1</a></p>
<aside id="fn01" epub:type="footnote">
   …
</aside>
						

							<p>lorum ipsum.<a epub:type="noteref" href="#en01">1</a></p>
<aside id="en01" epub:type="rearnote">
   …
</aside>
						

							<section epub:type="rearnotes">
   <h1>Endnotes</h1>
   
   <section>
      <h2>Chapter 1</h2>
      <aside id="c01-en01" epub:type="rearnote">
         …
      </aside>
      …
   </section>
   …
</section>
						

Conclusion

If we want authors to create footnotes that are easy to jump to and from, we should provide an easy way to do that. It would be great to have a working <noteref> and <note> elements that opens (and/or jumps) to the footnote and returns the user back to footnote. We started a specification extension for this here.

Feel free to comment on Twitter @davidmacd

Author information:

David MacDonald is a veteran WCAG member, co-editor of Using WAI ARIA in HTML5 and HTML5 Accessibility Task Force Member. Opinions are my own.