Question

我正在尝试为我的网页应用更好的语义和可访问性。

我最近为Firefox安装了Fangs附加组件，以便在屏幕阅读器中查看它们的外观。我担心我的侧边栏和页脚信息如何出现在我最后一个内容标题下面。

问题＃1

我希望能够通过使用标题标记（<h1>，<h2>等）来分解它，以指定“补充工具栏”和“页脚”部分。 我不确定这是否正确使用标头标记。虽然这些部分在技术上是内容的，但在与文章标题相同的层次结构级别上看它们感觉有点奇怪。

问题＃2

我还想保留这些标题标签，以识别布局结构元素不可见但仍然可供需要它的人使用。使用“visibility：hidden”会留下不受欢迎的占位符。使用“display：none”似乎产生了所需的效果，但我看过帖子表明它可能无法在实际的屏幕阅读器中使用。我现在很想使用“position：absolute”和负面的“text-indent”技巧来打破正常流程中的元素并将其推离屏幕。

Answer 1

我见过许多使用<h3>标记的网站在侧边栏和页脚中使用。所以，你也可以遵循相同的。 <h1>和<h2>标记通常仅在网页中使用一次。标题为<h1>，标语为<h2>。

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

Answer 2

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

一些资源：

野外的一些例子：

w3.org/WAI / （h3.no-display）

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;

Answer 3

您可以使用hr元素分隔各个部分，例如：

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

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

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

3 个答案: