如何在网页中访问脚注?

时间:2015-07-06 19:55:43

标签: html accessibility wai-aria html4 wcag

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

  

例如:

     

Example of footnotes in a PDF document

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

该页面必须符合 Web内容辅助功能指南(WCAG)2.0 ,AA级下的辅助功能指南。网页也必须位于 HTML4

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

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

我考虑使用提供的其他信息打开一个新窗口。但是,打开一个新窗口也会在可访问性方面打开一整套新蠕虫,所以如果可能的话,我宁愿避免使用它。

我知道有<cite>标记,但根据我的理解,此标记引用引用,如果我的目的是提供其他信息则不合适。 (如果我错了,请再次纠正我。)

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

1 个答案:

答案 0 :(得分: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>