Accessible PDF footnotes and endnotes

Using JavaScript to enhance accessibility

Footnotes and endnotes in PDFs, whether created in Microsoft Word or Adobe InDesign, are not very accessible out-of-the-box. They can be made more accessible by creating links from each note reference to its respective note and back again. However, as will be seen, this approach is not ideal, for a number of reasons. Fortunately, there is a better way, using some simple JavaScript to embed each note in a pop-up. 

Defining the problem

From an accessibility point of view, the most serious problem with footnotes is reading order (so too with endnotes, but the following will focus on footnotes only—endnotes will be addressed later).

The problem is that a footnote can be separated from its reference (for example, a superscript “1”) by several paragraphs of text. The assumption, of course, is that the reader can simply glance down a page from a footnote reference  to the footnote itself and then back again.

Screen reader and screen magnifier users

However, for many screen reader users, glancing down the page and back will be impossible (obviously so if you can’t see the page at all). It may also be difficult for screen magnifier users, as the distance between reference and note can be considerable. The optimal position in the reading order for footnotes for such readers is likely to be immediately after the footnote reference, often in the middle of a paragraph.

Reflowed documents

By contrast, if you are viewing on a small screen a document that has, for example, been typeset in columns, in order to avoid either tiny font sizes or horizontal scrolling, you are likely to want to reflow the PDF into a single column (Cmd/Ctrl + 4 toggles reflow on and off).

By convention, footnotes in reflowed content should appear in the reading order immediately after the paragraph or other content block from which they are referenced. Fortunately, as will be seen, it is possible to meet both of these reading order requirements simultaneously in a PDF. 

End-user choice

A second problem is that, as footnotes are not part of the primary narrative, being forced to read them can be seriously distracting. Document authors (and reading systems) should give readers the option to read notes or to skip over them entirely.

The problems of the simple linking approach

In Microsoft Word or InDesign it is possible to create links from references to footnotes and back again. However, it is fair to say that such links work better in some screen readers than others: in some, such links are virtually impossible to use. In addition, once the reader has reached the bottom of the page, the contents of any note located in the footer will be read out by screen readers, whether required or not.

Multiple references to a single footnote

A third problem that can only be solved using the scripting method below is that of multiple references to a single note. In the simple linking approach, footnotes will have to be duplicated in full each time they are referenced, leading to potentially serious redundancy problems (back links from a single footnote to multiple references are unworkable—trust me).

The scripting method

Step 1: fixing the reflow reading order

First we need to set the reading order for reflow view users. To do so, in the Acrobat Pro Order Panel, move the footnote so that it appears after the paragraph (or other content block) from which it is referenced. This will ensure the footnote appears in the right place in the reading order both in reflow view and for assistive technologies that don’t read PDF tags.

Step 2: creating a JavaScript pop-up

Next we need to create the pop-up. To do so:

• Click the Link icon to activate the link tool (alternatively, in Acrobat 11 select Tools, Content Editing, Add or Edit Link, or in Acrobat DC it’s (Tools, Edit PDF, Link), Add or edit links, Add/Edit Web or Document Link) 
• Drag a box around the note reference
• From the resulting Create Link dialogue box, select Custom link

• Click the Next button
• In the Link Properties dialogue box select Actions
• From the Select Action dropdown, select Run a JavaScript
• Click the Add button 
• In the JavaScript Editor dialogue box, paste or type the following script:
  app.alert({cMsg:"", cTitle:"", nIcon:"3"})

Step 3: adding the content

• The footnote text should be placed inside the double quotes after cMsg
• A short description, such as “Footnote 1” or “Endnote 1”, should be placed inside the double quotes after cTitle—this will then appear in the title bar of the pop-up
• The number “3” in double quotes following nIcon generates an Information icon in the pop-up (except on Macs which just display an Acrobat icon)

Step 4: creating Link and Link-OBJR tags

When using the Custom link method, a <Link> tag and a Link-OBJR tag will have to be added manually for each link. To do so:

Creating a Link tag

• In the tag tree, right-click the tag containing the footnote reference and select New Tag
• In the Type field of the New Tag dialogue box, type “Link”, or select Link from the dropdown
• Nest the tag containing the footnote text and the tag containing the footnote reference inside (as a child of) the newly created <Link> tag

Creating a Link-OBJR tag

• Select the <Link> tag again, right-click and select Find
• From the Find dropdown select Unmarked links
• Click the Find button
• If the correct link is highlighted in the document, click Tag Element. A Find completed alert box will appear
• The Link–OBJR tag will be created and the link will now be screen reader accessible

For more on the above, see our Creating accessible links in PDFs blog post.

Step 5: adding alt text

• Lastly, add alternate text of, for example, “Footnote 1” to the <Link> tag (right-click the <Link> tag, Properties, Alternative Text)

The result

Sighted readers will typically use footnotes in the usual way, although they could, of course, opt to trigger the pop-ups.

Readers who choose to reflow the document, or those using assistive technologies that don’t take their reading order from a PDF’s tags will find each footnote located immediately after the paragraph or other content block from which it is referenced.

A screen reader user, when encountering a footnote link, will hear something like: “Footnote 1, link”. The reader can then choose to ignore the footnote or press enter or return to trigger the pop-up and hear the content, followed by a prompt to press the space bar to close the pop-up. Doing so will take you directly back to the reference, ready to continue reading from where you left off.

Similarly, a screen magnifier user can click the reference to trigger the pop-up, and hence avoid having to navigate to the bottom of the page and back. 

Endnotes

Pop-ups for endnotes can be created in the same way as for footnotes, except that in the third bullet point in step 4 above, only the reference need be nested inside the <Link> tag.

This is because the endnotes don’t have to be hidden in the same way as footnotes do: being located at the end of the document or at the end of each section of a document, the reader should have little difficulty skipping over them if required.

Conclusion

This method makes footnotes and endnotes significantly more accessible than any other. It solves the reading order problem, makes reading notes entirely optional, and is by far the most efficient way of referencing the same note from multiple locations within a document.