可访问性的 HTML 文档标记答案

【问题标题】：HTML Document markup for accessibility可访问性的 HTML 文档标记
【发布时间】：2011-01-25 16:48:43
【问题描述】：

我想知道构建类似文档的 html 页面的正确方法。很明显，页面的标题应该标记为<h1>，章节标题标记为<h2>。

至于页脚，我现在有：

<div id="footer">Footer content</div>

这将显示在文档的每一页中。我意识到屏幕阅读器在阅读页脚内容时不会通知用户。我觉得用户应该可以选择跳过阅读页脚内容。

是否有必要让屏幕阅读器宣布它将阅读页脚内容，是否有适当的方法这样做？

谢谢！

【问题讨论】：

您是否尝试创建ARIA-accessible 标记？
是的，我知道我可以使用 role="contentinfo" 但它可能不是最佳选择。你有什么想法吗？

标签： html accessibility usability documents screen-readers

【解决方案1】：

允许屏幕阅读器跳过您网站的重复部分的一种常见方法是在您要跳过的元素之后的某个位置添加隐藏的锚点。

例如，在我们的一个网站上，我们这样做是为了允许跳过我们的导航栏。

<div id="navbar">
  <a title="Skip Navigation" href="#skipnav"></a>
  <a href="/"><img id="home" src="transparent.gif" alt="Home" /></a>
  ...
</div>
<a id="skipnav"></a>

可以使用键盘选择“跳过导航”a，屏幕阅读器将显示“跳过导航”。然后，用户可以“单击”它以稍后跳转到该页面。在这种情况下，就在导航之后。

【讨论】：

请注意，虽然这个特定示例可能适用于屏幕阅读器用户，但它可能会使 sighted 键盘用户感到困惑：当他们使用选项卡转到第一个或第二个链接时，焦点似乎是'视觉上消失。您可以通过包含诸如“跳过导航”之类的文本的常规链接来避免这种情况（因此不要使用透明图像或空标签），然后在未聚焦时使用 CSS 将其隐藏（例如负文本缩进） , 但允许它在 :focus 上正常可见。

【解决方案2】：

你会用html5吗？如果是这样，它包含一个<footer> 标记。

【讨论】：

是的，这是一个不错的选择，但并不是所有的屏幕阅读器都可以阅读 html5 标记。不过有个问题，对于不支持 html5 标签的浏览器，它们会被渲染为
s 吗？
不，但是如果你准备使用一些 Javascript，有一种方法可以解决这个问题。这里有两篇关于它的好文章net.tutsplus.com/tutorials/html-css-techniques/…ejohn.org/blog/html5-shiv 如果你不能选择 Javascript，那么我不知道如何解决你的问题。

【解决方案3】：

我是屏幕阅读器用户，h1 和 h2 标题可以正常工作。没有什么好方法可以让屏幕阅读器跳过我知道的某些文本，这些文本适用于所有屏幕阅读器和浏览器。假设您的内容类似于以下内容

<h1>title</h1>
<h2>section1</h2>
section content
<div id="footer">Footer content</div>
<h2>section2</h2>
section 2 content
<div id="footer">Footer content</div>

屏幕阅读器用户应该能够在第一次听到页脚后发现他们再次点击了页脚。然后，他们可以使用所有现代屏幕阅读器提供的快速导航键跳到下一个标题，从而不再听页脚。

【讨论】：

感谢 Jared，这真的很有帮助。那么您是否建议应该有另一个标题（如
）来标记页脚区域的开始？

）来标记页脚区域的开始？