freeCodeCamp 旅途3 - 应用无障碍

作者: HJSD | 来源:发表于2019-04-30 18:53 被阅读0次

应用无障碍

“可访问性”通常意味着 Web 内容和用户界面可以被广泛的受众理解、导航和交互。W3C 的 Web Content Accessibility Guidelines 内容可访问性指南(WCAG)是未来项目的一个很好的资源。一个好的网站，一般有三个概念：

有组织良好的代码，使用适当的标记
确保非文本和可视内容存在文本替代
创建一个易于导航的页面，它对键盘友好

图像文本

img标签的alt中的文本作为备用文字描述了图片的内容，这可以帮助用户在图片加载失败或者不可见的情况下理解图片内容，也有助于搜索引擎理解图片内容，并将其加入到搜索结果中。
<img src="importantLogo.jpeg" alt="Company logo">

在图片已经有了文字说明，或者仅仅为了美化页面的情况下，alt属性似乎有些多余。即便如此，我们仍然需要为img标签添加alt属性，这时可以把它设为空，<img src="visualDecoration.jpeg" alt="">。

标题层次

标题标签（包括h1到h6）有很高的使用率，它们用于描述内容的主题。在屏幕阅读器中，用户为更快地了解页面内容，可以设置让阅读器只朗读页面标题。这意味着标题标签之间以及标签本身都应语义化，不应仅仅为了获得不同字号而使用不同级别的标题标签。
语义化：标签名能准确地表达它所含内容的信息类型。
在使用中，相同级别（或者更高级别）的标题标签用于开启新的章节，低一级别的标题标签用于开启上一级标题标签的子小节。
例如：一个h2标签后紧跟若干h4标签的页面，会让使用屏幕阅读器的用户感到困惑。每个页面应该只有一个h1标签，用来说明页面主要内容。h1标签和其他的标题标签可以让搜索引擎获取页面的大纲。

使用 main 元素包裹主题内容

HTML5 添加了诸如main、header、footer、nav、article、section等大量新标签，这些新标签为开发人员提供更多的选择和辅助特性。
main标签用于呈现网页的主体内容，且每个页面只能有一个。这意味着它只应包含与页面中心主题相关的信息，而不应包含如导航连接、网页横幅等可以在多个页面中重复出现的内容。
main标签的语义化特性可以使辅助技术快速定位到页面的主体。

使用 article 元素包裹文章内容

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

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

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

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

header也是一个具有语义化的、提升页面可访问性的 HTML5 标签。它可以为父级标签呈现简介信息或者导航链接，适用于那些在多个页面顶部重复出现的内容。
与main类似，header的语义化特性也可以使辅助技术快速定位到它的内容。

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

nav也是一个具有语义化特性的 HTML5 标签，用于呈现页面中的主导航链接。它可以使屏幕阅读器快速识别页面中的导航信息。
对于页面底部辅助性质的站点链接，不需要使用nav，用footer会更好。

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

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

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

HTML5 的audio标签用于呈现音频内容，它也具有语义化特性。可以在audio上下文中为音频内容添加文字说明或者字幕链接，使听觉障碍用户也能获取音频中的信息。
audio支持controls属性，可以使浏览器为音频提供具有开始、暂停等功能的播放控件。controls属性是一个布尔属性，只要这个属性出现在audio标签中，浏览器就会开启播放控件。

<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的文字，可以极大的提升内容的可访问性。

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

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

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

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

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

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

<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属性指定了所要创建的input标签类型。HTML5 引入了date类型来创建时间选择器。依赖于浏览器的支持，当点击input标签时，时间选择器会显示出来，这可以让用户填写表单更加容易。
对于旧版本的浏览器，type属性的默认值是text。这种情况下，可以利用label标签或者占位文本来提示用户input标签的输入类型为日期。

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

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

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>
<time datetime="2016-09-15">Thursday, September 15<sup>th</sup></time>

使用自定义 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。

通过使用充足的对比度避免色盲问题

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

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

通过仔细选择传达信息的颜色来避免色盲问题

一些在线颜色拾取器有色盲模拟功能，可以模拟颜色在不同形式色盲的视觉中的呈现结果，它们和在线对比度检查器一样，都是很好的工具。
a { color: #003366; background-color: #FFFF33; }

使用描述性链接文本赋予链接含义

屏幕阅读器用户可以选择其设备读取的内容的类型，这包括跳转到（或跳过）标志标签，以便跳转到主要内容，或者从标题中获取页面摘要，还可以选择只听取页面中的有效链接。
屏幕阅读器通过阅读链接文本或者锚点标签（a）之间的内容来完成这个操作。拥有 "click here" 或者 "read more" 列表并没有什么用处。相反地，应该在a标签中使用简洁的描述性语言来为用户提供更多的信息。
<a href="">information about batteries</a> for information about batteries

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

HTML 提供accesskey属性，用于指定激活标签或者使标签获得焦点的快捷键，这可以使键盘用户的导航更加有效。HTML5 允许在任何标签上使用这个属性。
<button accesskey="b">Important Button</button>

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

HTML 的tabindex属性有三个不同与标签焦点的功能。当它在标签上时，表示标签可以获得焦点。它的值可以是零、负整数及正整数，并决定了标签的行为。
tabindex属性值为负整数（通常为 -1）的标签也是有焦点的，只是不可以通过 tab 键来获得焦点。这种方法通常用于以编程的方式使内容获得焦点（如：激活用于弹出框的div标签）。

p:focus {    background-color: yellow;  }
<p tabindex="0">Instructions: Fill in ALL your information then click <b>Submit</b></p>

注意：使用tabindex属性可以使 CSS 伪类:focus在p标签上生效。

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

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

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

<label for="search">Search:</label>
<input type="search" name="search" id="search" tabindex="1">
<input type="submit" name="submit" value="Submit" id="submit" tabindex="2">

响应式布局

响应式 Web 设计是一种能自动响应不同尺寸设备的设计方法。实现这一切的核心要素是：媒介查询（Media Query）。
如果你预计网站的大部分流量来自移动端，那么应该采取“移动端优先”的策略，再为PC端做兼容。
如果你预计网站的大部分流量来自PC端，那么应该采取“PC端优先”的策略，再为移动端做兼容。

创建一个媒介查询

媒体查询是 CSS3 中引入的一项新技术，它可以根据不同的可视窗口大小显示不同的布局。可视窗口是用户在网页上的可见区域，根据访问网站的设备不同而不同。

媒体查询由媒体类型组成，如果媒体类型与展示网页的设备类型匹配，则应用对应的样式。你可以在媒体查询中用上你想用的选择器和样式。@media (max-height: 800px) { p { font-size: 12px; } }

当设备宽度小于或等于 100px 时返回内容：@media (max-width: 100px) { /* CSS Rules */ }
当设备高度大于或等于 350px 时返回内容：@media (min-height: 350px) { /* CSS Rules */ }

使图片根据设备尺寸自如响应

用 CSS 来让图片自适应其实很简单。不要使用绝对单位：img { width: 720px; }。应该使用相对单位：img { max-width: 100%; display: block; height: auto;}

max-width 属性能让图片以 100% 的最大宽度适应其父容器的宽度，但图片不会拉伸得比原始宽度还宽。将 display 属性设置为 block 可以让 image 标签从内联元素（默认值）更改为块级元素。设置 height 属性为 auto 保持图片的原始宽高比。

针对高分辨率屏幕应使用视网膜图片

为优化图片在高分辨率设备下的显示效果，最简单的方式是定义它们的 width 和 height 值为源文件宽高的一半。

<style>
  img { height: 250px; width: 250px; }
</style>
<img src="coolPic500x500" alt="一张高质量的图片">

使排版根据设备尺寸自如响应

除了用 em 或 px 去设置文本大小, 你还可以用视窗单位来做响应式排版。视窗单位还有百分比，它们都是相对单位，但却基于不同的参照物。视窗单位相对于设备的视窗尺寸 (宽度或高度) ，百分比是相对于父级元素的大小。

四个不同的视窗单位分别是：

vw：如 10vw 的意思是视窗宽度的 10%。
vh：如 3vh 的意思是视窗高度的 3%。
vmin：如 70vmin 的意思是视窗中较小尺寸的 70% (高度 VS 宽度)。
vmax：如 100vmax 的意思是视窗中较大尺寸的 100% (高度 VS 宽度)。