如何使脚注在网页中可访问？

Question

在 PDF 文档中，脚注有时会放在每一页的末尾，以阐明某些术语或添加其他信息。

For example:

我想创建一个 HTML 带有脚注等价物的网页。

该页面必须符合 Web 内容可访问性指南 (WCAG) 2.0 AA 级下的可访问性指南。网页也必须在HTML4.

我的第一个想法是创建脚注，例如维基百科上的 参考文献 部分。但是，我的网页可能会很长，而且我担心这样做可能会使人们迷失方向，并导致他们在需要一直向下滚动然后再向上滚动时忘记正在阅读的内容。因此，这将无法访问。（如有错误请指正）

Javascript 显然是不行的，因为有些用户可能会选择禁用它，因此将无法访问它。

我考虑过使用提供的附加信息打开一个新的 window。然而，打开一个新的 window 也会在可访问性方面打开一个全新的蠕虫罐头，所以我宁愿尽可能避免它。

我知道有一个 <cite> 标签，但根据我的理解，这个标签是用来引用参考文献的，如果我的目的是提供额外的信息，则不合适。（再一次，如果我错了，请纠正我。）

所以我的问题是，在我的网页上添加相当于 PDF 文档脚注的最佳方式是什么 - 前提是我的网页必须可访问？

Answer 1

我会这样做：

第一个 link 将 reader 带到脚注，脚注 link 回到文本位置。

<!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>

如何使脚注在网页中可访问？

How to make footnotes accessible in an web page?

html

accessibility

html4

wcag

wai-aria