How to make footnotes accessible in an web page?

Question

In PDF documents, footnotes are sometimes placed at the end of each page to clarify certain terms or add additional information.

For example:

I wish to create an HTML web page with the equivalence of footnotes.

The page must meet the accessibility guidelines under Web Content Accessibility Guidelines (WCAG) 2.0, Level AA. The web page must also be in HTML4.

My first thought is to create footnotes like the References section on Wikipedia. However, my webpage could potentially be very long, and I fear that doing so may disorient people and cause them to lose track of what they were reading if they need to scroll all the way down and then back up. Thus, this would not be accessible. (Please correct me if I'm wrong.)

Javascript is obviously a no-go since some users may chose to disable it, so relying on it will not be accessible.

I considered opening a new window with the additional information provided. However, opening a new window opens a whole new can of worms in regards to accessibility as well, so I would prefer to avoid it if possible.

I am aware that there is a <cite> tag, but from my understanding, this tag is to cite references, and would not be appropriate if my purpose is to provide additional information. (Again, please correct me if I'm wrong.)

So my question is, what would be the best way to add to my web page, something equivalent to footnotes on PDF documents - provided that my web page must be accessible?

http://www.sitepoint.com/accessible-footnotes-css/ might be able to give some inspiration. Some additional JS to show the footnote content when hovering the footnote anchor in the main text, same as Wikipedia does it, might _improve_ accessibility; however without JS that should still work well enough with the back-links provided. — CBroe, Jul 06 '15 at 20:02

Andie2302 · Accepted Answer · 2015-12-19T01:12:19.677

I would do something like this:

The first link brings the reader down to the footnote, the footnote link back to the text-position.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <title>Title</title> 
        <style type="text/css">
            .up
            {
                vertical-align: super;
            }
        </style> 
    </head>
    <body>
        <div>
            Lorem ipsum dolor sit <a href="#note1" id="number1">amet<span class="up">1</span></a>, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. 
        </div>
        <div>
            <div><a href="#number1" id="note1">1 Some more info</a></div>
        </div>
    </body>
</html>

rsduhamel · Answer 2 · 2023-03-03T20:05:32.383

If you don't mind using PHP, here are two functions that work together to create multiple footnotes. These do about what Andie2302 suggests but do most of the work for you.

You can hover over the footnote number to pop up a tooltip with the footnote text. You can click the footnote to jump to the original reference.

To create a footnote, insert the following where you want the original reference:

<?php footnote("Your footnote text") ?>

Put the following at the bottom of the page (before the closing body tag):

<?php PrintFootnotes(); ?>

Here are the functions. Put this at the top of your document:

<?php
function footnote($footnote){
  global $Footnotes, $FootnoteCount;
  $FootnoteCount++;
  $Footnotes[$FootnoteCount] = "$footnote";
  print "<a name='$FootnoteCount' title=\"$footnote\" style='font-size: smaller;'><sup>$FootnoteCount</sup></a>";
}

function PrintFootnotes(){
  global $Footnotes, $FootnoteCount;
  print "&mdash;&mdash;&mdash;&mdash;&mdash;&mdash;&mdash;&mdash;&mdash;<br>";
  print "<table>";
  for($i = 1;$i < $FootnoteCount + 1;$i++){
    print "<tr><td style='vertical-align: top; font-size: smaller;'><sup>$i</sup></td><td><a href='#$i' style='color: black;
text-decoration: none; font-size: smaller;'>$Footnotes[$i]</a></td></tr>";
  }
  print "</table>";
}
?>

Your page name extension must be .php, not .html (the server will render the HTML code normally). You can use .phtml if your server supports it. Otherwise, all you have to do is add the functions and the other code as explained above.

For details on how the functions work, go to:

https://vocademy.net/textbooks/WebDatabase/Footnotes/PageSetup.php?CourseDirectory=WebDatabase&Page=3&FileName=PHPFootnotes

These functions use about the minimum code required to make them work. You may want to add more formatting, etc. For example, you may want to add brackets around your reference numbers. Modify the print line in the first footnote function as follows to do that:

  print "<a name='$FootnoteCount' title=\"$footnote\" style='font-size: smaller;'><sup>[$FootnoteCount]</sup></a>";

How to make footnotes accessible in an web page?

2 Answers2

Linked