css 应用和辅助功能
为视觉障碍者的图像添加文本替代
您可能已经看到标签alt上的属性img。Alt文本描述了图像的内容，并为其提供了替代文本。这在图像无法加载或用户看不到的情况下有帮助。搜索引擎还使用它来了解图像包含的内容，以将其包含在搜索结果中。这是一个例子：
<img src="importantLogo.jpeg" alt="Company logo">
视障人士依靠屏幕阅读器将Web内容转换为音频界面。如果仅以视觉方式呈现，他们将不会获得信息。对于图像，屏幕阅读器可以访问alt属性并读取其内容以传递关键信息。
好的alt文字为读者提供了对图像的简短描述。您应该始终alt在图像上包含属性。根据HTML5规范，现在认为这是强制性的。
知道何时应将替代文本留空
有时图像会与已经描述它们的标题分组在一起，或者仅用于装饰。在这些情况下，alt文本可能显得多余或不必要。
在图像已经用文本内容解释或未在页面中添加含义的情况下，img仍然需要一个alt属性，但可以将其设置为空字符串。
这是一个例子：
<img src="visualDecoration.jpeg" alt="">
使用主要元素直接跳至内容
HTML5引入了许多新元素，这些元素为开发人员提供了更多选择，同时还集成了辅助功能。这些标签包括main，header，footer，nav，article，和section等等。
默认情况下，浏览器呈现这些元素的方式类似于humble div。但是，在适当的地方使用它们会给您的标记带来额外的意义。标记名称本身就可以指示其包含的信息类型，从而为该内容添加语义。辅助技术可以访问此信息，以便为其用户提供更好的页面摘要或导航选项。
该main元素用于包装主要内容，并且每页应该只有一个。它旨在包围与页面中心主题相关的信息。这并不意味着包括在页面上重复的项，例如导航链接或横幅。
<header>
<h1>Weapons of the Ninja</h1>
</header>
<main></main>
<footer></footer>
该main标签还具有嵌入式地标功能，辅助技术可用于快速导航到主要内容。如果您在页面顶部看到过“跳转到主要内容”链接，则使用main标签会自动为辅助设备提供该功能。
在文章元素中包装内容
article是另一个HTML5元素，它为标记增加了语义。article是分段元素，用于包装独立的独立内容。该标记可与博客条目，论坛帖子或新闻文章配合使用。
确定内容是否可以独立运行通常是一个判断，但是可以使用几个简单的测试。问问自己是否删除了所有周围的上下文，该内容是否仍然有意义？同样，对于文本，如果内容位于RSS feed中，内容是否会保留？
请记住，使用辅助技术的人们依靠有组织的，语义上有意义的标记来更好地理解您的工作。
关于section和div的注意事项：
section元素也是HTML5的新功能，其语义含义与略有不同article。一个article用于独立内容，一个section用于将主题相关的内容分组。它们可以根据需要相互使用。例如，如果一本书是article，则每一章都是一本书section。如果内容组之间没有关系，请使用div。
<div> - groups content
<section> - groups related content
<article> - groups independent, self-contained content
使用标题Landmark可以更轻松地浏览屏幕阅读器
下一个添加语义含义并改善可访问性的HTML5元素是header标签。它用于包装其父标记的介绍性信息或导航链接，并且可以很好地解决在多个页面顶部重复的内容。
header与您共享的嵌入式地标功能共享main，从而使辅助技术可以快速导航到该内容。
注意：该header符号用于bodyHTML文档的标签中。这与head元素不同，后者包含页面的标题，元信息等。
<header>
<h1>Training with Camper Cat</h1>
</header>
使用导航地标使屏幕阅读器的导航更加轻松
该nav元素是另一个HTML5项，具有嵌入式地标功能，可方便屏幕阅读器导航。该标签用于包装页面中的主要导航链接。
如果页面底部有重复的站点链接，则也不必使用nav标签对其进行标记。使用footer足够了。
<nav>
<ul>
<li><a href="#stealth">Stealth & Agility</a></li>
<li><a href="#combat">Combat</a></li>
<li><a href="#weapons">Weapons</a></li>
</ul>
</nav>
使用页脚地标简化屏幕阅读器的导航
与header和相似nav，该footer元素具有内置的地标功能，允许辅助设备快速导航到该元素。它主要用于包含版权信息或指向通常位于页面底部的相关文档的链接。
<footer>© 2020 Jary JunCode</footer>
使用音频元素改善音频内容的可访问性
当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>
注意：多媒体内容通常同时具有视觉和听觉成分。它需要同步的字幕和笔录，以便视力和/或听觉障碍的用户可以访问它。通常，Web开发人员不负责创建标题或字幕，但需要知道将其包括在内。
<audio controls="">
<source src="https://s3.amazonaws.com/freecodecamp/screen-reader.mp3" type="audio/mpeg"></source>
</audio>
使用图形元素改善图表的辅助功能
HTML5引入了figure元素以及相关的figcaption。这些项目一起使用，包装了视觉表示形式（如图像，图表或图表）及其标题。通过在语义上对相关内容进行分组，并提供解释的文本替代方案，可访问性得到双重提升。
对于图表等数据可视化，标题可用于为有视觉障碍的用户简要记录趋势或结论。另一个挑战涉及如何为屏幕阅读器用户在屏幕外（使用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标记来提高可访问性适用于同时使用适当的标记名和属性。
该label标签包装的具体形式控制项目中的文本，通常的名称或标签的选择。这将含义与项目联系起来，并使表格更具可读性。标记for上的属性将label其label与窗体控件明确关联，并由屏幕阅读器使用。
您在“基本HTML”部分的一课中了解了单选按钮及其标签。在该课程中，我们将单选按钮输入元素label与标签文本一起包装在一个元素内，以使文本可单击。实现此目的的另一种方法是使用for本课中说明的属性。
该for属性的值必须与表单控件的属性的id值相同。这是一个例子：
<form>
<label for="name">Name:</label>
<input type="text" id="name" name="name">
</form>
将单选按钮包装在字段集元素中以实现更好的可访问性
下一个表单主题介绍单选按钮的可访问性。给每个选择label一个for属性，该属性id与上一个挑战中涵盖的对应项的属性相关联。由于单选按钮通常是用户必须选择一个的组，因此有一种方法可以从语义上显示选择是集合的一部分。
fieldset标签包围整个单选按钮分组来实现这一目标。它通常使用legend标签来提供分组的描述，屏幕阅读器会针对fieldset元素中的每个选择进行阅读。
在fieldset包装和legend标签是没有必要的时候选择是不言自明的，就像一个性别选择。对每个单选按钮使用label带有for属性的a 就足够了。
这是一个例子：
<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>
添加一个可访问的日期选择器
表单通常包含该input字段，可用于创建多个不同的表单控件。type此元素上的属性指示将创建哪种输入。
您可能已经注意到之前的text和submit输入类型，HTML5引入了一个用于指定date字段的选项。根据浏览器的支持，当日期选择器input处于焦点状态时，它会显示在字段中，这使所有用户都更容易填写表单。
对于较旧的浏览器，该类型将默认为text，因此有助于在标签或占位符文本中向用户显示期望的日期格式，以防万一。
这是一个例子：
<label for="input1">Enter a date:</label>
<input type="date" id="input1" name="input1">
使用HTML5 datetime属性标准化时间
继date主题之后，HTML5还引入了time元素以及datetime用于标准化时间的属性。这是一个内联元素，可以在页面上包装日期或时间。该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>
使用自定义CSS，使元素仅对屏幕阅读器可见
CSS用于将仅屏幕阅读器的元素放置在浏览器窗口的可视区域之外。
这是完成此操作的CSS规则的示例：
当信息采用可视格式（例如图表），但屏幕阅读器用户需要替代的表示形式（例如表格）来访问数据时，就会发生这种情况。CSS用于将仅屏幕阅读器的元素放置在浏览器窗口的可视区域之外。
这是完成此操作的CSS规则的示例：
.sr-only {
position: absolute;
left: -10000px;
width: 1px;
height: 1px;
top: auto;
overflow: hidden;
}
注意：以下CSS方法不会做同样的事情：
display: none;或visibility: hidden;为所有人（包括屏幕阅读器用户）隐藏内容像素大小的零值，例如width: 0px; height: 0px;从文档流中删除该元素，这意味着屏幕阅读器将忽略它
通过高对比度文本提高可读性
前景色和背景色之间的对比度低会使文本难以阅读。足够的对比度可以提高内容的可读性，但是“足够”到底是什么意思？
Web内容可访问性指南（WCAG）建议普通文本的对比度至少为4.5：1。通过比较两种颜色的相对亮度值来计算该比率。范围从1：1（相同颜色或无对比度）到21：1（白色对黑色）（最强的对比度）。在线有许多对比度检查工具可为您计算该比率。
6:1对比度例子：
body {
color: #636363;
background-color: #FFF;
}
通过使用足够的对比度来避免色盲问题
颜色是视觉设计的很大一部分，但是颜色的使用引入了两个可访问性问题。首先，不应仅将颜色用作传达重要信息的唯一方法，因为屏幕阅读器用户不会看到它。其次，前景色和背景色需要足够的对比度，以便色盲用户可以区分它们。
先前的挑战涉及使用文本替代来解决第一个问题。最后一个挑战引入了对比度检查工具来帮助第二个挑战。WCAG推荐的对比度为4.5：1，适用于彩色以及灰度组合。
色盲用户在区分某些颜色和其他颜色时会遇到麻烦-通常在色调上，但有时也在亮度上。您可能还记得，对比度是使用前景色和背景色的相对亮度（或亮度）值计算得出的。
在实践中，可以通过对较深的颜色进行阴影处理（添加黑色）并对较浅的颜色进行着色（添加白色）来达到4.5：1的对比度。色轮上较深的阴影被认为是蓝色，紫罗兰色，洋红色和红色的阴影，而浅色的颜色是橙色，黄色，绿色和蓝绿色。
通过仔细选择传达信息的颜色来避免色盲问题
有多种形式的色盲。这些范围可以从降低的灵敏度到一定的光波长到根本看不到颜色。最常见的形式是降低检测绿色的灵敏度。
例如，如果两种相似的绿色是您内容的前景色和背景色，则色盲用户可能无法区分它们。可以将接近的颜色视为色轮上的邻居，并且在传达重要信息时应避免那些组合。
使用描述性链接文本赋予链接含义
屏幕阅读器用户对于设备阅读哪种类型的内容有不同的选择。这包括跳到（或超过）地标元素，跳到主要内容或从标题获取页面摘要。另一种选择是只听到页面上可用的链接。
屏幕阅读器通过阅读链接文本或anchor（a）标签之间的内容来实现此目的。列出“单击此处”或“阅读更多”链接没有帮助。相反，您应该在a标签内使用简短但描述性的文字，以为这些用户提供更多含义。
<a href="">information about batteries</a>
使用HTML访问键使链接可导航
HTML提供了accesskey用于指定快捷键的属性，该快捷键可以激活或使元素成为焦点。这可以使仅键盘用户的导航更加高效。
HTML5允许在任何元素上使用此属性，但是与交互式元素一起使用时，它特别有用。这包括链接，按钮和表单控件。
这是一个例子：
<button accesskey="b">Important Button</button>
使用tabindex将键盘焦点添加到元素
HTML tabindex属性具有与元素的键盘焦点有关的三个不同的功能。当它在标签上时，表示该元素可以被关注。值（正，负或零的整数）确定行为。
当用户浏览页面时，某些元素（例如链接和表单控件）会自动获得键盘焦点。它与HTML源标记中元素的顺序相同。这个相同的功能可以提供给其他元件，诸如div，span，和p，通过将tabindex="0"属性上它们。这是一个例子：
<div tabindex="0">I need keyboard focus!</div>
注意：负值tabindex（通常为-1）表示该元素是可聚焦的，但无法通过键盘到达。此方法通常用于以编程方式将焦点移到内容上（例如，当div用于弹出窗口的激活时），并且超出了这些挑战的范围。
使用tabindex还可以使CSS伪类:focus对p标记起作用。
<style>
p:focus {
background-color: yellow;
}
</style>
<p tabindex='0'>Instructions: Fill in ALL your information then click <b>Submit</b></p>
使用tabindex为多个元素指定键盘焦点的顺序
该tabindex属性还指定元素的确切制表符顺序。当属性的值设置为1或更大的正数时，可以实现此目的。
设置a tabindex="1"将使键盘焦点首先指向该元素。然后，它将遍历指定abindex值（2、3等）的序列，然后再移至默认值和tabindex="0"项目。
重要的是要注意，以这种方式设置制表符顺序时，它将覆盖默认顺序（使用HTML源代码）。这可能会使希望从页面顶部开始导航的用户感到困惑。在某些情况下，此技术可能是必需的，但就可访问性而言，在应用它之前要小心。
这是一个例子：
<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>
