HTML 无障碍

无障碍 Accessibility

无障碍 WAI 的意思是所有人都应该能够访问互联网的内容。

无障碍帮助：

• 视觉和听觉有问题的人
• 认知和神经有问题的人
• 物理和讲话有问题的人

W3C 提出了一系列支持 WAI （Web Accessibility）的资源，这后来成为了 Web 标准。

无障碍通常包含以下软件：

• 屏幕阅读器
• 语音识别设备
• 字幕和文本

WAI 的目标是建立 ARIA（Accessible Rich Internet Application）。

替代图像的文本 Text Alternative

alt 属性中的文本来描述图片内容，作为备用文字。

alt 属性可以帮助用户在图片加载失败或者不可见的情况下理解图片内容， 搜索引擎也通过它来理解图片内容，并将其加入到搜索结果中。

语义化 Semantic

语义化 的意思是，标签名能准确地表达它所含内容的信息类型。

在使用中，相同级别（或者更高级别）的标题标签用于开启新的章节，低一级别的标题标签用于开启上一级标题标签的子小节。

使用 main 等结构元素

main 标签用于呈现网页的主体内容，且每个页面应只有一个。 这是为了围绕与页面中心主题相关的信息， 而不应包含如导航连接、网页横幅等需要在多个页面中重复出现的内容。

article 是一个分段标签，用于呈现独立及完整的内容。 这个标签适用于博客、论坛帖子或者新闻文章。

section 元素也是 HTML5 引入的新元素，其语义与 article略有不同。 article 用于独立且完整的内容，而 section 用于对与主题相关的内容进行分组。 它们可以根据需要来嵌套使用。 举个例子：如果一本书是一个 article的话，那么每个章节就是 section。 当内容组之间没有联系时，可以使用 div。

header 应当在 HTML 文档的 body 标签内使用。 它与包含页面标题、元信息的 head 标签不同。 它可以为父级标签呈现简介信息或者导航链接，适用于那些在多个页面顶部重复出现的内容。

nav它可以使屏幕阅读器快速识别出页面中的导航信息。 它用于呈现页面中的主导航链接。

footer可以让辅助工具快速定位到它。 它位于页面底部，用于呈现版权信息或者相关文档链接。

图片音频视频

音频 Audio

audio 标签用于呈现音频内容或音频流，音频内容也需要备用文本，供聋哑人或听力困难的人使用。

audio 标签支持 controls 属性， 用于显示浏览器默认播放、停止和其他控制，以及支持键盘功能。 这是一个布尔值属性，意味着它不需要一个值，它在标签上存在即开启设置。

<audio id="meowClip" controls>
  <source src="audio/meow.mp3" type="audio/mpeg">
  <source src="audio/meow.ogg" type="audio/ogg">
</audio>

图片 Image

figure 标签以及与之相关的 figcaption 标签。 它们一起用于展示可视化信息（如：图片、图表）及其标题。 这样通过语义化对内容进行分组并配以用于解释 figure 的文字，可以极大地提升内容的可访问性。

<figure>
  <img src="roundhouseDestruction.jpeg" alt="Photo of Camper Cat executing a roundhouse kick">
  <br>
  <figcaption>
    Master Camper Cat demonstrates proper form of a roundhouse kick.
  </figcaption>
</figure>

视频 Video

video 标签用于呈现视频内容或视频流，视频内容也需要备用文本，供盲人或视力困难的人使用。

video 标签支持 controls 属性， 用于显示浏览器默认播放、停止和其他控制，以及支持键盘功能。 这是一个布尔值属性，意味着它不需要一个值，它在标签上存在即开启设置。

<video id="meowClip" controls>
  <source src="video/meow.mp4" type="video/">
  <source src="audio/meow.wbev" type="video/">
</video>

---

accesskey 属性在链接之间快速导航

HTML 提供 accesskey 属性，用于指定激活元素或者使元素获得焦点的快捷键。 添加 accesskey 属性可以让使用键盘的用户更高效率地导航。

<a href="" accesskey="g"></a>

---

tabindex 将键盘焦点添加到元素中

HTML 的 tabindex 属性有三种与标签焦点相关的功能。 当它在一个元素上时，表示该元素可以获得焦点。 tabindex 的值（可以是零、负整数或正整数）定义了行为。当用户使用键盘浏览页面时，诸如链接、表单控件等元素可以自动获得焦点。 它们获得焦点的顺序与它们出现在 HTML 文档流中的顺序一致。 通过将其他标签（如 div、span、p 等）的 tabindex 属性值设为 0 来让它们实现类似的效果。

tabindex 属性值为负整数（通常为 -1）的标签也是可以获得焦点的，只是不可以通过键盘操作（如 tab 键）来获得焦点。 这种方法通常用于以编程的方式使内容获得焦点（如：将焦点设置到用 div实现的弹出框上）的场景。

<p tabindex="0">
  something
</p>

tabindex 属性还可以指定元素的 tab 键焦点顺序， 将它的值设置为大于等于 1 的整数，就可以实现这个功能。

给元素设置 tabindex="1"，键盘将首先把焦点放在这个元素上。 然后它按照指定的 tabindex 值（2、3 等等）顺序循环，再移动到默认值和 tabindex="0" 项目。

需要注意的是，使用这种方式设置 tab 键焦点顺序会覆盖默认顺序，其中默认顺序为标签在文档流中出现的顺序。 这可能会让那些希望从页面顶部开始导航的用户感到困惑。 使用 tabindex 在某些情况下是必要的，但在使用时要充分考虑到页面的可访问性。