0

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

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

问题 #1

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

问题 #2

我还想保留这些用于标识布局结构元素的标题标签不可见，但仍然可供需要它的人使用。使用“可见性：隐藏”会留下不需要的占位符。使用“显示：无”似乎可以产生预期的效果，但我看到一些帖子表明它可能不适用于实际的屏幕阅读器。我现在很想使用“位置：绝对”和否定的“文本缩进”技巧来打破元素的正常流程并将其推到屏幕外。

4

3 回答 3

1

我已经看到许多网站使用<h3>在侧边栏和页脚中使用的标签。因此，您也可以遵循相同的方法。和标签通常在网页中只使用一次<h1>。标题和标语。<h2><h1><h2>

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

于 2009-02-21T14:14:38.403 回答
1

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

一些资源：

野外的一些例子：

w3.org/WAI/ (h3.no-display)

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

diveintoaccessibility.org (h2.invisibletitle)

display: none;

标准-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-22T17:01:43.780 回答
0

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

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

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

于 2009-02-22T17:07:00.133 回答