Cri*_*ith 2 html5 accessibility screen-readers wai-aria
什么是最好的方法是让屏幕阅读器类型的辅助设备以富有洞察力的方式宣布部分？
理想情况下,<h1>有没有一种方法可以标记<section>可以实现此目的的实际标记,而不是将此作业传递给子标记？
如果a <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中的任何一个都是不错的选择,还是有更好的选择？
如果我理解你的内容,你应该在section元素中添加role ="region",如下所示:
<section role="region">
这将告诉屏幕阅读器该部分确实是一个部分,并将向用户提供正确的可访问性信息.此角色是WAI-ARIA角色.理想情况下,它不需要,因为section元素隐含了语义,但屏幕阅读器中的ARIA比HTML5元素有更好的支持,因此这将填补空白,直到支持广泛存在.
您可以将该aria-labelledby属性添加到section元素并将其与h*的ID相关联,如果您希望屏幕阅读器在宣布该部分时宣布标题,例如Jaws中的"示例1区域".
对于这些章节中的每个标题,将它们包含在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/