前言

FreeCodeCamp是一个以“帮助人们免费学习编程”为主旨的非营利性组织，其网站收录了众多训练式题目。作为前端入门有较大的帮助。

英文版（源）地址：www.freecodecamp.org/

中文社区：chinese.freecodecamp.org/forum/t/top…

此系列博文为相关知识点记录，算是自己对前端入门的一个回顾。有空还是强烈建议去刷一遍原题+知识点

应用无障碍

• 为视觉受损的用户添加替代图像的文本
  • alt属性中的文本作为备用文字描述了图片的内容，这可以帮助用户在图片加载失败或者不可见的情况下理解图片内容，也有助于搜索引擎理解图片内容，并将其加入到搜索结果中。
  • 那些无法通过视觉获取信息的用户，只能通过屏幕阅读器将网页内容转换为音频的方式获取信息，而屏幕阅读器通过识别alt属性，并朗读其中的内容，来告知用户图片包含的关键信息。
• 知道 Alt 文本何时应该留空
  • 注意：对于有标题的图片，我们依然需要添加alt属性，因为这样有助于搜索引擎记录图片内容。
• 使用标题显示内容的层次关系
  • 最后一点，每个页面应该只有一个h1标签，用来说明页面主要内容。h1标签和其他的标题标签可以让搜索引擎获取页面的大纲。
• 使用 main 元素包裹主题内容
  • main标签用于呈现网页的主体内容，且每个页面只能有一个。这意味着它只应包含与页面中心主题相关的信息，而不应包含如导航连接、网页横幅等可以在多个页面中重复出现的内容
  • main标签的语义化特性可以使辅助技术快速定位到页面的主体。有些页面中有 “跳转到主要内容” 的链接，使用main标签可以使辅助设备自动获得这个功能。
• 使用 article 元素包裹文章内容
  • section也是一个 HTML5 新标签，与article标签的语义含义略有不同。article用于独立的、完整的内容，而section用于对与主题相关的内容进行分组。它们可以根据需要嵌套着使用。举个例子：如果一本书是一个article的话，那么每个章节就是section。当内容组之间没有联系时，可以使用div。

<div> - 内容组
<section> - 有联系的内容组
<article> - 独立完整的内容

• 使用 header 元素使屏幕阅读器更容易导航
  • header也是一个具有语义化的、提升页面可访问性的 HTML5 标签。它可以为父级标签呈现简介信息或者导航链接，适用于那些在多个页面顶部重复出现的内容。
  • 注意：header用在 HTML 文档的body标签中。这点与包含页面标题、元信息的head标签不同。
• 使用 nav 元素使屏幕阅读器更容易导航
  • 它可以使屏幕阅读器快速识别页面中的导航信息。
  • 对于页面底部辅助性质的站点链接，不需要使用nav，用footer（在下个挑战中介绍）会更好
• 使用 footer 元素使屏幕阅读器更容易导航
  • 它位于页面底部，用于呈现版权信息或者相关文档链接。
• 使用 audio 元素提高音频内容的可访问性
  • 可以在audio上下文中为音频内容添加文字说明或者字幕链接，使听觉障碍用户也能获取音频中的信息。
  • audio支持controls属性，可以使浏览器为音频提供具有开始、暂停等功能的播放控件。controls属性是一个布尔属性，只要这个属性出现在audio标签中，浏览器就会开启播放控件

<audio controls>
  <source src="https://s3.amazonaws.com/freecodecamp/screen-reader.mp3" type="audio/mpeg" />
</audio>

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

<figure>
  <!-- Stacked bar chart will go here -->
  <br>
  <figcaption>Breakdown per week of time to spend training in stealth, combat, and weapons.</figcaption>
</figure>

• 使用 label 元素提高表单的可访问性
  • label标签用于呈现特定表单控件的文本，通常是选项的名称。这些文本代表了选项的含义，使表单具有更好的可读性。label标签的for属性指定了与label绑定的表单控件，并且屏幕阅读器也会读取for属性
  • for属性的值必须与表达控件的id属性的值相同。

<label for="email">Email:</label>
<input type="text" id="email" name="email">

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

<fieldset>
  <legend>What level ninja are you?</legend>
  <input id="newbie" type="radio" name="levels" value="newbie">
  <label for="newbie">Newbie Kitten</label><br>
  <input id="intermediate" type="radio" name="levels" value="intermediate">
  <label for="intermediate">Developing Student</label><br>
  <input id="master" type="radio" name="levels" value="master">
  <label for="master">Master</label>
</fieldset>

• 添加可访问的日期选择器
  • HTML5 引入了date类型来创建时间选择器。依赖于浏览器的支持，当点击input标签时，时间选择器会显示出来，这可以让用户填写表单更加容易。
• 使用 HTML5 的 datatime 属性标准化时间
  • time是一个行内标签，用于在页面中呈现日期或时间，而datetime属性保存了日期的有效格式，辅助设备可以访问这个值。通过标准化时间格式，即使时间在文本中是以非正式的或口语化的形式编写，辅助设备依然可以获取准确的时间和日期。 <time datetime="2016-09-15>...</time>"
• 使用自定义 CSS 让元素仅对屏幕阅读器可见
  • 当信息以可视化形式（如：图表）展示，而屏幕阅读器用户需要一种替代方式（如：表格）来获取信息时，就会出现这种情况。CSS 被用来将这些仅供屏幕阅读器使用的信息定位到浏览器可见区域之外。
  • display: none;或visibility: hidden;会把内容彻底隐藏起来，对于屏幕阅读器也不例外。
  • 如果把值设置为 0px，如width: 0px; height: 0px;，意味着让元素脱离文档流，这样做也会让元素被屏幕阅读器忽略。
• 使用高对比度文本提高可读性
  • Web 内容无障碍指南（WCAG）建议正常文本的对比度至少为 4.5 : 1。对比度是通过比较两种颜色的相对亮度值来计算的，其范围是从相同颜色的 1 : 1（无对比度）到白色与黑色的最高对比度 21 : 1
• 通过使用充足的对比度避免色盲问题
  • 色盲用户无法将一些颜色与另一些颜色区分出来——通常是因为色调，也有时候是因为亮度。你可能想起对比度是用前景色与背景色的相对亮度计算的。
• 通过仔细选择传达信息的颜色来避免色盲问题
  • 如果内容的前景色与背景色是两种相近的绿色，那么色盲用户可能会无法识别它们。可以将色轮上相邻的颜色认为是相近的，我们不应用这些颜色来表示重要的信息。
• 使用描述性链接文本赋予链接含义
  • 屏幕阅读器通过阅读链接文本或者锚点标签（a）之间的内容来完成这个操作。拥有 "click here" 或者 "read more" 列表并没有什么用处。相反地，应该在a标签中使用简洁的描述性语言来为用户提供更多的信息。
• 通过给元素添加 accesskey 属性来让用户可以在链接之间快速导航
  • 用于指定激活标签或者使标签获得焦点的快捷键，这可以使键盘用户的导航更加有效。 <button accesskey="b">Important Button</button>
• 使用 tabindex 将键盘焦点添加到元素中
  • tabindex属性有三个不同与标签焦点的功能。当它在标签上时，表示标签可以获得焦点。它的值可以是零、负整数及正整数，并决定了标签的行为。
  • 当用户在页面中使用 tab 键时，有些标签，如：链接、表单控件，可以自动获得焦点。它们获得焦点的顺序与它们出现在文档流中的顺序一致。我们可以通过将tabindex属性值设为 0，来给其他标签赋予相同的功能，如：div、span、p等。 <div tabindex="0">test</div>
• 使用 tabindex 指定多个元素的键盘焦点顺序
  • tabindex属性还可以指定标签的 tab 键顺序，将它的值设置为大于或等于 1 就可以实现这个功能。
  • tabindex属性值为 1 的标签将首先获得键盘焦点，然后焦点将按照指定的tabindex的值（如：2，3 等）的顺序进行移动，直到回到默认的或tabindex值为 0 的标签上，如此循环

<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>

tabindex这块不是很搞得懂,之后再写写吧