标签设计

使用标题显示内容的层次关系

标题标签（包括 h1 到 h6）有很高的使用率，它们用于描述内容的主题。在屏幕阅读器中，用户为了快速了解页面纲要，可以设置让阅读器只朗读页面标题。这意味着我们不应仅仅为了设置不同字号而使用标题，而应让标签本身具有语义化和实质性的含义，同时不同标题之间也应关联（具有层级关系）。

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

如果你正在撰写带有导言、主体和结论的论文，在你的概要中把结论作为主体的一部分是没有意义的。结论应该是单独的一个部分。类似地，页面中的标题标签也应该是有序的，并且能表明内容的层次关系。

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

例如，一个页面带有一个 h2 元素，后面跟着几个用 h4 元素标记的小节，这会使屏幕阅读器用户感到困惑。尽管在浏览器所显示的页面中，错误地使用这六个标题标签依然可以让它们在视觉效果上看起来很合理。但此时，我们应该按照层级正确地使用标签，然后用 CSS 来调整样式。

最后一点，每个页面应只有一个 h1 标签，用来概括说明页面的主题。另外，这六个标题标签可以让搜索引擎获取页面的大纲。

使用 main 元素包裹主题内容

HTML5 引入了一些新元素，给予开发者更多的选择，也包含辅助功能。 HTML5 引入了诸如 main、header、footer、nav、article、section 等大量新标签。

默认情况下，浏览器呈现这些元素的方式类似于普通的 div。但是，在适当的地方使用它们会让标记文本具有更多的含义。仅标签名称就可以表示它所包含的信息类型，这给内容增加了语义含义。辅助技术可以获取这种信息，为用户提供更好的页面摘要或导航选项。

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

main 标签也有一个内嵌的特性，以便辅助技术快速定位到页面的主体。如果你在页面顶部看到过“跳转到主要内容”链接，那么使用 main 标签会自动让辅助设备具有这个跳转的功能。

使用 article 元素包裹文章内容

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

确定内容是否可以单独作为一部分，通常是个人的判断，但你可以使用几个简单的测试。如果删除了所有周围的上下文，这个内容是否仍然有意义？类似地，对于文本内容，可否把这些内容放到一个 RSS 推送里？

请牢记，辅助设备依赖组织良好、语义化的标签来获取页面中的信息。

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

<div> - 一组内容 
<section> - 几组相关的内容 
<article> - 几组独立的内容

header 也是一个具有语义化的、可以提升页面可访问性的 HTML5 标签。它可以为父级标签呈现简介信息或者导航链接，适用于那些在多个页面顶部重复出现的内容。

与 main 类似，header 的语义化特性也可以让辅助工具快速定位到它的内容。

注意： header 应当在 HTML 文档的 body 标签内使用。它与包含页面标题、元信息的 head 标签不同。

使用 nav 元素使屏幕阅读器更容易导航

nav 也是一个具有语义化特性的 HTML5 标签，它可以使屏幕阅读器快速识别出页面中的导航信息。它用于呈现页面中的主导航链接。

对于在多个页面底部出现的站点链接，我们不需要使用 nav 标签。我们将会在下个挑战中学习 footer 标签的使用。

与 header 和 nav 类似，footer 元素也具有语义化的特性，可以让辅助工具快速定位到它。它位于页面底部，用于呈现版权信息或者相关文档链接。

使用 audio 元素提高音频内容的可访问性

HTML5 的 audio 标签用于呈现音频内容或音频流，它也具有语义化特性。音频内容也需要备用文本，供聋哑人或听力困难的人使用。这可以通过页面上的文本或与字幕链接来实现。

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

举个例子：

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

注意： 多媒体内容通常同时包含音频与视频部分，它需要同步的字幕，使视觉或听觉障碍用户可以获取它的内容。一般情况下，网页开发者不负责创建字幕或逐字稿，但是需要将它们添加到多媒体中。

使用 figure 元素提高图表的可访问性

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

对于图表之类的可视化数据，标题可以为屏幕阅读器用户提供简要的说明。但是这里有一个难点，如何为屏幕阅读器用户展示那些超出屏幕可视范围（使用 CSS）的表格所表现的图表数据。

举个例子，注意 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>

html figcaption标签用于定义 figure 元素的标题（caption）。”figcaption” 元素应该被置于 “figure” 元素的第一个或最后一个子元素的位置。

使用 label 元素提高表单的可访问性

合理地使用语义化的 HTML 标签和属性可以提升页面可访问性。在接下来的挑战中，你将会看到在表单中使用属性的场景。

label 标签的文本内容通常会是表单组件的名称或标签。这些文本表明了组件的意义，也提升了表单的可访问性。 label 标签的 for 属性将标签与表单组件绑定；同时，屏幕阅读器也会读取 for 属性的属性值。

在 HTML 基础章节中，我们已经学习使用了单选按钮标签。在那个挑战中，为了让标签可以在点击的时候也选中输入框，我们将单选按钮 input 标签嵌套在了 label 标签里面。在本节课程中，我们介绍了另外一种实现这个功能的方法，那就是使用 for 属性。

for 的属性值必须与表单组件的 id 属性值相同。举个例子：

<form>
  <label for="name">Name:</label>
  <input type="text" id="name" name="name">
</form>

将单选按钮包裹在 fieldset 元素中以获得更好的可访问性

接下来的表单主题是关于单选按钮的可访问性。在上一个挑战中，每个单选按钮都有一个包含 for 属性的 label 标签，这些属性值指向相关选项的 id。然而单选按钮通常成组出现，而且用户必须选择其中一项。

fieldset 标签包裹整组单选按钮，实现这个功能。它经常使用 legend 标签来提供分组的描述，以便屏幕阅读器用户会阅读 fieldset 元素中的每个选项。

当选项的含义很明确时，如“性别选择”，fieldset 与 legend 标签可以省略。这时，使用包含 for 属性的 label 标签就足够了。

举个例子：

<form>
  <fieldset>
    <legend>Choose one of these three items:</legend>
    <input id="one" type="radio" name="items" value="one">
    <label for="one">Choice One</label><br>
    <input id="two" type="radio" name="items" value="two">
    <label for="two">Choice Two</label><br>
    <input id="three" type="radio" name="items" value="three">
    <label for="three">Choice Three</label>
  </fieldset>
</form>

通过fieldset设置一个方框（也译作域），然后通过特定的标签legend域标题，设置一个标题，并对它们进行相应的样式定义即可实现这样效果。

HTML元素 fieldset方框 　　在字段集包含的文本和其它元素外面画一个方框。

　　fieldset元素用于对表单中的元素进行分组并在文档中区别标出文本。它与窗口框架的行为有些相似。fieldset在 Internet Explorer 4.0 及以上版本的HTML 和的脚本中可用。　　fieldset元素元素是块元素。并且需要关闭标签，即必须成对出现：<fieldset></fieldset>。

HTML元素 legend域标题 　　在 fieldSet 对象绘制的方框内插入一个标题。

　　legend元素必必位于fieldset内的第一个元素。在 Internet Explorer 4.0 及以上版本的 HTML 和脚本中可用。　　legend元素是块元素。并且需要关闭标签，即必须成对出现：<legend></legend>。

添加可访问的日期选择器

表单中经常出现 input 标签，它可以用来创建多种表单控件。它的 type 属性指定了所要创建的 input 标签类型。

在以前的挑战中，我们已经见过 text 与 submit 类型的 input 标签。 HTML5 规范添加了 date 类型来创建日期选择器。如果浏览器支持，在点击 input 标签时，日期选择器会显示出来，这让用户填写表单变得更加容易。

对于较老的浏览器，类型将默认为 text，这样它可以通过 label 或 placeholder 文本向用户显示预期的日期格式。

举个例子：

<label for="input1">Enter a date:</label>
<input type="date" id="input1" name="input1">

使用 HTML5 的 datetime 属性标准化时间

继续日期主题。 HTML5 还引入了 time 标签与 datetime 属性来标准化时间。 time 元素是一个行内元素，用于在一个页面上显示日期或时间。 datetime 属性包含的有效格式。辅助设备可以获取这个值。这个属性也有助于避免混乱，因为它规定了时间的标准化版本，甚至可以在文本中以非正式的方式或学术方式使用它。

举个例子：

<p>Master Camper Cat officiated the cage match between Goro and Scorpion <time datetime="2013-02-13">last Wednesday</time>, which ended in a draw.</p>

<sup>标签是上标标签，<sub>标签是下标标签

<p>The best day to host the vaunted Mortal Kombat tournament is <time datetime="2016-09-15">Thursday, September 15<sup>th</sup></time></p>

样式设计

使用自定义 CSS 让元素仅对屏幕阅读器可见

到目前为止，所有关于可访问性的挑战都没有使用 CSS。这是为了在介绍视觉设计方面之前强调使用逻辑结构和有语义意义的标签的重要性。

但如果我们想在页面中添加一些只对屏幕阅读器可见的内容，可以用 CSS 来实现。当信息为视觉格式（例如图表）时，但屏幕阅读器用户需要备用文稿（例如表格）来访问数据，在这种情况下，使用 CSS 将屏幕的只读元素放到浏览器窗口可视区域之外。

举个例子：

.sr-only {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  top: auto;
  overflow: hidden;
}

注意： 以下的 CSS 解决方案与上面的结果不同：

display: none; 或 visibility: hidden; 会把内容彻底隐藏起来，屏幕阅读器也无法获取这些内容。
如果把值设置为 0px，如 width: 0px; height: 0px;，意味着让元素脱离文档流，这样做同样也会让屏幕阅读器忽略此元素。

使用高对比度文本提高可读性

低对比度的前景色与背景色会使文本难以阅读。足够的对比度可以提高内容的可读性，但是怎样的对比度才算是“足够”的？

Web 内容无障碍指南（WCAG）建议正常文本的对比度至少为 4.5 : 1。对比度是通过比较两种颜色的相对亮度值来计算的。对比度的范围是从相同颜色的 1:1（无对比度）到白色与黑色的最高对比度 21:1。在线可用的对比检查工具很多，可以计算这个比率。

考虑色盲用户的需求设置合适的对比度

颜色是可视化设计的重要组成部分，但是使用颜色也引入了两个可访问性问题。首先，不能仅仅使用颜色作为传达重要信息的唯一方式，因为屏幕阅读器无法获取这些信息。其次，前景色与背景色需要有足够的对比度，这样色盲用户才可以区分它们。

在之前的挑战中，我们用文本备用方案解决了第一个问题。在上一个挑战中，我们使用对比度检测工具解决了第二个问题。 WCAG 建议为颜色及灰度组合使用 4.5:1 的对比度。

色盲用户无法将一些颜色与另一些颜色区分出来，这通常是因为色调，有时候是因为亮度。你可能还记得，对比度是用前景色与背景色的相对亮度计算的。

实践中，在对比度检测工具的帮助下，我们可以通过将较暗的颜色变暗、将较淡的颜色变淡的方法来使对比度达到 4.5:1。在色轮中，较暗的颜色通常是蓝色、紫色、洋红和红色，而较淡的颜色通常是橙色、黄色、绿色和蓝绿色。

考虑色盲用户的需求仔细选择传达信息的颜色

色盲的形式有很多种，它的表现可以从对特定波长光波的感知度较低，到完全无法看到颜色。最常见的形式是对绿色的低感知度。

例如，如果内容的前景色与背景色是两种相近的绿色，那么色盲用户可能会无法区分它们。色轮上距离较近的颜色，特别是相邻的颜色，看起来都会很难区分。在表示重要信息的时候应避免使用这类相近颜色的组合。

注意： 一些在线颜色选择器有色盲模拟功能，可以模拟颜色在不同形式的色盲中所呈现的效果。它们和在线对比度检查器一样，都是很好的工具。

属性设计

为视觉障碍用户添加替代图像的文本

在其他内容应该已经见到过 img 标签的 alt 属性了。 alt 属性中的文本来描述图片内容，作为备用文字。 alt 属性可以帮助用户在图片加载失败或者不可见的情况下理解图片内容，搜索引擎也通过它来理解图片内容，并将其加入到搜索结果中。例如：

<img src="importantLogo.jpeg" alt="Company logo">

视觉障碍用户无法通过视觉获取信息，而是通过屏幕阅读器将网页内容转换为音频以获取信息。他们无法通过直观的呈现理解信息。屏幕阅读器可以识别 alt 属性，朗读其中的内容，来告知用户图片包含的关键信息。

alt 文本可以为屏幕阅读器提供图片的描述信息，所以你应始终为图片添加 alt 属性。另外，根据最新的 HTML5 标准，为图片添加这个属性是必须的。

了解 Alt 文本留空的情景

在上一个内容中，我们了解到 img 标签必须有一个 alt 属性。但是，有时图像通过它们的描述文本被归类，或者只用于装饰。在这些情况下， alt 文本可能是多余的或没有必要的。

在图片已经有了文字说明，或者仅仅为了美化页面的情况下，img 仍然需要一个 alt 属性，但可以设置为空字符串。例如：

<img src="visualDecoration.jpeg" alt="">

比如，背景图片通常起装饰作用。但这些图片通常都是通过 CSS 规则而非 HTML 引入的，因此屏幕阅读器毋需读取（alt设置为空，当图片不能被识别时，图片也就不会随之显示）。

注意： 对于有标题的图片，依然需要添加 alt 文本，因为这样有助于搜索引擎记录图片内容。

为链接添加描述性的文本

屏幕阅读器用户可以选择其设备读取的内容的类型，包括表示“跳转到”（或“跳过”）的元素，跳转到主要内容，或者从标题中获取页面摘要。用户还可以选择只听取页面中的超链接内容。

屏幕阅读器通过阅读链接文本（即 a 标签的内容文本）来完成这个操作。如果我们只在链接中写上 “click here”（点击这里）或者 “read more”（阅读更多），显然帮助有限。相反地，应该在 a 标签中使用简洁的描述性语言来为用户提供更多的信息。

通过给元素添加 accesskey 属性来让用户可以在链接之间快速导航

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

HTML5 允许在任何标签上使用这个属性。该属性尤其适用于链接、按钮、表单组件等元素。

举个例子：

<button accesskey="b">Important Button</button>

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

HTML 的 tabindex 属性有三种与标签焦点相关的功能。当它在一个元素上时，表示该元素可以获得焦点。 tabindex 的值（可以是零、负整数或正整数）定义了行为。

当用户使用键盘浏览页面时，诸如链接、表单控件等元素可以自动获得焦点。它们获得焦点的顺序与它们出现在 HTML 文档流中的顺序一致。我们可以通过将其他标签（如 div、span、p 等）的 tabindex 属性值设为 0 来让它们实现类似的效果。比如：

<div tabindex="0">I need keyboard focus!</div>

按照不同的用户使用习惯，可以使用 tab 键来根据 tabindex 的定义来切换焦点

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

使用 tabindex 指定多个元素的键盘焦点顺序

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

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

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

举个例子：

<div tabindex="1">I get keyboard focus, and I get it first!</div>
<div tabindex="2">I get keyboard focus, and I get it second!</div>

参考文献

freecodecamp 应用无障碍教程
html中figcaption标签的作用原文链接：https://www.itcast.cn/news/20200909/17584245044.shtml
HTML fieldset和legend标签原文链接：http://t.zoukankan.com/potato-lee-p-6100148.html

「响应式网页设计」页面无障碍基础设计

CSS accessibility

标签设计

使用标题显示内容的层次关系

使用 main 元素包裹主题内容

使用 article 元素包裹文章内容

使用 header 元素来让屏幕阅读器更容易进行导航

使用 nav 元素使屏幕阅读器更容易导航

使用 footer 元素来让屏幕阅读器更容易进行导航

使用 audio 元素提高音频内容的可访问性

使用 figure 元素提高图表的可访问性

使用 label 元素提高表单的可访问性

将单选按钮包裹在 fieldset 元素中以获得更好的可访问性

添加可访问的日期选择器

使用 HTML5 的 datetime 属性标准化时间

样式设计

使用自定义 CSS 让元素仅对屏幕阅读器可见

使用高对比度文本提高可读性

考虑色盲用户的需求设置合适的对比度

考虑色盲用户的需求仔细选择传达信息的颜色

属性设计

为视觉障碍用户添加替代图像的文本

了解 Alt 文本留空的情景

为链接添加描述性的文本

通过给元素添加 accesskey 属性来让用户可以在链接之间快速导航

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

使用 tabindex 指定多个元素的键盘焦点顺序

参考文献

CATALOG

FEATURED TAGS

FRIENDS