无障碍访问的快捷方式

众所周知，无障碍访问是很重要的。问题是，我们并不确切地知道究竟怎么做才能使我们的网站实现无障碍访问。

无障碍网页倡议（Web Accessibility Initiative）为我们这些Web内容开发者提供了网页内容无障碍指南（Web Content Accessibility Guidelines）（WCAG），帮助我们开发出更多可以无障碍访问的网页。WCAG涵盖了很多非常有用的信息。在此，我将简要地介绍其中可广泛应用的指导原则，并强调一些可操作的实例，以帮助开发人员设计出更易于被访问的网页。

概述

无障碍指南有四个主要原则，每个原则都包含了具体的准则。点击链接可转到本文中的相关内容。
　1 “可感知性”：信息和用户界面组件必须以可感知的方式呈现给用户。
　　1.1 替代文本
　　1.2 为时基媒体提供替代
　　1.3 适应性的内容
　　1.4 可辨别性
　2 “可操作性”：用户界面组件和导航必须可操作。
　　2.1 键盘可访问
　　2.2 充足的时间
　　2.3 癫痫
　　2.4 可导航性
　3 “可理解性”：信息和用户界面操作必须是可理解的。
　　3.1 可读性
　　3.2 可预测性
　　3.3 辅助输入
　4 “鲁棒性”：内容必须健壮到可信地被种类繁多的用户代理（包括辅助技术）所解释。
　　4.1 兼容

原则1 “可感知性”

1.1 替代文本

“为所有呈现给用户的非文本内容都提供相同目的替代文本”

纯文本是表达任何内容的最佳格式。这是因为在不同格式中都可以使用纯文本来满足各类残障人士的需求。因此，对所有传递信息的内容提供纯文本替代格式十分重要，也就是非装饰性内容。

对于图像，使用alt属性。图像的替代文本应尽可能具有描述性，从而可以传达相同的信息。

<img src=“资讯.gif" alt=“免费资讯。获取免费食谱、新闻及更多内容。" />  

对于音频和视频组件，提供文本转写。可以使用轨道（track）元素为这些媒体元素指定定时文本轨道。

<!-- 轨道元素的格式 -->  
<track kind=“字幕 | 标题 | 说明” src=“文件路径.vtt" srclang="" label="">


<!-- 以音频文件的标题为例 -->  
<audio controls>  
  <source src=“我的音频.ogg" type=“音频/ogg">
  <track src=“标题_en.vtt" kind=“标题” srclang="en" label=“英语”>
</audio>


<!-- 以视频文件的英语和德语说明为例 -->  
<video poster=“我的视频.png" controls>  
  <source src=“我的视频.mp4" srclang="en" type=“视频/mp4">
  <track src=“说明_en.vtt" kind=“说明” srclang="en" label=“英语”>
  <track src=“说明_de.vtt" kind=“说明” srclang="de" label=“德语”>
</video>  

对于用户界面元素，使用标签（label）。标签可以被用来为那些通过视觉可以清楚传达的信息提供文本描述。例如，初级和二级导航区域可能有不同的样式，可以使用aria-label来区分。

<div role=“导航” aria-label=“初级”>  
  <ul><li>...此处为链接列表 ...</li></ul> 
</div>  
<div role=“导航” aria-label=