前言
在网页开发中，可访问性是指网页内容和用户界面可以被用户理解、浏览并与之交互。这里的用户包括有视觉障碍、听觉障碍或认知障碍的用户。
img alt
alt属性可以帮助用户在图片加载失败或者不可见的情况下理解图片内容， 搜索引擎也通过它来理解图片内容，并将其加入到搜索结果中。屏幕阅读器可以识别
alt属性，朗读其中的内容，来告知视觉障碍用户图片包含的关键信息。在图片已经有了文字说明，或者仅仅为了美化页面，
img仍然需要一个alt属性，但可以设置为空字符串。对于有标题的图片，依然需要添加
alt文本，这样有助于搜索引擎记录图片内容。
<img src="importantLogo.jpeg" alt="Company logo"> 复制代码
Elements
HTML5 引入了诸如 main、header、footer、nav、article、section 等大量新标签，给予开发者更多的选择，也包含辅助功能。
默认情况下，浏览器呈现这些元素的方式类似于普通的 div。 但是，在适当的地方使用它们会让标记文本具有更多的含义。
h1 ~ h6
每个页面应只有一个 h1 标签，用来概括说明页面的主题。
六个标题标签可以让搜索引擎获取页面的大纲。
main
main 标签用于呈现网页的主体内容，且每个页面应只有一个。
它有一个内嵌的特性，以便辅助技术快速定位到页面的主体。
如果在页面顶部看到过“跳转到主要内容”链接，那么使用 main 标签会自动让辅助设备具有这个跳转的功能。
article
article 是一个分段标签，用于呈现独立及完整的内容。 这个标签适用于博客、论坛帖子或者新闻文章。
删除了所有周围的上下文，这个内容仍然有意义，确定内容可以单独作为一部分。
article 用于独立且完整的内容，而 section 用于对与主题相关的内容进行分组，可以根据需要来嵌套使用。
举个例子：如果一本书是一个
article的话，那么每个章节就是section。
当内容组之间没有联系时，我们可以使用 div。
header
header 可以为父级标签呈现简介信息或者导航链接，适用于那些在多个页面顶部重复出现的内容。
header 应当在 HTML 文档的 body 标签内使用，与包含页面标题、元信息的 head 标签不同。
nav
nav 也是一个具有语义化特性的 HTML5 标签。
它可以使屏幕阅读器快速识别出页面中的导航信息。 它用于呈现页面中的主导航链接。
footer
footer 元素也具有语义化的特性，可以让辅助工具快速定位到它。
它位于页面底部，用于呈现版权信息或者相关文档链接。
audio
audio 标签用于呈现音频内容或音频流，它也具有语义化特性。 音频内容也需要备用文本，供聋哑人或听力困难的人使用。
audio 标签支持 controls 属性， 用于显示浏览器默认播放、停止和其他控制，以及支持键盘功能。
注意： 音频片段的播放速度可能会快到难以理解，但是对于屏幕阅读器用户来说这是正常速度。
<audio controls> <source src="https://s3.amazonaws.com/freecodecamp/screen-reader.mp3" type="audio/mpeg"> </audio> 复制代码
figure figcaption
figure标签以及figcaption标签一起用于展示可视化信息（如：图片、图表）及其标题。
<figure> <img src="roundhouseDestruction.jpeg" alt="Photo of Camper Cat executing a roundhouse kick"> <br> <figcaption> Master Camper Cat demonstrates proper form. </figcaption> </figure> 复制代码
label for
label标签的文本内容通常会是表单组件的名称或标签。这些文本表明了组件的意义，也提升了表单的可访问性。
label标签的for属性将标签与表单组件绑定，屏幕阅读器也会读取for属性的属性值。为了让标签可以在点击的时候也选中输入框，可以将单选按钮 input 标签嵌套在了
label标签里面。 或者使用for属性，使其与表单组件的id属性值相同。
<label for="email">Email:</label> <input type="text" id="email" name="email"> <input type="submit" name="submit" value="Submit"> 复制代码
fieldset legend
fieldset标签包裹整组单选按钮，使用legend标签来提供分组的描述，以便屏幕阅读器用户会阅读fieldset元素中的每个选项。而当选项的含义很明确时，如“性别选择”，使用包含
for属性的label标签就足够了。
<form> <fieldset> <legend>Choose one of these three items:</legend> <input id="one" name="items" type="radio" value="one"> <label for="one">Choice One</label> <br> <input id="two" name="items" type="radio" value="two"> <label for="two">Choice Two</label> <br> <input id="three" name="items" type="radio" value="three"> <label for="three">Choice Three</label> </fieldset> </form> 复制代码
input date
<label for="pickdate">Enter a date: </label> <input type="date" id="pickdate" name="date"> 复制代码
time datetime
<p> Thank you to everyone for responding to Master Camper Cat's survey. The best day to host the vaunted Mortal Kombattournament is <time datetime="2016-09-15"> Thursday, September 15<sup>th</sup> </time> . May the best ninja win! </p> 复制代码
ScreenReader-only
添加一些只对屏幕阅读器可见的内容，可以用 CSS 来实现。
注意：
display: none;或visibility: hidden;会把内容彻底隐藏起来，屏幕阅读器也无法获取这些内容。- 如果把值设置为 0px，如
width: 0px; height: 0px;，意味着让元素脱离文档流，这样做同样也会让屏幕阅读器忽略此元素。
.sr-only { position: absolute; left: -10000px; width: 1px; height: 1px; top: auto; overflow: hidden; } 复制代码
High Contrast Text
Web 内容无障碍指南（WCAG）建议正常文本的对比度至少为 4.5 : 1。
对比度是通过比较两种颜色的相对亮度值来计算的。
对比度的范围是从相同颜色的 1:1（无对比度）到白色与黑色的最高对比度 21:1。
可以通过将较暗的颜色变暗、将较淡的颜色变淡的方法来使对比度达到 4.5:1。
在色轮中，较暗的颜色通常是蓝色、紫色、洋红和红色，而较淡的颜色通常是橙色、黄色、绿色和蓝绿色。
accesskey
HTML 提供 accesskey 属性，用于指定激活元素或者使元素获得焦点的快捷键。
添加 accesskey 属性可以让使用键盘的用户更高效率地导航。
HTML5 允许在任何标签上使用这个属性。 该属性尤其适用于链接、按钮、表单组件等元素。
tabindex
当用户使用键盘浏览页面时，诸如链接、表单控件等元素可以自动获得焦点，获得焦点的顺序与它们出现在 HTML 文档流中的顺序一致。当然可以通过将其他标签（如
div、span、p等）的tabindex属性值设为 0 来让它们实现类似的效果。注意：
tabindex属性值为负整数（通常为 -1）的标签也是可以获得焦点的，只是不可以通过键盘操作（如 tab 键）来获得焦点。使用tabindex属性还可以让 CSS 伪类:focus在p标签上生效。
<div tabindex="0">I need keyboard focus!</div> 复制代码
给元素设置
tabindex="1"，键盘将首先把焦点放在这个元素上。然后它按照指定的
tabindex值（2、3 等等）顺序循环，再移动到默认值和tabindex="0"项目。
<input type="search" name="search" id="search" tabindex="1"> <input type="submit" name="submit" value="Submit" id="submit" tabindex="2">
