HTML5 无障碍网页设计开发指南

无障碍网页标准规范

张赐荣

一、无障碍网页

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属性。

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

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

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

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

情况一:

情况二:

情况三:

情况四:

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

只有加上href才能进行聚焦如情况二，聚焦时会预设读出a标签里面的内容，并可以通过Enter键进入相应的连结；

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

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

情况一:

情况二：

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

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

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

aria-label

用於提示标签资讯

情况一:

情况二:

情况三:

情况四：

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

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

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

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

form表单中如何存在情况四的不规范的核取方块情况，也可以使用aria-label标签

情况一：

情况二：

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

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

aria-labelledby

多用於绑定id，提示标签资讯

</div>

role="alertdialog"表明该div是一个对话方块，div标签中的aria-labelledby与h3标签中的id保存一致，这样就可以提示div标签的资讯，屏幕阅读器提示:标题对话方块

role

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

情况一:

情况二：

预设情况下，a标签加上href後如情况一，屏幕阅读器提示:百度连结已遍历；

a标签同时加上href和button

屏幕阅读器提示:百度按下按钮

</li>

</li>

</li>

</ul>

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

情况一:

</ul>

情况二:

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

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

role="alertdialog"表明div是一个对话方块，屏幕阅读器提示:对话方块

for、id(联动操作)

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

情况一:

<form>

</form>

情况二:

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

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

注意:不能用name进行代替

情况二：在情况一的基础上可以加上一个title的属性，主要是用於提示使用者的内容，如该文本编辑方块是一个必填项。屏幕阅读器提示:用户名编辑文本必填项

alt

alt一般运用於img标签中

情况一：

情况二:

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

情况二:

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

onpicked

实现日期选择联动

<input id="begintime"onFocus="

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

至

$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>

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

如果使用一个非交互的元素做为一个交互的元素，那麽开发人员必须使用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" />

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

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

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

Role值

含义

Html示例

示例说明

alert

表示警告

情况一:

情况二:

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

情况一屏幕阅读器提示:警告

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

alertdialog

表示对话方块

情况一：

情况二：

情况三:

</div>

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

情况一屏幕阅读器提示:对话方块

情况二:加入title可以提高标签的可读性，屏幕阅读器提示:无障碍对话方块

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

application

表示主视窗(应用)

情况一：

情况二：

情况三:

<-- 时间选择控制项 -->

</div>

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

情况一屏幕阅读器提示:主窗口

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

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

button

表示按钮

情况一：

情况二:

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

情况一屏幕阅读器提示:标题按下按钮

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

checkbox

表示核取方块

情况一：

情况二:

情况三:

</ul>

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

role=”group”表示组

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

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

情况一屏幕阅读器提示:内容核取方块已选中

情况二:title应该学会巧用，否则会使屏幕阅读器读出的内容造成混乱现象，屏幕阅读器提示:内容核取方块已选中提示

情况三:checkbox常用於核取方块组，屏幕阅读器提示:水果核取方块未选中默认选中，苹果核取方块未选中......

combobox

表示下拉式列示方块

情况一：

情况二:

</ul>

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

aria-autocomplete="inline"用户的文字方块的自动提示支援提供

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

role=”listbox”表示清单方块

role=”option”表示选项

情况一屏幕阅读器提示:下拉式列示方块内容

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

grid

表示表格(网格)

情况一：

情况二:

情况三:

<thead>

<tr>

</tr>

</thead>

</table>

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

aria-readonly唯读，默认为false

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

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

情况一屏幕阅读器提示:表格

情况二:屏幕阅读器提示:无障碍表格必填项

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

gridcell

表示储存格(网格单元)

情况一：

情况二:

情况三:

</tr>

</table>

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

aria-readonly唯读，默认为false

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

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

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

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

role=”row”表示行

情况一屏幕阅读器提示:储存格

情况二:屏幕阅读器提示:无障碍储存格必填项

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

group

表示分组(组合)

情况一：

情况二:

情况三:

</ul>

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

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

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

role="checkbox"表示核取方块

情况一屏幕阅读器提示:分组

情况二:屏幕阅读器提示:无障碍分组必填项

情况三:group常用於分组

heading

表示应用程式标题头

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

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

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

listbox

表示列表(清单方块)

情况一:

情况二:

情况三:

</ul>

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

aria-autocomplete="inline"用户的文字方块的自动提示支援提供

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

role=”combobox”表示下拉式列示方块

role=”option”表示选项

情况一:屏幕阅读器提示:列表

情况二:屏幕阅读器提示:无障碍列表必填项

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

log

表示用户端(日志记录)

情况一:

情况二:

情况三:

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

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

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

情况一:屏幕阅读器提示:用户端

情况二:屏幕阅读器提示:无障碍用户端必填项

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

表示菜单

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

</ul>

</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

表示功能表列

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

</ul>

</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

表示功能表项目

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

</ul>

</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

表示可复选的功能表项目

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

</ul>

</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

表示只能单选的功能表项目

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

</ul>

</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

表示选项

</ul>

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

aria-autocomplete="inline"用户的文字方块的自动提示支援提供

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

role="combobox" :下拉式列示方块

role=”listbox”:清单方块

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

presentation

表示称述

</div>

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

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

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

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

role="slider":滑动条

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

progressbar

表示进度条

</div>

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

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

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

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

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

屏幕阅读器提示:进度栏0

radio

表示单选

</ul>

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

role="radiogroup":单选组

aria-checked="false":未选中

aria-checked="true":已选中

radio自订单选框控制项的时候使用

radiogroup

表示单选组

</ul>

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

role="radio":单选

aria-checked="false":未选中

aria-checked="true":已选中

region

表示区域

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

</div>

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

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

row

表示行

</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

表示分隔

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

</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>

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>

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

role="tablist":标签列表

aria-selected="true"已选中

aria-selected="false"未选中

tab主要应用於选项卡

tablist

表示标签列表

</ul>

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

role="tab":标签

aria-selected="true"已选中

aria-selected="false"未选中

tab主要应用於选项卡组

tabpanel

表示标签面板

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

</ul>

</div>

</div>

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

aria-labelledby:多用於绑定id，提示标签资讯；

timer

表示计数

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

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

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

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

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

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

屏幕阅读器提示:时钟

toolbar

表示工具列

情况一:

情况二:

</div>

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

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

情况一:屏幕阅读器提示:工具列

tooltip

表示提示文本

情况一:

情况二:

</div>

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

aria-labelledby:多用於绑定id，提示标签资讯；

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

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

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

情况一:屏幕阅读器提示:工具提示

tree

表示树形

情况一:

情况二:

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

</li>

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

</li>

</ul>

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

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

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

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

role="group":组；

情况一:屏幕阅读器提示:树示图

treeitem

表示树结构选项

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

</ul>

</li>

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

</li>

</ul>

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

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

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

role="tree":表示树形；

role="group":组；

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

ARIA属性值示意及说明表

ARIA属性值

含义

Html示例

示例说明

aria-activedescendant

表示後代元素的id值。

</div>

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

aria-atomic

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

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

aria-autocomplete

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

both, none

</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-busy设为true, 等到全部内容更新完毕後再设成false. 该属性可以避免辅助工具在区域内容更新完毕前不断即时提醒使用者。

aria-controls

字串。空格分隔的id属性值清单。

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

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

</div>

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

aria-describedby

字串。空格分隔的id属性值清单。

</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效果。

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

aria-label

用於提示标签资讯

情况一:

情况二:

情况三:

情况四：

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

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

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

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

form表单中如何存在情况四的不规范的核取方块情况，也可以使用aria-label标签

aria-labelledby

多用於绑定id，提示标签资讯

</div>

role="alertdialog"表明该div是一个对话方块，div标签中的aria-labelledby与h3标签中的id保存一致，这样就可以提示div标签的资讯，屏幕阅读器提示:标题对话方块

aria-level

数值。表示等级

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

aria-live

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

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

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

aria-multiselectable

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

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

aria-owns

字串。值为目标元素id

</ul>

aria-owns表示元素所拥有的，这里这里的文字方块拥有其对应的下拉清单。

aria-posinset

数值。表示当前位置

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

aria-readonly

字串。表示是否唯读。预设为false, 表示元素值可以被修改；true表示元素指不能被改变。

aria-relevant

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

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

aria-required

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

</div>

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

aria-secret

字串。表示机密状态

aria-setsize

数值。设置的尺寸大小值

aria-sort

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

descending(↓), none, other.

Widget元件应用属性。

aria-valuemax

数值。表允许的最大值

</div>

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

aria-valuemin

数值。表允许的最小值

</div>

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

aria-valuenow

数值。表示当前值

</div>

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

aria-valuetext

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

用在范围组件上。

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

ARIA状态值示意及说明表

ARIA状态值

含义

Html示例

示例说明

aria-checked

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

</ul>

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

aria-disabled

字串。表禁用状态，true表示当前是非启动状态；false表示清除非启动状态

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

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

对应单核取方块等控制项的disabled属性，一般用在自订类比控制项中。

aria-expanded

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

</ul>

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

aria-hidden

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

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

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

aria-invalid

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

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>

元素被选中表明其处於某种交互之中，因此选中元素很可能处於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

(4) https://prc.cx/web/archives/13.html

(5) Web内容无障碍指南 (WCAG) 2.1

HTML5 无障碍网页设计开发指南相关推荐

教你玩转HTML(html5)h5网页设计，网站开发-刘青-专题视频课程
教你玩转HTML(html5)h5网页设计,网站开发-54965人已学习课程介绍教你玩转HTML(html5)h5网页设计,网站开课程收益教你玩转HTML(html5) ...
无障碍网页设计（WCAG2.0）
无障碍化是指无论健全人还是残疾人,年轻人还是老年人都可以平等地获取互联网上的信息和服务.无障碍化网站建设不单可以增加网站的受益群体,更是一个有情怀.有担当的互联网企业的责任,也是一个互联网从业人员应该 ...
html5+css3网页设计与网站布局从新手到高手,HTML5+CSS3网页设计与网站布局从新手到高手...
HTML5+CSS3网页设计与网站布局从新手到高手语音编辑锁定讨论上传视频 <从新手到高手:HTML 5+CSS 3网页设计与网站布局从新手到高手>是2013年1月清华大学出版社 ...
《HTML5+CSS3网页设计入门必读》——2.8　转变（CH-CH变化）
本节书摘来自异步社区<HTML5+CSS3网页设计入门必读>一书中的第2章,第2.8节,作者: [英]Jeremy Keith , [美]Dan Cederholm 更多章节内容可以访问云 ...
《HTML5+CSS3网页设计入门必读》——第1章　标记简史1.1　从IETF到W3C：HTML 4的诞生过程...
本节书摘来自异步社区<HTML5+CSS3网页设计入门必读>一书中的第1章,第1.1节,作者: [英]Jeremy Keith , [美]Dan Cederholm 更多章节内容可以访问云 ...
HTML5汽车网页设计成品_学生DW汽车静态网页设计代做_web课程设计网页制作_宽屏大气汽车自驾游网站模板html源码...
HTML5汽车网页设计成品_学生DW汽车静态网页设计代做_web课程设计网页制作_宽屏大气汽车自驾游网站模板html源码临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大?HTML ...
HTML5汽车网页设计成品_学生DW汽车静态网页设计代做_web课程设计网页制作_宽屏大气汽车自驾游网站模板html源码
HTML5汽车网页设计成品_学生DW汽车静态网页设计代做_web课程设计网页制作_宽屏大气汽车自驾游网站模板html源码临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大?HTML ...
网页设计与制作html5教学目标,HTML5+CSS3网页设计与制作—教学大纲（10页）-原创力文档...
博学谷--让IT 教学更简单,让IT 学习更有效 <HTML5+CSS3 网页设计与制作>课程教学大纲 (课程英文名称) 课程编号: 学分:5 学分学时:74 学时 (其中:讲课学时 ...
《HTML5+CSS3网页设计入门必读》——1.7 使用FTP传输文件
本节书摘来自异步社区<HTML5+CSS3网页设计入门必读>一书中的第1章,第1.7节,作者: [美]Julie Meloni更多章节内容可以访问云栖社区"异步社区"公 ...

HTML5 无障碍网页设计开发指南

HTML5 无障碍网页设计开发指南相关推荐

最新文章

热门文章