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

1、使用 main 元素包裹主题内容

HTML5 添加了诸如main、header、footer、nav、article、section等大量新标签，这些新标签为开发人员提供更多的选择和辅助特性。

main标签用于呈现网页的主体内容，且每个页面只能有一个。这意味着它只应包含与页面中心主题相关的信息，而不应包含如导航连接、网页横幅等可以在多个页面中重复出现的内容。

main标签的语义化特性可以使辅助技术快速定位到页面的主体。有些页面中有 “跳转到主要内容” 的链接，使用main标签可以使辅助设备自动获得这个功能。

2、 使用 article 元素包裹文章内容

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

请注意section和div的区别：

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

<div> - 内容组

<section> - 有联系的内容组

<article> - 独立完整的内容

3、 使用 header 元素使屏幕阅读器更容易导航

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

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

注意：

header用在 HTML 文档的body标签中。这点与包含页面标题、元信息的head标签不同。

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

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

对于页面底部辅助性质的站点链接，不需要使用nav，用footer（在下个挑战中介绍）会更好。

5、 使用 footer 元素使屏幕阅读器更容易导航

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

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

HTML5 的audio标签用于呈现音频内容，它也具有语义化特性。可以在audio上下文中为音频内容添加文字说明或者字幕链接，使听觉障碍用户也能获取音频中的信息。

audio支持controls属性，可以使浏览器为音频提供具有开始、暂停等功能的播放控件。controls属性是一个布尔属性，只要这个属性出现在audio标签中，浏览器就会开启播放控件。

注意：

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

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

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

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

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

label标签用于呈现特定表单控件的文本，通常是选项的名称。这些文本代表了选项的含义，使表单具有更好的可读性。label标签的for属性指定了与label绑定的表单控件，并且屏幕阅读器也会读取for属性。

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

使用fieldset标签将单选按钮组包含在里面就可以实现这个目的，通常还会使用legend标签来为单选按钮组提供文字说明。屏幕阅读器也可以朗读这些文字。

10、 添加可访问的日期选择器

HTML5 引入了date类型来创建时间选择器。依赖于浏览器的支持，当点击input标签时，时间选择器会显示出来，这可以让用户填写表单更加容易。

对于旧版本的浏览器，type属性的默认值是text。这种情况下，可以利用label标签或者占位文本来提示用户input标签的输入类型为日期。

11、 使用 HTML5 的 datatime 属性标准化时间

HTML5 还引入了time标签与datetime属性来标准化时间。time是一个行内标签，用于在页面中呈现日期或时间，而datetime属性保存了日期的有效格式，辅助设备可以访问这个值。通过标准化时间格式，即使时间在文本中是以非正式的或口语化的形式编写，辅助设备依然可以获取准确的时间和日期。

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

HTML 提供accesskey属性，用于指定激活标签或者使标签获得焦点的快捷键，这可以使键盘用户的导航更加有效。

HTML5 允许在任何标签上使用这个属性。该属性对于交互类标签（如链接、按钮、表单控件等）十分有用。

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

HTML 的tabindex属性有三个不同与标签焦点的功能。当它在标签上时，表示标签可以获得焦点。它的值可以是零、负整数及正整数，并决定了标签的行为。

当用户在页面中使用 tab 键时，有些标签，如：链接、表单控件，可以自动获得焦点。它们获得焦点的顺序与它们出现在文档流中的顺序一致。我们可以通过将tabindex属性值设为 0，来给其他标签赋予相同的功能，如：div、span、p等。

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

注意：

tabindex属性值为负整数（通常为 -1）的标签也是有焦点的，只是不可以通过 tab 键来获得焦点。这种方法通常用于以编程的方式使内容获得焦点（如：激活用于弹出框的div标签），但是它超出了当前挑战的范围。

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

tabindex属性还可以指定标签的 tab 键顺序，将它的值设置为大于或等于 1 就可以实现这个功能。

tabindex属性值为 1 的标签将首先获得键盘焦点，然后焦点将按照指定的tabindex的值（如：2，3 等）的顺序进行移动，直到回到默认的或tabindex值为 0 的标签上，如此循环。

需要注意的是，当按照这种方式设置 tab 键顺序时，将会覆盖默认的顺序（标签在文档流中出现的顺序）。这可能会令那些希望从页面顶部开始导航的用户感到困惑。这个技术在某些情况下可能是必要的，但是对可访问性而言，在应用时要十分小心。