学习笔记：应用无障碍

学习笔记：应用无障碍

1. 简介

网站应该对每个人开放和访问，这包括有视觉、听觉、行动能力或认知障碍的人。在开发项目时要考虑到各种用户的需求，这对创建开放 Web 大有帮助。本节将探讨三个一般概念:

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

拥有可访问的 Web 内容是一个持续的挑战。

“可访问性”通常意味着 Web 内容和用户界面可以被广泛的受众理解、导航和交互。

其中W3C 的 Web Content Accessibility Guidelines 内容可访问性指南(WCAG)是你的未来项目的一个很好的资源。他们为可访问性设置了国际标准，并提供了一些可以用来检查工作的标准。

2. 内容

• alt属性：其中的文本作为备用文字描述了图片的内容。

  • 功能：这可以帮助用户在图片加载失败或者不可见的情况下理解图片内容，也有助于搜索引擎理解图片内容，并将其加入到搜索结果中。

    同样，在a标签中使用简洁的描述性语言来为用户提供更多的信息

  • 注意：对于有标题的图片，我们依然需要添加alt属性，因为这样有助于搜索引擎记录图片内容；对于已经有了文字说明或者仅仅为了美化页面的情况下（如：背景图片）可以将alt属性内容设置为空。

• accesskey属性：用于指定激活标签或者使标签获得焦点的快捷键。

  • 功能：使键盘用户的导航更加有效。

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

  • <button accesskey="b">Important Button</button>
    

• tabindex属性：当它在标签上时，表示标签可以获得焦点。

  • 有三个不同与标签焦点的功能。它的值可以是零、负整数及正整数，并决定了标签的行为。

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

  • 例子如下，整份代码中只有username上方的p段落添加tabindex=0。
    

  • 可以指定标签的 tab 键顺序，将它的值设置为大于或等于 1 就可以实现这个功能。具体顺序按照值从小到大顺序进行移动然后返回到默认或者0处。

    注意：这种顺序会覆盖掉默认的顺序（即标签在文档流中出现的顺序）。小心使用。

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

  • HTML5 添加了诸如main、header、footer、nav、article、section等大量新标签，默认情况下，浏览器呈现这些新标签的方式与div相似。然而，合理地使用它们，可以使你的标签更加的语义化。

  • 标题标签：h1标签和其他的标题标签可以让搜索引擎获取页面的大纲。每个页面应该只有一个h1标签，用来说明页面主要内容

  • main标签：用于呈现网页的主体内容，且每个页面只能有一个。它只应包含与页面中心主题相关的信息，这样可以使辅助技术快速定位到页面的主体。

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

  • section标签：用于对与主题相关的内容进行分组。它们可以根据需要嵌套着使用。

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

    举例：如果一本书是一个article的话，那么每个章节就是section。当内容组之间没有联系时，可以使用div。

  • header标签：可以为父级标签呈现简介信息或者导航链接，适用于那些在多个页面顶部重复出现的内容。

    用于body标签中，与包含页面标题、元信息的head标签不同。

  • nav标签：用于呈现页面中的主导航链接。它可以使屏幕阅读器快速识别页面中的导航信息。

  • footer标签：使辅助设备快速定位到其所在位置。它位于页面底部，用于呈现版权信息或者相关文档链接。

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

  • audio标签：用于呈现音频内容，支持controls属性，可以使浏览器为音频提供具有开始、暂停等功能的播放控件。

    controls属性是一个布尔属性，只要这个属性出现在audio标签中，浏览器就会开启播放控件。

    <audio id="meowClip" style="display:block;margin:auto" controls >  
        <source src="audio/meow.mp3" type="audio/mpeg" />  
    </audio>
    <!--效果如下所示-->
    

    

  • figure标签：以及与之相关的figcaption标签。它们一起用于展示可视化信息（如：图片、图表）及其标题。figcaption包含在figure标签中，配以用于解释figure的文字，figure标签可以与其他标签组合使用。

  • label标签：用于呈现特定表单控件的文本，通常是选项的名称。这些文本代表了选项的含义，使表单具有更好的可读性。

    label标签的for属性指定了与label绑定的表单控件，for属性的值必须与表达控件的id属性的值相同。并且屏幕阅读器也会读取for属性。

  • fieldset标签：语义化呈现单选按钮组，保证单选按钮承租出现，用户必须选择其中一项，通常还会使用legend标签来为单选按钮组提供文字说明。屏幕阅读器也可以朗读这些文字。

  • input标签：用来创建多种表单控件。它的type属性指定了所要创建的input标签类型。

  • time标签：与datetime属性来标准化时间。time是一个行内标签，用于在页面中呈现日期或时间，而datetime属性保存了日期的有效格式，辅助设备可以访问这个值。

    <p>
        Posted by: The Grim Reaper on <time datetime="2016-08-16T00:00Z"> August 16<sup>th</sup></time>
    </p>
    

    通过标准化时间格式，即使时间在文本中是以非正式的或口语化的形式编写，辅助设备依然可以获取准确的时间和日期。

3. 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;，意味着让元素脱离文档流，这样做也会让元素被屏幕阅读器忽略。

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

  色盲用户无法将一些颜色与另一些颜色区分出来——通常是因为色调，也有时候是因为亮度，也可以是对特定波长光波的感知度较低。

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