2018 July 06 ARIA,无障碍访问

ARIA无障碍访问

ARIA

ARIA 为Web app提供满足用户不同需求的解决方案。建设起用户和软件之间的桥梁。

新的HTML5标准中增加 aria-* 的标签属性，全称Accessible Rich Internet Application。与role标签属性配合使用。

role属性表示一个非标准的tag的实际作用。比如用div做button，那么设置div 的 role=“button”，辅助工具就可以认出这实际上是个button。而aria-*的作用就是描述这个tag在可视化的情境中的具体信息。

最简单的应用比如，

<div role="checkbox" aria-checked="checked"></div>

辅助工具就会知道，这个div实际上是个checkbox的角色，为选中状态。

这一套协定是w3和apple为了残疾人士无障碍使用网站.

例如视障人士, 在读到这一句

aria-hidden="true

的时候, 就会自动忽略跳过

现代的辅助技术能够识别并朗读由 CSS 生成的内容和特定的 Unicode 字符。为了避免屏幕识读设备抓取非故意的和可能产生混淆的输出内容。为这些图标设置了 aria-hidden=”true” 属性。

如果你所创建的组件不包含任何文本内容（例如，

屏幕阅读器

屏幕阅读器（英语：screen reader）又称为屏幕报读软件，是一种安装于电脑上的应用程序软件，用来将文字、图形以及电脑界面的其他部分（藉文字转语音（Text-To-Speech, TTS）技术）转换成语音及／或点字。对于视障者或阅读障碍者甚有助益，有些人会搭配放大软件一齐使用。

如何使网站实现无障碍访问

1. HTML 页面中加入 DTD 声明及默认语言属性

<!DOCTYPE html> 
 <html lang="zh-CN">

2. XML 页面中加入 DTD 声明及默认语言属性

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
 <html xmlns="http://www.w3.org/1999/xhtml" lang="fr" xml:lang="fr">

3.设置 title 属性

 <head> 
 <title><bean:message key="createFolder.title" /></title>

4. 图片或者动画均需提供 Alt 信息，使得读屏软件可以将图片动画的内容清楚的读出来。

 <img src="cat.gif" alt="Image about cat" />

5.对于某些用于装饰性的图片，则需设置 alt 为空，使得读屏软件可以忽略此元素。

 <img src="ring.gif" alt="" />

### 6.对于图表文件，alt 属性的设置则需要简明扼要的表达出图表的信息，并不用把里面的细节都详细得描述出来。

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

   <a href=”http://apple.com/iphone/”> 
	 <img src=”iphone.jpg” alt=””>Apple iPhone 
 </a>

8.Table

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

 <tr> 
	 <th id="class"> Class </th> 
	 <th id="teacher"> Teacher </th> 
	 <th id="boys"> #of Boys </th> 
	 <th id="girls"> #of Girls </th> 
 </tr> 
 <tr> 
	 <th id="1stgrade" rowspan="2"> 1st Grade </th> 
	 <th id="MrHenry" headers="1stgrade teacher"> Mr . Henry </th> 
	 <td headers="1stgrade MrHenry boys"> 5 </td> 
	 <td headers="1stgrade MrHenry girls"> 4 </td> 
 </tr> 
 <tr> 
	 <th id="MrsSmith" headers="1stgrade teacher"> Mrs . Smith </th> 
	 <td headers="1stgrade MrsSmith boys"> 7 </td> 
	 <td headers="1stgrade MrsSmith girls"> 9 </td> 
 </tr> 
 <tr> 
	 <th id="2ndgrade" rowspan="3"> 2nd Grade </th> 
	 <th id="MrJones" headers="2ndgrade teacher"> Mr . Jones </th> 
	 <td headers="2ndgrade MrJones boys"> 3 </td> 
	 <td headers="2ndgrade MrJones girls"> 9 </td> 
 </tr> 
 <tr> 
	 <th id="MrsSmith" headers="2ndgrade teacher"> Mrs . Smith </th> 
	 <td headers="2ndgrade MrsSmith boys"> 4 </td> 
	 <td headers="2ndgrade MrsSmith girls"> 3 </td> 
 </tr> 
 <tr> 
	 <th id="MrsKelly" headers="2ndgrade teacher"> Mrs . Kelly </th> 
	 <td headers="2ndgrade MrsKelly boys"> 6 </td> 
	 <td headers="2ndgrade MrsKelly girls"> 9 </td> 
 </tr>

10. Form 元素示例

 <label for="name1">Name:</label> 
 <input name="name" id="name1" size="30" /> 
或 
 <input name=”name” id=”name1” size=”30” title=”name”>

11.想只给读屏软件读到就需要使用上面的绝对定位方式

参考：张鑫旭-无障碍阅读

参考：http://www.alloyteam.com/2012/10/how-to-develop-accessible-web-site-application/