用于标识布局结构元素的标头标签？

我最近安装了Firefox的Fangs插件，看看它们在屏幕阅读器中的样子。我担心所有的侧边栏和页脚信息如何显示在我最后一个内容标题下方。

问题＃1

我想能够通过使用标题标记（<h1>，<h2>等）来指定“侧栏”和“页脚”部分打破它。 我不确定这是否正确使用标题标记。虽然这些章节在技术上是内容，但是在与文章标题相同的层级上看到它们感觉有点奇怪。

问题＃2

我也想保持这些标题标签识别布局结构元素看不见，但仍提供给那些需要它。使用“visibility：hidden”会留下不希望的占位符。使用“display：none”可以产生所需的效果，但是我看到的帖子暗示它可能无法在实际的屏幕阅读器中使用。我现在试图使用“position：absolute”和负面的“text-indent”技巧来将元素从正常流程中分离出来并将其推出屏幕。

来源

2009-02-21 snippid

我见过很多使用<h3>标记的网站，它们被用于侧栏和页脚。所以，你也可以按照相同的方式。 <h1>和<h2>标签通常只在网页中使用一次。标题为<h1>，标语为<h2>。

那么..对于第二个问题，您可以使用JavaScript切换display属性。

来源

2009-02-21 14:14:38 apnerve

这些是我的笔记到目前为止。

一些资源：

在野外的一些例子：

w3.org/WAI/（h3.no显示器）

position: absolute; 
left: -999px; 
width: 990px;

diveintoaccessibility.org（H2。invisibletitle）

display: none;

standards-schmandards.com（H1）

position: absolute; 
left: -1000em; 
margin-left: -1000em; 
display: block; 
height: 0; 
overflow: hidden;

yahoo.com（h3.a11y）

position: absolute; 
left: -5000px; 
width: 100px;

my.yahoo.com （h3.a11y）

position: absolute; 
height: 0; 
overflow: hidden;

gmail.com（h2.u4w5cc）

position: absolute; 
height: 9px; 
left: 0; 
top: -10000px;

target.com（h1.offscreen）

position: absolute; 
left: -99em; 
width: 90em; 
overflow: hidden;

来源

2009-02-22 17:01:43 snippid

您可以使用hr元素的部分分开，例如：

<div id="header"></div> 
<hr /> 
<div id="content"></div> 
<hr /> 
<div id="sidebar"></div> 
<hr /> 
<div id="footer"></div>

此外，您可以使用hr元素上的title属性来描述以下部分。但我不知道这是如何得到支持的。

来源

2009-02-22 17:07:00 Gumbo

用于标识布局结构元素的标头标签？

回答

相关问题