0

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

例如:

PDF 文档中的脚注示例

我希望创建一个与脚注等效的 HTML 网页。

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

我的第一个想法是创建脚注,例如 Wikipedia 上的参考部分。但是,我的网页可能会很长,我担心如果他们需要一直向下滚动然后返回,这样做可能会使人们迷失方向并导致他们忘记正在阅读的内容。因此,这将无法访问。(如果我错了,请纠正我。)

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

我考虑用提供的附加信息打开一个新窗口。但是,打开一个新窗口也会在可访问性方面打开一个全新的蠕虫罐,所以我宁愿尽可能避免它。

我知道有一个<cite>标签,但据我了解,这个标签是为了引用参考资料,如果我的目的是提供更多信息,则不合适。(再次,如果我错了,请纠正我。)

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

4

1 回答 1

2

我会做这样的事情:

第一个链接将读者带到脚注,脚注链接回到文本位置。

<!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>
于 2015-07-06T20:22:50.773 回答