2

最好的方法是让屏幕阅读器类型的辅助设备以有洞察力的方式宣布部分？

理想情况下，与其将这项工作传递给子<h1>标签，有没有办法标记<section>可以用于此目的的实际标签？

将 an<article>分解为<section>s 的想法是<section>s 不适合联合，但它们仍应在文档结构中具有自己的固有身份。作为 HTML 作者，我们如何记录这一点？

示例：给定这棵树：

Article: A review of the iPad
section: brief preamble, statement of goals
section: aesthetics
section: performance
section: target market
section: wrap up

我们如何标记<section>s 以使辅助设备能够从<section>标签中提取部分焦点？

这是一个 HTML 示例：

<!DOCTYPE html>
<html>
<head> <!-- meta data and css --> </head>
<body>
    <article>
        <h1>An article about markup!</h1>
        <section  id="examele_1">
            <h1>Example 1</h1>
        </section>
        <section class="example 2">
            <h1>Example 2</h1>
        </section>
        <section data-subject="Example 3">
            <h1>Example 3</h1>
        </section>
    </article>
</body>
</html>

那么：示例 1 到 3 中的任何一个都是不错的选择，还是有更好的选择？

4

3 回答 3

6

如果我了解您的需求，您应该将 role="region" 添加到部分元素，如下所示：

<section role="region">

这将告诉屏幕阅读器该部分确实是一个部分，并将为用户提供正确的可访问性信息。此角色是 WAI-ARIA 角色。理想情况下不需要它，因为 section 元素具有隐含的语义，但屏幕阅读器中对 ARIA 的支持比对 HTML5 元素的支持更好，因此这会填补空白，直到广泛支持。

如果您希望屏幕阅读器在宣布部分时宣布标题，例如 Jaws 中的“示例 1 区域”，您可以将aria-labelledby属性添加到元素并将其与 h* 的 ID 关联。section

对于部分中的每个标题，将它们也包含在一个header元素中可能是个好主意，就像这样，虽然不是严格需要（我经常只为主要文章标题这样做）

<article role="article" aria-labelledby="title">
    <header>
        <h1 id="title">An article about markup!</h1>
   </header>
   <section role="region" aria-labelledby="eg1">
        <header>
             <h1 id="eg1">Example 1</h1>
        </header>
   </section>
   <section role="region" aria-labelledby="eg2">
        <header>
            <h1 id="eg2">Example 2</h1>
        </header>
    </section>
    <section role="region" aria-labelledby="eg3">
         <header>
            <h1 id="eg3">Example 3</h1>
         </header>
    </section>

欲了解更多信息，请参阅http://blog.paciellogroup.com/2011/03/html5-accessibility-chops-section-elements/，http://blog.paciellogroup.com/2010/10/using-wai-aria-landmark -roles/和http://blog.paciellogroup.com/2013/10/using-html5-section-element/

于 2013-05-10T19:58:20.650 回答
4

除了 dstorey 的优秀建议之外，我想说你不应该<h1>在每个部分级别使用。

虽然之前推荐过，但在 HTML5 中该推荐已更改，现在建议使用<h?>适用于整个文档的级别。即，如果顶级文章使用 an<h1>则各部分应使用<h2>，就像您在 HTML 4 中所做的一样。

原因是使用<h1>throughout依赖于HTML5大纲算法的实现。不幸的是，浏览器似乎不愿意实现该算法，而屏幕阅读器要么不愿意，要么无法正确地做到这一点。因此，辅助工具链中的任何地方都没有正确处理大纲，辅助设备用户将无法正确理解标题级别。

于 2013-05-10T21:01:29.840 回答
0

通过 CSS3 可能的样式解决方案如下所示；您可以根据需要对其进行修改。为方便起见，这是 jsfiddle 的链接：http: //jsfiddle.net/M6mpt/

HTML

<!DOCTYPE html>
<body>
<article class="article1">
<h1>An article about markup!</h1>
<section  class="section1">
<h1>Example 1</h1>
</section>
<section class="section2">
<h1>Example 2</h1>
</section>
<section class="section3">
 <h1>Example 3</h1>
 </section>
 </article>
 </body>

CSS3

.article1 {
    font-family: Arial;
}

.article1 h1 {
    text-transform:uppercase;
    font-size:1.2em;
}

.section1 h1 {
    font-size:1.1em;
    color:#606060;
}

.section2 h1 {
    color:#909090;
}

.section3 h1 {
    color:#a0a0a0;
    font-size:0.9em;
}
于 2013-05-10T19:54:51.820 回答