无障碍网页标准规范

一、无障碍网页了解

1.1无障碍网页

无障碍网页特别针对残疾人士的需要

 

1.2 ARIA是什么？

ARIA是W3C的 Web无障碍推进组织发布的可访问富互联网应用实现指南。WAI-ARIA是一个为残疾人士等提供无障碍访问动态、可交互Web内容的技术规范。

 

1.3 ARIA有组成部分

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

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

 

二、无障碍网页规范常用属性表

无障碍网页规范常用属性表

属性名

属性说明

示例

示例说明

tabindex

当网页中的某些部分不能用Tab键来聚焦的时候，则需要用到tabindex，它是用来定位html元素。tabindex有三个值:0,-1以及X(X里32767是界点)

 

（1）当tabindex=0时，该元素可以用tab键获取焦点，且访问的顺序是按照元素在文档中的顺序来聚焦；

 

（2）当tabindex=-1时，该元素用tab键获取不到焦点，但是可以通过js获取，这样就便于我们通过js设置上下左右键的响应事件来聚焦;

 

（3）当tabindex>=1时，该元素可以用tab键获取焦点，而且优先级大于tabindex=0；不过在tabindex>=1时，数字越小，越先定位到。一般应用于填写表单。

 

（4）触发div标签绑定的onfocus事件和onblur事件，需要为该标签添加tabindex属性。

<li tabindex="0" aria-label="提示信息">内容</li>

<li tabindex="0" aria-label="提示信息">内容</li>

<li tabindex="0" aria-label="提示信息">内容</li>

tabindex:使Tab键聚焦的属性，设置为0，可以根据顺序进行聚焦;

aria-label:提示聚焦到标签的内容,必须写，否则用户无法获知该标签的内容

<li tabindex="3" aria-label="提示信息">内容</li>

<li tabindex="2" aria-label="提示信息">内容</li>

<li tabindex="1" aria-label="提示信息">内容</li>

tabindex:使Tab键聚焦的属性，键盘将会按照tabindex的值进行定位，tabindex的值越小，越早获得聚焦;

aria-label:提示聚焦到标签的内容,必须写，否则用户无法获知该标签的内容

情况一:

<a>内容</a>

 

情况二:

<a href=””>内容</a>

 

情况三:

<a tabindex="0">内容</a>

 

情况四:

<a tabindex="0" href=””>内容</a>

默认情况下如情况一，是不能通过Tab键进行聚焦；

只有加上herf才能进行聚焦如情况二，聚焦时会默认读出a标签里面的内容，并可以通过Enter键进入相应的链接；

虽然tabindex也可以实现Tab键聚焦的功能，但是不能通过Enter键进入相应的链接，如情况三；

若tabindex和a标签相结合使用，必须要加上href，如情况四，这样才能确保Tab键能聚焦的同时也能通过Enter键进入相应的链接

情况一:

<div onfocus="javascript:alert('得到焦点!');" </div> 

 

情况二：

<div tabindex="0" onfocus='alert("得到焦点!");'  </div> 

 

若div标签如情况一时，无论是Tab键还是点击div区域都无法获得聚焦，onfocus的函数并不能触发，onblur同样也存在这种道理;

若div标签添加了tabindex属性时如情况二，无论是通过Tab键还是通过点击都可以触发onfocus和onblur事件

<div tabindex="0" role="menuitem">无障碍</div>

<p tabindex="0" role="menuitem">无障碍</p>

<h1 tabindex="0" role="menuitem">无障碍</h1>

在div、p、h等标签下使用tabindex的时，要注意的一点是必须要加上role属性，否则键盘聚焦是读屏软件提示内容将会出现错位、读错等现象

aria-label

用于提示标签信息

情况一:

<input / >

情况二:

<input aria-label = "提示内容" />

情况三:

<input aria-label = "提示内容" value="编辑内容" />

情况四：

<input type="checkbox" aria-label="一周内记住登录账号" />

<span>一周内记住登录账号</span>

input标签可通过Tab键进行聚焦，如情况一，读屏软件提示:可编辑文本；

若在input标签中加入aria-label，如情况二，读屏软件提示:提示内容可编辑文本

若在input标签中同时加入aria-label和value，如情况三，读屏软件提示:提示内容可编辑文本编辑内容

form表单中如何存在情况四的不规范的复选框情况，也可以使用aria-label标签

情况一：

<button>登录</button>

情况二：

<button aria-label="提示内容">登录</button>

button标签可通过Tab键进行聚焦，如情况一，读屏软件提示:登录按下按钮；

在button标签中添加aria-label如情况二，读屏软件提示:提示内容按下按钮，即添加了aria-label后，会自动覆盖button标签里面的内容，不再读出。

aria-labelledby

多用于绑定id，提示标签信息

<div aria-labelledby="title" role="alertdialog" tabindex="0">

<h3 id="title">标题</h3>

</div>

role="alertdialog"表明该div是一个对话框，div标签中的aria-labelledby与h3标签中的id保存一致，这样就可以提示div标签的信息，读屏软件提示:标题对话框

role

标签扮演的角色属性，即确认某个标签的作用

情况一:

<a href="">百度</a>

情况二：

<a href="" role="button">百度</a>

默认情况下，a标签加上href后如情况一，读屏软件提示:百度链接已遍历；

a标签同时加上href和button

读屏软件提示:百度按下按钮

<ul role="tablist">

<li role="presentation"class="active">

<a role="tab" href="">企业经办</a>

</li>

<li role="presentation">

<a role="tab" href="">总公司</a>

</li>

<li role="presentation">

<a role="tab" href="">子公司</a>

</li>

</ul>

选项卡的例子，role=tablist表明ul是一个选项卡列表；role="presentation"表示称述，role="tab"表明该a标签是一个选项卡，读屏软件提示:企业经办人选项卡

 

情况一:

<ul role="radiogroup">

<li tabindex="0" role="radio" aria-checked="false">A选项</li>

<li tabindex="0" role="radio" aria-checked="true">B选项</li>

<li tabindex="0" role="radio" aria-checked="false">C选项</li>

</ul>

 

情况二:

<li tabindex="0" role="radio" aria-checked="false" aria-label=”A”>A选项</li>

情况一是单选按钮例子role="radiogroup"表明ul是一个单选组，tabindex="0"实现聚焦，role="radio" 表明li标签是一个单选按钮，aria-checked说明单选按钮是否选中，aria-checked="true"表明单选按钮已选中，aria-checked="false"表明单选按钮未选中，读屏软件提示:A选项单选按钮未选中

情况二实在情况一的li标签中添加aria-label则读屏软件提示:A单选按钮未选中,即aria-label的内容会覆盖li的内容

<div role="alertdialog" tabindex="0">

role="alertdialog"表明div是一个对话框，读屏软件提示:对话框

for、id(联动操作)

for和id进行联动，多用于form表单表单中的input编辑文本

情况一:

<form>

<label for="uname">用户名</label>

<input id="uname"/>

</form>

 

情况二:

<label for="uname">用户名:</label>

<input id="uname" title=”必填项” />

 

一般遇到input标签即编辑文本时，读屏软件提示:可编辑文本，这样用户无法或获知该文本的作用，虽然可以通过aria-label添加提示信息(除非没有label)，相对来说不便利，随着标签内容的改动也要改变aria-label的提示信息。所以一般的input标签编辑框都需要进行联动。

 

情况一：这里的联动就是将label标签中的for和input标签中的id取名一致即可，则读屏软件提示:用户名可编辑文本。

注意:不能用name进行代替

情况二：在情况一的基础上可以加上一个title的属性，主要是用于提示用户的内容，如该文本编辑框是一个必填项。读屏软件提示:用户名编辑文本必填项

alt

alt一般运用于img标签中

情况一：

<a href="">

<img src="img/1.jpg" alt="小猫图片" /></a>

 

情况二:

<a href="">

<img src="img/1.jpg" alt="" >小猫图片</a>

情况一:alt的使用让读屏软件可以将图片的内容读出来，若图片不存在则会提示alt里面的内容。读屏软件提示:小猫图片链接已遍历;

情况二:

因为a标签已经有内容了，img 的alt无需重复重复设置，否则读屏软件会连续读两次重复的内容，引起混乱。

onpicked

实现日期选择联动

<input id="begintime"onFocus="

var endtime=$dp.$('endtime'); WdatePicker({onpicked:function(){endtime.focus();},maxDate:'#F{$dp.$D(\'endtime\')}'})"/>

至

<input id="endtime" onFocus="WdatePicker({minDate:'#F{$dp.$D(\'begintime\')}'})"/>

$dp.$：是一个内置函数,相当于document.getElementById

$dp.$D：是一个内置函数，意思是记录该日期到日(D就是y,M,d,H,m,s 分别代表 年月日时分秒中的d)

 

 

三、无障碍网页使用规则和注意事项

3.1 ARIA在HTML中的使用规则

（1）ARIA使用规则一

如果你使用的元素( HTML5 )具有语义化，应该使用这些元素，而不应该重新定义一个添加ARIA的角色、状态或属性的元素。在HTML(HTML5)元素特性不管支持或不支持，只要不具语义化，就可以使用ARIA 排除视觉设计约束使用一个特定的元素，但不能是样式上所需的元素。

 

（2）ARIA使用规则二

不改变语义，除非你真的需要使用。

 

例如，开发者想创建一个标题，而且它是一个按钮。

不要这样做：<h1 role=button>标题按钮</h1>

建议这样做：<h1><button>标题按钮</button></h1>

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

<h1><span role=button>标题按钮</span></h1>

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

 

（3）ARIA使用规则三

所有的ARIA制作控件都必须具有键盘(keyboard)事件。如果创建一个组件(widget)，用户可以点击、拖放、滑动或滚动，用户使用键盘能定位到创建好的组件部件上，并且执行相应的操作动作。即如果使用 role=button 必须能够接收到焦点和用户能够使用键盘激活相应动作

 

（4）ARIA使用规则四

不建议在可获取焦点元素使用ARIA的角色:role=presentation或 aria-hidden="true"。可获取焦点元素上使用ARIA这两规则，会导致一些用户无法获取元素焦点。

不要这样做:<button role=presentation>按下我</button>

也不要这样做:<button aria-hidden="true">按下我</button>

如果说一个交互元素无法看到或者不能与之交互，那么可以尝试使用aria-hidden,例如：button {visibility:hidden}<button aria-hidden="true">按下我</button> 如果一个交互元素使用 display:none; 来隐藏，那么它对应的可访问性也将一并被删除，这样，在可交互元素上使用 aria-hidden="true" 就没有必要了。

 

（5）ARIA使用规则五

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

例如:input type="text"有一个可见的 <label> 标签,但它并没有可访问的名称：

user name <input type="text">

或者:<label>user name</label><input type="text" />

所以我们必须加上一个可访问名并进行联动操作:

<label for="uname">user name</label><input type="text" id="uname"/>

 

四、无障碍网页ARIA Roles值示意及说明表属性表

ARIA Roles值示意及说明表属性表

Role值

含义

Html示例

示例说明

alert

表示警告

情况一:

<div role="alert" tabindex="0">内容</div>

情况二:

<div role="alert" tabindex="0" title="无障碍">内容</div>

tabindex主要用于键盘聚焦的作用

情况一读屏软件提示:警告

情况二:加入title可以提高标签的可读性，读屏软件提示:无障碍警告

alertdialog

表示对话框

情况一：

<div role="alertdialog" tabindex="0">内容</div>

情况二：

<div role="alertdialog" tabindex="0" title="无障碍">内容</div>

情况三:

<div aria-labelledby="alert_title" role="alertdialog" tabindex="0">

<p id="alert_title">弹出框</p>

</div>

tabindex主要用于键盘聚焦的作用

情况一读屏软件提示:对话框

情况二:加入title可以提高标签的可读性，读屏软件提示:无障碍对话框

情况三：alertdialog多与aria-labelledby相结合使用于弹出对话框，主要的用法是将aria-labelleby和p标签中的id进行联动操作，读屏软件提示:弹出框对话框

application

表示主窗口(应用)

情况一：

<div role="application" tabindex="0">内容</div>

情况二：

<div role="application" tabindex="0" title="无障碍">内容</div>

情况三:

<div role="application">

<label for="date">时间:</label>

<input id="date" type="text" />

<button id="bn_date">选择日期</button>

<div class="datepicker" aria-hidden="true">

<-- 时间选择控件 -->

</div>

</div>

tabindex主要用于键盘聚焦的作用

情况一读屏软件提示:主窗口

情况二:加入title可以提高标签的可读性，读屏软件提示:无障碍主窗口

情况三：application常与自定义的时间选择器相结合使用

 

button

表示按钮

情况一：

<div role="button" tabindex="0">标题</div>

情况二:

<div role="button" tabindex="0"  title="提示" >标题</div>

tabindex主要用于键盘聚焦的作用

情况一读屏软件提示:标题按下按钮

情况二:title应该学会巧用，否则会使读屏软件读出的内容造成混乱现象，读屏软件提示:标题按下按钮提示

checkbox

表示复选框

情况一：

<div role="checkbox" aria-checked="true" tabindex="0">内容</div>

情况二:

<div role="checkbox" aria-checked="true" tabindex="0" title="提示">内容</div>

情况三:

<ul role="group">

<li role="checkbox" aria-checked="mixed" tabindex="0">水果</li>

<li role="checkbox" aria-checked="false" tabindex="0">苹果</li>

<li role="checkbox" aria-checked="true" tabindex="0">梨子</li>

<li role="checkbox" aria-checked="true" tabindex="0">香蕉</li>

</ul>

tabindex主要用于键盘聚焦的作用

role=”group”表示组

aria-checked=”true”表示已选中，aria-checked=”false”表示未选中，

aria-checked=”mixed”表示未选中默认选中

情况一读屏软件提示:内容复选框已选中

情况二:title应该学会巧用，否则会使读屏软件读出的内容造成混乱现象，读屏软件提示:内容复选框已选中提示

情况三:checkbox常用于复选框组，读屏软件提示:水果复选框未选中默认选中，苹果复选框未选中......

combobox

表示组合框

情况一：

<div role="combobox" tabindex="0">内容</div>

情况二:

<input type="text" tabindex="0" role="combobox" aria-autocomplete="inline" aria-owns="cb1-list" />

<ul id="cb1-list" tabindex="-1" role="listbox" aria-expanded="true">

<li id="cb1-opt1" role="option">苹果</li>

<li id="cb1-opt2" role="option">梨子</li>

<li id="cb1-opt3" role="option">香蕉</li>

</ul>

tabindex主要用于键盘聚焦的作用

aria-autocomplete="inline"用户的文本框的自动提示支持提供

aria-expanded=”true”表示展开状态

role=”listbox”表示列表框

role=”option”表示选项

情况一读屏软件提示:组合框内容

情况二:aria-owns和ul标签中的id进行了联动操作

grid

表示表格(网格)

情况一：

<div role="grid" tabindex="0">内容</div>

情况二:

<div role="grid" tabindex="0" title="必填项" aria-label="无障碍">内容</div>

情况三:

<table role="grid" aria-labelledby="grid1_label" aria-readonly="true">

<caption id="grid1_label">水果</caption>

<thead>

<tr>

    <th tabindex="-1">苹果</th>

    <th tabindex="-1">梨子</th>

    <th tabindex="-1">香蕉</th>

</tr>

</thead>

<tbody></tbody>

</table>

tabindex主要用于键盘聚焦的作用

aria-readonly只读，默认为false

aria-readonly="false"表示元素可以被修改；

aria-readonly="true"表示元素不能被修改；

情况一读屏软件提示:表格

情况二:读屏软件提示:无障碍表格必填项

情况三:grid常用于表格头部,aria-labelldby和caption标签中的id进行了联动操作

gridcell

表示单元格(网格单元)

情况一：

<div role="gridcell" tabindex="0">内容</div>

情况二:

<div role="gridcell" tabindex="0" title="必填项" aria-label="无障碍">内容</div>

情况三:

<table role="grid" aria-readonly="true">

<tr role="row" aria-selected="false">

<td role="gridcell" tabindex="0" aria-label="苹果">苹果</td>

<td role="gridcell" tabindex="0" aria-label="梨子">梨子</td>

<td role="gridcell" tabindex="0" aria-label="香蕉">香蕉</td>

</tr>

</table>

tabindex主要用于键盘聚焦的作用

aria-readonly只读，默认为false

aria-readonly="false"表示元素可以被修改；

aria-readonly="true"表示元素不能被修改；

aria-selected="false"表示未选中

aria-selected="true"表示已选中

role=”row”表示行

情况一读屏软件提示:单元格

情况二:读屏软件提示:无障碍单元格必填项

情况三:gridcell常用于表单中的单元格

 

group

表示分组(组合)

情况一：

<div role="group" tabindex="0">内容</div>

情况二:

<div role="group" tabindex="0" title="必填项" aria-label="无障碍">内容</div>

情况三:

<ul role="group">

<li role="checkbox" aria-checked="mixed" tabindex="0">水果</li>

<li role="checkbox" aria-checked="false" tabindex="0">苹果</li>

<li role="checkbox" aria-checked="true" tabindex="0">梨子</li>

<li role="checkbox" aria-checked="true" tabindex="0">香蕉</li>

</ul>

tabindex主要用于键盘聚焦的作用

aria-checked=”true”表示已选中，aria-checked=”false”表示未选中，

aria-checked=”mixed”表示未选中,

role="checkbox"表示复选框

情况一读屏软件提示:分组

情况二:读屏软件提示:无障碍分组必填项

情况三:group常用于分组

 

heading

表示应用程序标题头

<div role="heading" aria-live="assertive" aria-atomic="true">2012年3月</div>

aria-live="assertive"表示的是当用户选择了新的时间的时候，尽快通知用户时间发生了变更。

aria-atomic="true"表示当时间改变的时候，这里的年月日期要完整播放，不要只改了月份就只报月份内容。

heading常用于时间选择器中的月份标题

listbox

表示列表(列表框)

情况一:

<div role="listbox" tabindex="0">内容</div>

情况二:

<div role="listbox" tabindex="0" title="必填项" aria-label="无障碍">内容</div>

情况三:

<input type="text" tabindex="0" role="combobox" aria-autocomplete="inline" aria-owns="cb1-list" />

<ul id="cb1-list" tabindex="-1" role="listbox" aria-expanded="true">

<li id="cb1-opt1" role="option">苹果</li>

<li id="cb1-opt2" role="option">梨子</li>

<li id="cb1-opt3" role="option">香蕉</li>

</ul>

tabindex主要用于键盘聚焦的作用

aria-autocomplete="inline"用户的文本框的自动提示支持提供

aria-expanded=”true”表示展开状态

role=”combobox”表示组合框

role=”option”表示选项

情况一:读屏软件提示:列表

情况二:读屏软件提示:无障碍列表必填项

情况三:aria-owns和ul标签中的id进行了联动操作

log

表示客户端(日志记录)

情况一:

<div role="log" tabindex="0">内容</div>

情况二:

<div role="log" tabindex="0" title="必填项" aria-label="无障碍">内容</div>

情况三:

<div role="log" aria-atomic="false" aria-relevant="additions">内容</div>

tabindex主要用于键盘聚焦的作用

aria-atomic="false" :表示只需要通报修改的部分；

aria-relevant="additions":表示新增节点的时候做出反应

情况一:读屏软件提示:客户端

情况二:读屏软件提示:无障碍客户端必填项

情况三:当日志内容有添加的时候做出反应。类似三国杀右侧记录战事区域；或是比赛文字直播记录区域。

menu

表示菜单

<ul role="menubar">

<li role="menuitem" tabindex="0" aria-haspopup="true">水果

<ul role="menu" aria-hidden="true">

<li role="menuitemradio" tabindex="-1" aria-checked="true">苹果</li>

<li role="menuitemradio" tabindex="-1" aria-checked="false">梨子</li>

<li role="menuitemradio" tabindex="-1" aria-checked="false">香蕉</li>

</ul>

</li>

<li role="menuitem" tabindex="-1" aria-haspopup="false">风景</li>

<li role="menuitem" tabindex="-1" aria-haspopup="false">汽车</li>

<li role="menuitem" tabindex="-1" aria-haspopup="false">房屋</li>

</ul>

tabindex主要用于键盘聚焦的作用

role="menubar":菜单栏；

role="menuitem":菜单项；

role="menuitemradio":只能单选的菜单项；

aria-haspopup="true":点击的时候会出现菜单或浮动元素；

aria-haspopup="false":没有出现菜单或浮动效果；

aria-hidden="true":正常显示，但是不能通过聚焦读出里面的内容；

aria-hidden="false":正常显示且能通过聚焦读出里面的内容；

aria-checked="true":选中

aria-checked="false":未选中

menubar

表示菜单栏

<ul role="menubar">

<li role="menuitem" tabindex="0" aria-haspopup="true">水果

<ul role="menu" aria-hidden="true">

<li role="menuitemradio" tabindex="-1" aria-checked="true">苹果</li>

<li role="menuitemradio" tabindex="-1" aria-checked="false">梨子</li>

<li role="menuitemradio" tabindex="-1" aria-checked="false">香蕉</li>

</ul>

</li>

<li role="menuitem" tabindex="-1" aria-haspopup="false">风景</li>

<li role="menuitem" tabindex="-1" aria-haspopup="false">汽车</li>

<li role="menuitem" tabindex="-1" aria-haspopup="false">房屋</li>

</ul>

tabindex主要用于键盘聚焦的作用

role="menu":菜单；

role="menuitem":菜单项；

role="menuitemradio":只能单选的菜单项；

aria-haspopup="true":点击的时候会出现菜单或浮动元素；

aria-haspopup="false":没有出现菜单或浮动效果；

aria-hidden="true":正常显示，但是不能通过聚焦读出里面的内容；

aria-hidden="false":正常显示且能通过聚焦读出里面的内容；

aria-checked="true":选中

aria-checked="false":未选中

menuitem

表示菜单项

<ul role="menubar">

<li role="menuitem" tabindex="0" aria-haspopup="true">水果

<ul role="menu" aria-hidden="true">

<li role="menuitemradio" tabindex="-1" aria-checked="true">苹果</li>

<li role="menuitemradio" tabindex="-1" aria-checked="false">梨子</li>

<li role="menuitemradio" tabindex="-1" aria-checked="false">香蕉</li>

</ul>

</li>

<li role="menuitem" tabindex="-1" aria-haspopup="false">风景</li>

<li role="menuitem" tabindex="-1" aria-haspopup="false">汽车</li>

<li role="menuitem" tabindex="-1" aria-haspopup="false">房屋</li>

</ul>

tabindex主要用于键盘聚焦的作用

role="menu":菜单；

role="menubar":菜单栏；

role="menuitemradio":只能单选的菜单项；

aria-haspopup="true":点击的时候会出现菜单或浮动元素；

aria-haspopup="false":没有出现菜单或浮动效果；

aria-hidden="true":正常显示，但是不能通过聚焦读出里面的内容；

aria-hidden="false":正常显示且能通过聚焦读出里面的内容；

aria-checked="true":选中

aria-checked="false":未选中

menuitemcheckbox

表示可复选的菜单项

 

<ul role="menubar">

<li role="menuitem" tabindex="0" aria-haspopup="true">水果

<ul role="menu" aria-hidden="true">

<li role="menuitemcheckbox" tabindex="-1" aria-checked="true">苹果</li>

<li role="menuitemcheckbox" tabindex="-1" aria-checked="false">梨子</li>

<li role="menuitemcheckbox" tabindex="-1" aria-checked="false">香蕉</li>

</ul>

</li>

<li role="menuitem" tabindex="-1" aria-haspopup="false">风景</li>

<li role="menuitem" tabindex="-1" aria-haspopup="false">汽车</li>

<li role="menuitem" tabindex="-1" aria-haspopup="false">房屋</li>

</ul>

tabindex主要用于键盘聚焦的作用

role="menu":菜单；

role="menubar":菜单栏；

role="menuitem":菜单项；

aria-haspopup="true":点击的时候会出现菜单或浮动元素；

aria-haspopup="false":没有出现菜单或浮动效果；

aria-hidden="true":正常显示，但是不能通过聚焦读出里面的内容；

aria-hidden="false":正常显示且能通过聚焦读出里面的内容；

aria-checked="true":选中

aria-checked="false":未选中

menuitemradio

表示只能单选的菜单项

<ul role="menubar">

<li role="menuitem" tabindex="0" aria-haspopup="true">水果

<ul role="menu" aria-hidden="true">

<li role="menuitemradio" tabindex="-1" aria-checked="true">苹果</li>

<li role="menuitemradio" tabindex="-1" aria-checked="false">梨子</li>

<li role="menuitemradio" tabindex="-1" aria-checked="false">香蕉</li>

</ul>

</li>

<li role="menuitem" tabindex="-1" aria-haspopup="false">风景</li>

<li role="menuitem" tabindex="-1" aria-haspopup="false">汽车</li>

<li role="menuitem" tabindex="-1" aria-haspopup="false">房屋</li>

</ul>

tabindex主要用于键盘聚焦的作用

role="menu":菜单；

role="menubar":菜单栏；

role="menuitem":菜单项；

aria-haspopup="true":点击的时候会出现菜单或浮动元素；

aria-haspopup="false":没有出现菜单或浮动效果；

aria-hidden="true":正常显示，但是不能通过聚焦读出里面的内容；

aria-hidden="false":正常显示且能通过聚焦读出里面的内容；

aria-checked="true":选中

aria-checked="false":未选中

option

表示选项

<input type="text" tabindex="0" role="combobox" aria-autocomplete="inline" aria-owns="cb1-list" />

<ul id="cb1-list" tabindex="-1" role="listbox" aria-expanded="true">

<li id="cb1-opt1" role="option">苹果</li>

<li id="cb1-opt2" role="option">梨子</li>

<li id="cb1-opt3" role="option">香蕉</li>

</ul>

tabindex主要用于键盘聚焦的作用

aria-autocomplete="inline"用户的文本框的自动提示支持提供

aria-expanded=”true”表示展开状态

role="combobox" :组合框

role=”listbox”:列表框

aria-owns和ul标签中的id进行了联动操作

presentation

表示称述

<div class="slider">

<img aria-valuenow="45" aria-valuemax="100" aria-valuemin="0" role="slider" src="slider_control.png" />

<div role="presentation" tabindex="0">45</div>

</div>

tabindex主要用于键盘聚焦的作用

aria-valuenow="45" :当前值为45

aria-valuemax="100":允许最大值100

aria-valuemin="0":允许最小值0

role="slider":滑动条

presentation多用于自定义的滑动条。而role="presentation"所在div显示的就是当前滑动位置对应的值。

progressbar

表示进度条

<div role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" tabindex="0">

<div aria-hidden="false">23%</div>

</div>

tabindex主要用于键盘聚焦的作用

aria-valuenow="0" :当前值为0

aria-valuemax="100":允许最大值100

aria-valuemin="0":允许最小值0

aria-hidden="false":正常显示且能通过聚焦读出里面的内容

读屏软件提示:进度栏0

radio

表示单选

<ul role="radiogroup">

<li tabindex="0" role="radio" aria-checked="false">A选项</li>

<li tabindex="0" role="radio" aria-checked="true">B选项</li>

<li tabindex="0" role="radio" aria-checked="false">C选项</li>

</ul>

tabindex主要用于键盘聚焦的作用

role="radiogroup":单选组

aria-checked="false":未选中

aria-checked="true":已选中

radio自定义单选框控件的时候使用

radiogroup

表示单选组

<ul role="radiogroup">

<li tabindex="0" role="radio" aria-checked="false">A选项</li>

<li tabindex="0" role="radio" aria-checked="true">B选项</li>

<li tabindex="0" role="radio" aria-checked="false">C选项</li>

</ul>

tabindex主要用于键盘聚焦的作用

role="radio":单选

aria-checked="false":未选中

aria-checked="true":已选中

region

表示区域

<div role="region" tabindex="-1" aria-expanded="false">

我的出现，因为你点击了某个按钮。

</div>

aria-expanded="false":表示元素不是展开的

region可用在div区域显示隐藏切换的时候

 

row

表示行

<table role="grid" aria-readonly="true">

<tr role="row" aria-selected="false">

<td role="gridcell" tabindex="0" aria-label="苹果">苹果</td>

<td role="gridcell" tabindex="0" aria-label="梨子">梨子</td>

<td role="gridcell" tabindex="0" aria-label="香蕉">香蕉</td>

</tr>

</table>

tabindex主要用于键盘聚焦的作用

aria-readonly只读，默认为false

aria-readonly="false"表示元素可以被修改；

aria-readonly="true"表示元素不能被修改；

aria-selected="false"表示未选中

aria-selected="true"表示已选中

role=”grid”表示网格

role=”gridcell”表示网格单元

row用在表格模拟的行列表上，对应table下面的tr标签

separator

表示分隔

<ul role="menubar">

<li role="menuitem" tabindex="0" aria-haspopup="true">水果

<ul role="menu" aria-hidden="true">

<li role="menuitemradio" tabindex="-1" aria-checked="true">苹果</li>

<li role="separator" tabindex="-1"></li>

<li role="menuitemradio" tabindex="-1" aria-checked="false">梨子</li>

<li role="menuitemradio" tabindex="-1" aria-checked="false">香蕉</li>

</ul>

</li>

</ul>

tabindex主要用于键盘聚焦的作用

role="menu":菜单；

role="menubar":菜单栏；

role="menuitem":菜单项；

role="menuitemradio":只能单选的菜单项；

aria-haspopup="true":点击的时候会出现菜单或浮动元素；

aria-haspopup="false":没有出现菜单或浮动效果；

aria-hidden="true":正常显示，但是不能通过聚焦读出里面的内容；

aria-hidden="false":正常显示且能通过聚焦读出里面的内容；

aria-checked="true":选中

aria-checked="false":未选中

separator的使用主要是用一条黑色的1像素水平分隔线分隔选项

slider

表示滑动条

 

<div class="slider">

<img aria-valuenow="45" aria-valuemax="100" aria-valuemin="0" role="slider" src="slider_control.png" />

<div role="presentation" tabindex="0">45</div>

</div>

tabindex主要用于键盘聚焦的作用

aria-valuenow="45" :当前值为45

aria-valuemax="100":允许最大值100

aria-valuemin="0":允许最小值0

role="presentation":称述

spinbutton

表示微调(即商品数量上下按钮微调件数)

<div role="spinbutton"

aria-valuemin="0" aria-valuemax="100" aria-valuenow="45" tabindex="0">

45</div>

 

tabindex主要用于键盘聚焦的作用

aria-valuenow="45" :当前值为45

aria-valuemax="100":允许最大值100

aria-valuemin="0":允许最小值0

读屏软件提示微调组合框45

tab

表示标签

<ul role="tablist">

<li aria-selected="true" role="tab" tabindex="0">苹果</li>

<li role="tab" aria-selected="false" tabindex="-1">梨子</li>

<li role="tab" aria-selected="false" tabindex="-1">香蕉</li>

<li role="tab" aria-selected="false" tabindex="-1">西瓜</li>

</ul>

tabindex主要用于键盘聚焦的作用

role="tablist":标签列表

aria-selected="true"已选中

aria-selected="false"未选中

tab主要应用于选项卡

tablist

表示标签列表

<ul role="tablist">

<li aria-selected="true" role="tab" tabindex="0">苹果</li>

<li role="tab" aria-selected="false" tabindex="-1">梨子</li>

<li role="tab" aria-selected="false" tabindex="-1">香蕉</li>

<li role="tab" aria-selected="false" tabindex="-1">西瓜</li>

</ul>

tabindex主要用于键盘聚焦的作用

role="tab":标签

aria-selected="true"已选中

aria-selected="false"未选中

tab主要应用于选项卡组

tabpanel

表示标签面板

<div role="tabpanel">

<ul class="tablist" role="tablist">

<-- 选项卡 --></ul>

<div id="panel1" aria-labelledby="tab1" role="tabpanel">

<ul class="controlList">

<li><input id="fruit1" type="radio" name="fruit" value="p" />

<label for="fruit1">苹果</label></li>

<li><input id="fruit2" type="radio" name="fruit" value="l" checked />

<label for="fruit2">梨子</label></li>

<li><input id="fruit3" type="radio" name="fruit" value="x" />

<label for="fruit3">香蕉</label></li>

</ul>

</div>

<div id="panel2" aria-labelledby="tab2" role="tabpanel"></div>

<div id="panel3" aria-labelledby="tab3" role="tabpanel"></div>

<div id="panel4" aria-labelledby="tab4" role="tabpanel"></div>

</div>

role="tablist"：表明ul是一个选项卡列表；

aria-labelledby:多用于绑定id，提示标签信息；

timer

表示计数

<div role="timer" aria-atomic="true" aria-relevant="all">0</div>

aria-atomic="true":辅助设备需要把整个区域内容都通报给使用者

aria-relevant="additions":表示新增节点的时候做出反应；

aria-relevant="removals":表示删除节点时重要操作；

aria-relevant="text":表示文本改变是值得重视的；

aria-relevant="all":all等同于同时使用上面三个属性值。

模拟计数器，使用在动态显示规律数值变化的地方

读屏软件提示:时钟

toolbar

表示工具栏

情况一:

<div role="toolbar" tabindex="0" >内容</div>

情况二:

<div role="toolbar" tabindex="0" aria-activedescendant="button1">

<img src="btncut.png" id="button1" role="button" alt="cut" />

<img src="btncopy.png" id="button2" role="button" alt="copy" />

<img src="btnpaste.png" id="button3" role="button" alt="paste" />

</div>

tabindex主要用于键盘聚焦的作用

aria-activedescendant:后代元素的id值,该属性定义了当工具栏获取焦点时，哪一个工具栏的子控件获取了焦点。

情况一:读屏软件提示:工具栏

 

tooltip

表示提示文本

情况一:

<div role="tooltip" tabindex="0" >内容</div>

情况二:

<div class="text">

<label id="name_label" for="name">姓名: </label>

<input type="text" id="name" name="name"aria-labelledby="name_label"aria-describedby="tip" aria-required="false" />

<div id="tip" role="tooltip" aria-hidden="true">内容</div>

</div>

tabindex主要用于键盘聚焦的作用

aria-labelledby:多用于绑定id，提示标签信息；

aria-describedby:属性定义了文档结构表现不出来的的元素间的相互关联性。该属性旨在通过标签提供更多用户可能需要的信息。如果指定了不只一个id, 所有元素会合并在一起共同创建一条单独的描述；

aria-required="false":元素值可以为空;

aria-hidden="true":正常显示，但是不能通过聚焦读出里面的内容；

情况一:读屏软件提示:工具提示

 

tree

表示树形

情况一:

<div role="tree" tabindex="0" >内容</div>

情况二:

<ul role="tree">

<li aria-expanded="true" tabindex="-1" role="treeitem">

<img alt="展开" src="expanded.gif" />水果

<ul role="group"></ul>

</li>

<li aria-expanded="false" tabindex="0" role="treeitem">

<img alt="收起" src="contracted.gif" />动物

<ul role="group"></ul>

</li>

</ul>

tabindex主要用于键盘聚焦的作用

aria-expanded="true":表示展开状态；

aria-expanded="false":表示元素不是展开；

role="treeitem":树结构选项；

role="group":组；

情况一:读屏软件提示:树示图

 

treeitem

表示树结构选项

<ul role="tree">

<li aria-expanded="true" tabindex="-1" role="treeitem">

<img alt="展开" src="expanded.gif" />水果

<ul role="group">

<li tabindex="-1" role="treeitem">苹果</li>

<li tabindex="-1" role="treeitem">梨子</li>

<li tabindex="-1" role="treeitem">香蕉</li>

</ul>

</li>

<li aria-expanded="false" tabindex="0" role="treeitem">

<img alt="收起" src="contracted.gif" />动物

<ul role="group"></ul>

</li>

</ul>

tabindex主要用于键盘聚焦的作用

aria-expanded="true":表示展开状态；

aria-expanded="false":表示元素不是展开；

role="tree":表示树形；

role="group":组；

 

 

五、无障碍网页ARIA属性值示意及说明表

ARIA属性值示意及说明表

ARIA属性值

含义

Html示例

示例说明

aria-activedescendant

表示后代元素的id值。

<div role="toolbar" tabindex="0" aria-activedescendant="button1">

<img src="btncut.png" id="button1" role="button" alt="cut" />

<img src="btncopy.png" id="button2" role="button" alt="copy" />

<img src="btnpaste.png" id="button3" role="button" alt="paste" />

</div>

aria-activedescendant 属性定义了当工具栏获取焦点时，哪一个工具栏的子控件获取了焦点。在此HTML示例中，工具栏的第一个控件（拥有id“button1″）是能获取焦点的子控件。

aria-atomic

字符串。表示区域内容是否完整播报。值可以为true和false。当为true时，表示辅助设备需要把整个区域内容都通报给使用者；如果为false则表示只需要通报修改的部分。

<div role="heading" aria-live="assertive" aria-atomic="true">2012年 3月</div>

 

例如时间选择器年月标题。这里的aria-atomic为true则表示当时间改变的时候，这里的年月日期要完整播放，不要只改了月份就只报月份内容。

aria-autocomplete

字符串。表示用户的文本框的自动提示是否提供。可选值有：inline, list,

 both, none

<input type="text" tabindex="0" role="combobox" aria-autocomplete="inline" aria-owns="cb1-list" />

<ul id="cb1-list" tabindex="-1" role="listbox" aria-expanded="true">

<li id="cb1-opt1" role="option">苹果</li>

<li id="cb1-opt2" role="option">梨子</li>

<li id="cb1-opt3" role="option">香蕉</li>

</ul>

aria-autocomplete="list", 

aria-autocomplete="inline或aria-autocomplete="both"被设置在支持autocomplete的元素上，则autocomplete的属性值需要设成"on", 如果是aria-autocomplete="none"，则需要设成"off"

aria-busy

字符串。表当前区域的忙碌状态。默认为false,表清除busy状态；可选为true, 表该区域正在加载；或为error, 表示该区域验证无效。

<ul aria-atomic="true" aria-busy="true" aria-live="polite">

 

如果某个区域内(如这里ul)有多个地方需要修改，需要全部修改完毕再通知使用者的话，就可以先将aria-busy设为true, 等到全部内容更新完毕后再设成false. 该属性可以避免辅助工具在区域内容更新完毕前不断即时提醒使用者。

aria-controls

字符串。空格分隔的id属性值列表。

<h3 id="tab1" aria-selected="true" aria-controls="panel1" 

aria-expanded="true" role="tab" tabindex="0">水果</h3>

<div id="panel1" aria-labelledby="tab1" aria-hidden="false" role="tabpanel">

<h3 tabindex="0">请选择</h3>

</div>

该属性定义了元素间不能通过文档结构决定的关联关系。ariaControls属性主要被role为group, region, 或widget的元素使用。

aria-describedby

字符串。空格分隔的id属性值列表。

<div class="text">

<label id="name_label" for="name">姓名: </label>

<input type="text" id="name" name="name"aria-labelledby="name_label"aria-describedby="tip" aria-required="false" />

<div id="tip" role="tooltip" aria-hidden="true">内容</div>

</div>

该属性定义了文档结构表现不出来的的元素间的相互关联性。该属性旨在通过标签提供更多用户可能需要的信息。如果指定了不只一个id, 所有元素会合并在一起共同创建一条单独的描述。

aria-dropeffect

字符串。表示拖拽效果。可选值有：copy, move, reference, execute, popup, none, 依次表示：复制，移动，参照，执行，弹出以及没有效果

 

该属性用在拖拽上。

aria-flowto

字符串。空格分隔的id值们

 

如果该属性值对应的是单独的id,辅助技术会恢复目标元素的阅读；如果对应的是多个id, 则辅助技术会让用户去选择、导航到目标元素。

aria-grabbed

字符串。拖拽中元素的捕获状态。可选值有:true, false, undefined. 默认为undefined，表示元素捕获状态未知。true表示元素可以捕获；false表示不能被捕获。

 

该属性用在拖拽上。类似于HTML5中的draggable属性。

aria-haspopup

字符串。true表示点击的时候会出现菜单或是浮动元素； false表示没有pop-up效果。

<ul role="menubar">

<li role="menuitem" tabindex="0" aria-haspopup="true">水果

<ul role="menu" aria-hidden="true">

<li role="menuitemradio" tabindex="-1" aria-checked="true">苹果</li>

 

aria-label

用于提示标签信息

情况一:

<input / >

情况二:

<input aria-label = "提示内容" />

情况三:

<input aria-label = "提示内容" value="编辑内容" />

情况四：

<input type="checkbox" aria-label="一周内记住登录账号" />

<span>一周内记住登录账号</span>

input标签可通过Tab键进行聚焦，如情况一，读屏软件提示:可编辑文本；

若在input标签中加入aria-label，如情况二，读屏软件提示:提示内容可编辑文本

若在input标签中同时加入aria-label和value，如情况三，读屏软件提示:提示内容可编辑文本编辑内容

form表单中如何存在情况四的不规范的复选框情况，也可以使用aria-label标签

aria-labelledby

多用于绑定id，提示标签信息

<div aria-labelledby="title" role="alertdialog" tabindex="0">

<h3 id="title">标题</h3>

</div>

role="alertdialog"表明该div是一个对话框，div标签中的aria-labelledby与h3标签中的id保存一致，这样就可以提示div标签的信息，读屏软件提示:标题对话框

aria-level

数值。表示等级

<div aria-level="2">次标题</div>

 

HTML类似于<h2>标题</h2>

aria-live

字符串。可选值有：off, polite, assertive, rude。默认为off, 表示不宣布更新；polite表示只有用户闲时宣布；assertive表示尽快对用户宣布；rude表示即时提醒用户，必要的时候甚至中断用户。

<div role="heading" aria-live="assertive" aria-atomic="true">2012年3月</div>

绝大多数的更新应该在用户闲暇的时候告知，即时提示对用户是一种干扰。如果希望内容完全更新后再提示，可以使用上面提到的aria-busy.

上面的HTML为时间选择控件的年月标题部分，aria-live="assertive"表示的是当用户选择了新的时间的时候，尽快通知用户时间发生了变更。

aria-multiselectable

字符串。表示是否可多选。默认为false, 表示一次只能选择一个项。true表示一次可以选择多个项

 

例如手风琴展开收起效果，我们可以使用aria-multiselectable来告知辅助设备，一次可以展开多个项还是只有一个展开。

aria-owns

字符串。值为目标元素id

<input type="text" tabindex="0" role="combobox" aria-autocomplete="inline" aria-owns="cb1-list" />

<ul id="cb1-list" tabindex="-1" role="listbox" aria-expanded="true">

<li id="cb1-opt1" role="option">苹果</li>

<li id="cb1-opt2" role="option">梨子</li>

<li id="cb1-opt3" role="option">香蕉</li>

</ul>

aria-owns表示元素所拥有的，这里这里的文本框拥有其对应的下拉列表。

aria-posinset

数值。表示当前位置

 

用在设置和获取一个集合内某项的当前位置。

aria-readonly

字符串。表示是否只读。默认为false, 表示元素值可以被修改；true表示元素指不能被改变。

<table role="grid" aria-labelledby="grid1_label" aria-readonly="true">

<caption id="grid1_label">水果</caption>

 

aria-relevant

字符串。表示区域内哪些操作行为需要做出反应。可选值有：additions, removals, text, all，可以空格分隔多个一起显示. additions表示新增节点的时候做出反应；removals表示删除节点时重要操作；text表示文本改变是值得重视的；all等同于同时使用上面三个属性值

<div role="log" aria-atomic="false" aria-relevant="additions">内容</div>

HTML表示当日志内容有添加的时候做出反应。

aria-required

字符串。元素值是否必需。默认为false, 表示元素值可以为空；true表示元素值是必需的

<div class="text">

<label id="name_label" for="name">姓名: </label>

<input type="text" id="name" name="name"aria-labelledby="name_label"aria-describedby="tip" aria-required="false" />

<div id="tip" role="tooltip" aria-hidden="true">内容</div>

</div>

多半用在表单控件中。对应HTML5中required属性。

aria-secret

字符串。表示机密状态

 

 

aria-setsize

数值。设置的尺寸大小值

 

 

aria-sort

字符串。表示表格或格栅中的项是以升序排列还是降序排列。可选值：ascending(↑), 

descending(↓), none, other.

 

Widget组件应用属性。

aria-valuemax

数值。表允许的最大值

<div class="slider">

<img aria-valuenow="45" aria-valuemax="100" aria-valuemin="0" role="slider" src="slider_control.png" />

<div role="presentation" tabindex="0">45</div>

</div>

用在范围组件上。对应于HTML5中的max属性。

aria-valuemin

数值。表允许的最小值

<div class="slider">

<img aria-valuenow="45" aria-valuemax="100" aria-valuemin="0" role="slider" src="slider_control.png" />

<div role="presentation" tabindex="0">45</div>

</div>

用在范围组件上。对应于HTML5中的min属性。

aria-valuenow

数值。表示当前值

<div class="slider">

<img aria-valuenow="45" aria-valuemax="100" aria-valuemin="0" role="slider" src="slider_control.png" />

<div role="presentation" tabindex="0">45</div>

</div>

用在范围组件上。对应于value属性。

aria-valuetext

字符串。定义等同于aria-valuenow人可读的文本

 

用在范围组件上。

 

六、无障碍网页ARIA状态值示意及说明表

ARIA状态值示意及说明表

ARIA状态值

含义

Html示例

示例说明

aria-checked

字符串。表示检查的状态。true表示元素被选择；false表示元素未被选择；mixed表示元素同时有选择和未选择状态

<ul role="radiogroup">

<li tabindex="0" role="radio" aria-checked="false">A选项</li>

<li tabindex="0" role="radio" aria-checked="true">B选项</li>

<li tabindex="0" role="radio" aria-checked="false">C选项</li>

</ul>

该属性用来表明用户是否选择了某些项。

aria-disabled

字符串。表禁用状态，true表示当前是非激活状态；false表示清除非激活状态

<div role="button" tabindex="0" title="添加个姑娘" aria-pressed="false"

 aria-disabled="false">添加</div>

对应单复选框等控件的disabled属性，一般用在自定义模拟控件中。

aria-expanded

字符串。表示展开状态。默认为undefined, 表示当前展开状态未知。其它可选值：true表示元素是展开的；false表示元素不是展开的

<input type="text" tabindex="0" role="combobox" aria-autocomplete="inline" aria-owns="cb1-list" />

<ul id="cb1-list" tabindex="-1" role="listbox" aria-expanded="true">

<li id="cb1-opt1" role="option">苹果</li>

<li id="cb1-opt2" role="option">梨子</li>

<li id="cb1-opt3" role="option">香蕉</li>

</ul>

在手风琴交互效果中标示展开与否的状态。该属性对应HTML5的open属性。

aria-hidden

字符串。可选值为true和false, true表示元素隐藏(不可见)，false表示元素可见

<ul role="menubar">

<li role="menuitem" tabindex="0" aria-haspopup="true">水果

<ul role="menu" aria-hidden="true">

<li role="menuitemradio" tabindex="-1" aria-checked="true">苹果</li>

该属性使用非常普遍。几乎所有涉及到显示与隐藏这类交互或没有交互的地方都可以应用该属性。左边的示例HTML代码来自进度条进度值显示的div, 当前aria-hidden为false, 表示该进度值是可见的。

aria-invalid

字符串。表示元素值是否错误的。默认为false,表示是OK的，如果为true, 则表示值验证不通过

<input type="text" size="3" aria-labelledby="valid" aria-invalid="false" />

 

 

aria-pressed

字符串。表示按下的状态，可选值有：true, false, mixed, undfined.默认为undfined, 表示按下状态未知；true表示元素往下（按钮按下）；false表示元素抬起；mixed表示元素同时有按下和没有按下的状态

<div role="button" tabindex="0" title="添加个内容" aria-pressed="false"

 aria-disabled="false">添加</div>

HTML表示按钮已经按下，同时处于禁用状态。

aria-selected

字符串。表示选择状态。可选值有：true, false, undefined. 默认为undefined，表示元素选择状态未知。true表示元素已选择；false表示未被选中。

<ul role="tablist">

<li aria-selected="true" role="tab" tabindex="0">苹果</li>

<li role="tab" aria-selected="false" tabindex="-1">梨子</li>

<li role="tab" aria-selected="false" tabindex="-1">香蕉</li>

<li role="tab" aria-selected="false" tabindex="-1">西瓜</li>

</ul>

元素被选中表明其处于某种交互之中，因此选中元素很可能处于focus焦点获取状态。

 

资料可参考网页；

(1)http://www.zhangxinxu.com/wordpress/2012/03/wai-aria-%E6%97%A0%E9%9A%9C%E7%A2%8D%E9%98%85%E8%AF%BB/#ariaAttr

(2)http://www.alloyteam.com/2012/10/how-to-develop-accessible-web-site-application/

(3)http://zzc1684.iteye.com/blog/2218090

posted @ 2017-09-15 10:10  陈小银  阅读(1172)  评论(0)  编辑  收藏  举报