无障碍设计

无障碍设计是指产品, 设备, 服务, 或者环境是为残疾人士设计的。无障碍设计的概念意味着与一个人的辅助技术(例如, 电脑屏幕阅读器)相兼容, 确保直接访问(即独立)和"间接访问"。

无障碍设计可以理解为 "能够访问", 并对一个系统或实体是有利的, 其侧重于使身体残障, 或有特殊需要, 或要依赖辅助技术的人群能够访问 Web。然后, 研究和开发无障碍设计对每个人都带来了好处。

无障碍设计不应该和可用性混淆。 大多数情况下, 可用性是指产品(如: 设备, 服务, 或者环境)能在特定的环境下被特定的用户使用, 来高效地实现制定目标。

无障碍设计和通用性设计是息息相关的。通用型设计是指产品的创造过程中, 产品对人们是可用的, 并尽可能最大范围覆盖各能力范围内的人群和各种情形下的操作, 即对所有人是可访问的(无论他们访问 Web 是否有障碍)。

富互联网应用

开发人员使用HTML、CSS和JavaScript创建富互联网应用程序时，往往把残疾人士抛在脑后，因为这些应用程序无法提供被辅助技术理解所需的语义信息。可悲的是，直到现在这种情况并没有多少改变，其实我们可以扭转这种局面。WAI-ARIA能够提供足够的语义，以确保富互联网应用是可以理解的，并且现在已经得到相对较好的支持。

ARIA是什么？

ARIA是“**Accessible Rich Internet Applications **”的缩写。它是W3C的 Web无障碍推进组织(Web Accessibility Initiative / WAI) 在2014年3月20日发布的 可访问富互联网应用 实现指南。

WAI-ARIA是一个为残疾人士等提供无障碍访问动态、可交互Web内容的技术规范。在 WAI-ARIA概述 中对WAI-ARIA及其他支持文档进行了介绍。

简单点描述：

• ARIA是W3C的一个独立规范，帮助Web应用程序和Web页面变得更具可访问性
• ARIA主要是为了提升网页的可用性，网页对残疾人士的无障碍化
• HTML5已经开始使用ARIA，并且W3C发布的很多其他标准也开始使用ARIA
• ARIA 是对 HTML 语义化的补充。它具备比现有的 HTML 元素和属性更完善的表达能力，并让你页面中元素的关系和含义更明确
• ARIA 规范为浏览器和解析 HTML 文档的辅助性技术提供了一种可以让人们以多种方式访问和使用 Web 的标准方法

如何使用ARIA?

应用于HTML的ARIA有两部分组成： **role** （角色）和带 **aria-** 前缀的属性，其作用：

• role (角色)标识了一个元素的作用
• aria- 属性描述了与之有关的事物（特征）及其是什么样的（状态）

HTML中的ARIA

ARIA在HTML中使用有其自己的规范，并不是说在HTML中使用了ARIA，Web页面就无障碍化了，就提高了可访问性了。言外之意，ARIA没有用好，反而会把你带到另一个坑中，使用你的页面可访问性更差。

有关于HTML中ARIA的文档可以 点击这里阅读 。

ARIA在HTML中的使用

ARIA使用规则一

如果你使用的元素( HTML5 )具有语义化，应该使用这些元素，而不应该重新定义一个添加ARIA的角色、状态或属性的元素。

那么什么时候可用和不可用ARIA呢？

• 在HTML(HTML5)元素特性不管支持或不支持，只要不具语义化，就可以使用ARIA
• 排除视觉设计约束使用一个特定的元素，但不能是样式上所需的元素
• 目前尚不支持的HTML特性

ARIA使用规则二

不改变语义，除非你真的需要使用。例如，开发者想创建一个标题，而且它是一个按钮。

不要这样做：

标题按钮

建议这样做：

标题按钮

或者说，你不使用正确的元素，但你可以这样做：

标题按钮

如果使用一个非交互的元素做为一个交互的元素，那么开发人员必须使用ARIA添加语义和使用适当的脚本增加交互行为。

ARIA使用规则三

所有的ARIA制作控件都必须具有键盘(keyboard)事件。

如果创建一个组件(widget)，用户可以点击、拖放、滑动或滚动，用户使用键盘能定位到创建好的组件部件上，并且执行相应的操作动作。

例如，如果使用 role=button 必须能够接收到焦点和用户能够使用键盘激活相应动作，比如Win操作系统上的 enter 和iOS系统上的 return 或者键盘的空格键( space )。

ARIA使用规则四

不建议在可获取焦点元素( focusable )使用ARIA的角色： role=presentation 或 aria-hidden="true" 。

可获取焦点元素上使用ARIA这两规则，会导致一些用户无法获取元素焦点。

不要这样做：

按下我，按下我

也不要这样做：

按下我，按下我

如果说一个交互元素无法看到或者不能与之交互，那么可以尝试使用 aria-hidden ，例如：

button {visibility:hidden}按下我，按下我

如果一个交互元素使用 display:none; 来隐藏，那么它对应的 可访问性 也将一并被删除，如此一来，在可交互元素上使用 aria-hidden="true" 就没有必要了。

ARIA使用规则五

所有交互元素都必须有一个 可访问的名称 。

当可交互元素的可访问性API的可访问名属性只有一个值时，那么可交互元素就只有一个可访问的名称。

比如下面的示例， input type="text" 有一个可见的 标签,但它并没有可访问的名称：

user name 

或者:

user name

此时MSAA( Microsoft Active Accessibility )控制器的 accName 属性是空的：

相比之下，下面示例中 input type="text" 有一个可见的 标签并且包含一个可访问性名称：

user name 

或者：

user name 

此时MSAA( Microsoft Active Accessibility )控制器的 accName 属性值是 user name ：

另外 label 标签元素是不能被用来给自定义控件提供一个访问性名称，除非 label 引用了HTML的 labelable 元素 。

    user name   

MSAA( Microsoft Active Accessibility )控制器的 accName 属性值是 user name ：

除此之外，使用非HTML labelable 元素来模拟控件，不管给其分配什么角色( role )都不会是HTML的 labelable 元素，比如下面的 div 元素：

    user name   

MSAA( Microsoft Active Accessibility )控制器的 accName 属性值是空的：

ARIA 的角色 role

下面的表格详细的示意了HTML中元素如何使用ARIA的角色 role ，以及对应的含意：

上表中并没有列出所有ARIA的角色，当然并不是所有的HTML元素都具有对应的ARIA的 role ，下表列出了常用的标签元素对应的ARIA的 role ，仅供参考：

注释一

通过一个示例来看看 role="presentation" 运用前后对HTML元素可访问树对比。

 
  
    
     
      
       API      
     
    
  
 

在上面的代码上添加 role="presentation" ：

 
  
    
     
      
       API      
     
    
  
 

table 元素可访问树前后对比示意图如下：

前面也说到过，并不是在HTML中添加ARIA角色对屏幕阅读器就是好的，特别是对于一些默认带有交互功能的元素中，添加ARIA就是浪费时间，比如：

按我
标题一

当然在HTML5的一些特定元素上，ARIA的 role 和自带的语义化元素是可以重叠的，如下表所示:

假设有一个简单的HTML5页<面:

如果你不想使用HTML5的元素，可以使用 div 来替代：

如图所示：

ARIA的属性

下表介绍了ARIA相关属性的使用方法。

属性名	属性值	HTML示意	说明
aria-activedescendant	字符串(后代元素的 id 值)		aria-activedescendant 属性定义了当工具栏获取焦点时，哪一个工具栏的子控件获取焦点。在这个示例中， id="button1" 的按钮控件先获取焦点
aria-atomic	字符串。表示区域内容是否完整播报。值为 true 和 false 。值为 true 时，读屏软件会把整个区域内容都播报出来，如果为 false 则表示只需要播报修改的部分。		这里的 aria-atomic 为 true ，则表示当时间改变的时候，日期的年月都要完整播报出来，不要只改了月份就播报月份的内容。
aria-autocomplete	字符串，表示用户的文本框的自动提示是否提供，可选值有 inline 、 list 、 both 和 none		aria-autocomplete 对应HTML5中的 autocomplete 属性。如果 aria-autocomplete 取值为 list 、 inline 或 both 时，元素的 autocomplete 要设置为 on ,如果其值为 none ，则 autocomplete 取值为 off
aria-busy	字符串，表示当前区域的忙碌状态。默认为 false ，表示清除 busy 状态,取值为 true 时，表示该区域正在加载；取值为 error 时，表示该区域验证无效		如果某个区域内(如这里 ul )有多个地方需要修改，需要全部修改完毕再通知使用者的话，就可以先将 aria-busy 设为 true , 等到全部内容更新完毕后再设成 false 。该属性可以避免辅助工具在区域内容更新完毕前不断即时提醒使用者。
aria-controls	字符串，空格分隔的 id 属性值列表		该属性定义了元素间不能通过文档结构决定的关联关系。 aria-controls 属性主要被 role 为 group , region , 或 widget 的元素使用。
aria-describedby	字符串，空格分隔的 id 属性值列表		同样的，该属性定义了文档结构表现不出来的的元素间的相互关联性。该属性旨在通过标签提供更多用户可能需要的信息。如果指定了不只一个 id , 所有元素会合并在一起共同创建一条单独的描述。
aria-dropeffect	字符串。表示拖拽效果。可选值有： copy , move , reference , execute , popup , none , 依次表示：复制，移动，参照，执行，弹出以及没有效果。		该属性主要用在拖拽上
aria-flowto	字符串，空格分隔的的 id 值列表		如果该属性值对应的是单独的 id , 辅助技术会恢复目标元素的阅读；如果对应的是多个 id , 则辅助技术会让用户去选择、导航到目标元素。
aria-grabbed	字符串。拖拽中元素的捕获状态。可选值有: true , false , undefined 。默认为 undefined ，表示元素捕获状态未知。 true 表示元素可以捕获； false 表示不能被捕获。		该属性用在拖拽上。类似于HTML5中的 draggable 属性。
aira-haspopup	字符串。 true 表示点击的时候会出现菜单或是浮动元素； false 表示没有pop-up效果。
aria-label	字符串		定义一个字符串值标记当前元素。
aria-labelledby	字符串，空格分隔的 id 列表值		aria-labelledby 一般用在区域元素上，对于的 id 一般为对应的标题或是标签元素的 id 关系型属性。
aria-level	数值，表示等级	次标题	模拟 h2 标签元素
aria-live	字符串。可选值有： off , polite , assertive , rude 。默认为 off , 表示不宣布更新； polite 表示只有用户闲时宣布； assertive 表示尽快对用户宣布； rude 表示即时提醒用户，必要的时候甚至中断用户。	2012年 3月	绝大多数的更新应该在用户闲暇的时候告知，即时提示对用户是一种干扰。如果希望内容完全更新后再提示，可以使用上面提到的 aria-busy 。左侧的HTML为时间选择控件的年月标题部分， aria-live="assertive" 表示的是当用户选择了新的时间的时候，尽快通知用户时间发生了变更。
aria-multiselectable	字符串。表示是否可多选。默认为 false , 表示一次只能选择一个项。 true 表示一次可以选择多个项。		例如手风琴展开收起效果，我们可以使用 aria-multiselectable 来告知辅助设备，一次可以展开多个项还是只有一个展开。
aria-owns	字符串，值为目标元素 id		aria-owns 表示元素所拥有的
aria-posinset	数值，表示当前位置		用在设置和获取一个集合内某项的当前位置
aria-readonly	字符串。表示是否只读。默认为 false , 表示元素值可以被修改； true 表示元素指不能被改变
aria-relevant	字符串。表示区域内哪些操作行为需要做出反应。可选值有： additions , removals , text , all ，可以空格分隔多个一起显示。 additions 表示新增节点的时候做出反应； removals 表示删除节点时重要操作； text 表示文本改变是值得重视的； all 等同于同时使用上面三个属性值		左边的HTML表示当日志内容有添加的时候做出反应
aria-required	字符串。元素值是否必需。默认为 false , 表示元素值可以为空； true 表示元素值是必需的		多半用在表单控件中，对应HTML5中的 required 属性
aria-secret	字符串，表示机密状态
aria-setsize	数值，设置尺寸的大小值
aria-sort	字符串。表示表格或格栅中的项是以升序排列还是降序排列。可选值： ascending (↑), descending (↓), none , other
aria-valuemax	数值，允许的最大值		用在progressbar组件上，对应HTML5中的 max
aria-valuemin	数值，允许的最小值		用在progressbar组件上，对应HTML5中的 min
aria-valuenow	数值，表示当前值		用在progressbar组件上，对应HTML5中的 value
aria-valuetext	字符串。定义等同于 aria-valuenow 人可读的文本

ARAI状态

下表介绍了ARIA相关状态的使用方法。

有关于Roles、States 和 Properties相关规范文档(W3C规范)

开发最佳实践

开发一个可访问的 Web 应用不仅需要工具的支持，浏览器的支持，还需要开发人员遵循一定的规范提供对应的元素信息，才能达到最终的目的。下面着重介绍一些开发中的最佳实践。

关于 Image

图片或者动画均需提供 alt 信息，使得读屏软件可以将图片动画的内容清楚的读出来。如图所示：

对应的 HTML 如下:

对于某些用于装饰性的图片，则需设置 alt 为空，使得读屏软件可以忽略此元素。如图用于装饰页头的图片，实际并没有传递有价值的信息。

对应的 HTML 如下：

必须设置一个空 alt 属性的目的是为了能通过 Webking 的检查，并且使得读屏软件能够忽略此元素。

对于图表文件， alt 属性的设置则需要简明扼要的表达出图表的信息，并不用把里面的细节都详细得描述出来。例如下面的图 alt 信息设置为销售额从 1996 年到 2004 年间持续稳定增长，从 400 万增长到了 1600 万。并不需要把每一年的增长额都详细得描述出来。

对于放在链接里面的图片，如果已经有文字的说明， alt 也设置为空，这样避免读屏软件重复同样的内容。如下面的 HTML：

     Apple iPhone 

a 的内容已经指明了这是个苹果手机， img 的 alt 属性就没必要再设置一次了。否则读屏软件会连续读两次重复的内容，引起混乱。

CSS 将样式跟结构分离，使得 HTML 代码结构清晰。很多装饰性的图片也都放在 CSS 里面来加载，带来的一个问题就是在 CSS 里面的图片在高对比度模式下都无法显示。如果这个图片并不仅仅是装饰性的，还可以触发功能，那就需要从 CSS 里面拿出来，当成一个独立的 img 或者 input 元素。例如下面的一个提示保存的图片

写在 CSS 里面的做法是：

 .save_button{     background: url("images/save_button.png");     width: 33px;     height: 33px;     vertical-align:middle;  }

这样当用户切换到高对比度模式，这个图片就是一片空白，用户无法再去点击保存。修改如下：

在一个图片列表里面选中某个图片，区别选中去否我们通常的做法是用边框的颜色来标识。如下图，选中的图片边框为蓝色

.selectedIcon{     border:5px solid #ACC6F3; } .unSelectedIcon{     border:5px solid #C0D4F7; }

但这样的一个实现实际上违反了可访问检查列表中的一项：不能仅仅通过颜色来区分不同的元素，因为在高对比度下只有黑色或白色，这样的区分在高对比度下是没有任何作用的。我们很容易想到的一种办法就是只有选中的时候才加边框，未选中时则没有边框，这样就可以区分出来了。修改如下：

.selectedIcon{     border:5px solid #ACC6F3; } .unSelectedIcon{     border:0 none; }

这样引起的问题是，图片的布局在选中的时候会浮动，增加了 5px 的边框，看起来效果就很差。那么怎么保证布局又满足可访问性的要求呢？ 可以在上面 CSS 的基础上通过 padding 属性使得布局正确：

.selectedIcon {    border:1px solid #ACC6F3;        padding:4px;} .unSelectedIcon {    border:0 none;       padding:5px;}

这样保证整体的边界都是 5px ，在高对比度下的效果如图所示：

关于 Table

Table 分为两类：一类是做布局的 table ，一类是数据 table 。对于布局用的 table ，读屏软件没必要知道这是一个表，可以通过设置 role=presentation 使 JAWS 忽略这个表，只关注里面的内容。对于数据表格，则需要设置 caption 属性，说明整个表是用来做什么的，使得 JAWS 可以告诉用户这个表的作用。对于每一个单元内的数据，还应该通过 th 属性使得 JAWS 能识别这个数据的表头是什么。对于复杂表，可以通过 id 和 header 属性来标识。如图所示 :

以第一行的数字 5 为例，正常人可以很容易得看出 5 指的是一年级 Mr.Henry 老师这个班的男生有 5 个，但当 JAWS 面对这个数字 5 的时候，怎么能识别出来呢？通过 header 来标识表头， header 的值就指向对应表头的 id 。对应的 HTML 如下：