How to make footnotes accessible in an web page?

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?

Solution

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>