gpt4 book ai didi

html - 如何格式化 HTML5 中的
元素以向辅助设备用户提供有意义的见解?

转载 作者:太空宇宙 更新时间:2023-11-04 13:47:47 27 4
gpt4 key购买 nike

最好的方法是让屏幕阅读器类型的辅助设备以有见地的方式宣布部分内容?

理想情况下,而不是将这份工作传给 child <h1> tag 有没有办法标记实际的 <section>可以达到这个目的的标签?

其中 <article>被分解成<section>我的想法是<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>让辅助设备能够从 <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 中的任何一个都是不错的选择,还是有更好的选择?

最佳答案

如果我理解您的要求,您应该将 role="region"添加到 section 元素中,如下所示:

<section role="region">

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

如果希望标题在屏幕上播报,可以在section元素中添加aria-labelledby属性,并将其与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/

关于html - 如何格式化 HTML5 中的 <section> 元素以向辅助设备用户提供有意义的见解?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16489408/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com