张赐荣
张赐荣

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

    用於提示标签资讯

    情况一:

    情况二:

    情况三:

    情况四：

    一周内记住登录帐号

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

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

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

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

    情况一：

    情况二：

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

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

    aria-labelledby

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

    标题

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

    role

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

    情况一:

    百度

    情况二：

    百度

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

    a标签同时加上href和button

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

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

    情况一:

    • A选项

    • B选项

    • C选项

    情况二:

  • A选项

    • 情况一是选项按钮例子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编辑文本

    情况一:

    情况二:

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

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

    注意:不能用name进行代替

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

    alt

    alt一般运用於img标签中

    情况一：

    小猫图片

    情况二:

    小猫图片

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

    情况二:

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

    onpicked

    实现日期选择联动

    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使用规则二

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

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

    不要这样做：

    标题按钮

    建议这样做：

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

    标题按钮

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

    （3）ARIA使用规则三

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

    （4）ARIA使用规则四

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

    不要这样做:

    也不要这样做:

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

    （5）ARIA使用规则五

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

    例如:input type="text"有一个可见的

    user name

    或者:

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

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

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

    Role值

    含义

    Html示例

    示例说明

    alert

    表示警告

    情况一:

    内容

    情况二:

    内容

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

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

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

    alertdialog

    表示对话方块

    情况一：

    内容

    情况二：

    内容

    情况三:

    弹出框

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

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

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

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

    application

    表示主视窗(应用)

    情况一：

    内容

    情况二：

    内容

    情况三:

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

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

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

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

    button

    表示按钮

    情况一：

    标题

    情况二:

    标题

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

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

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

    checkbox

    表示核取方块

    情况一：

    内容

    情况二:

    内容

    情况三:

    • 水果

    • 苹果

    • 梨子

    • 香蕉

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

    role=”group”表示组

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

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

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

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

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

    combobox

    表示下拉式列示方块

    情况一：

    内容

    情况二:

    • 苹果

    • 梨子

    • 香蕉

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

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

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

    role=”listbox”表示清单方块

    role=”option”表示选项

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

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

    grid

    表示表格(网格)

    情况一：

    内容

    情况二:

    内容

    情况三:

    水果
    苹果 梨子 香蕉

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

    aria-readonly唯读，默认为false

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

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

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

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

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

    gridcell

    表示储存格(网格单元)

    情况一：

    内容

    情况二:

    内容

    情况三:

    苹果 梨子 香蕉

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

    aria-readonly唯读，默认为false

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

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

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

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

    role=”row”表示行

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

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

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

    group

    表示分组(组合)

    情况一：

    内容

    情况二:

    内容

    情况三:

    • 水果

    • 苹果

    • 梨子

    • 香蕉

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

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

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

    role="checkbox"表示核取方块

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

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

    情况三:group常用於分组

    heading

    表示应用程式标题头

    2012年3月

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

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

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

    listbox

    表示列表(清单方块)

    情况一:

    内容

    情况二:

    内容

    情况三:

    • 苹果

    • 梨子

    • 香蕉

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

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

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

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

    role=”option”表示选项

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

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

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

    log

    表示用户端(日志记录)

    情况一:

    内容

    情况二:

    内容

    情况三:

    内容

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

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

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

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

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

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

    menu

    表示菜单

    • 水果

    • 风景

    • 汽车

    • 房屋

    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

    表示功能表列

    • 水果

    • 风景

    • 汽车

    • 房屋

    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

    表示功能表项目

    • 水果

    • 风景

    • 汽车

    • 房屋

    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

    表示可复选的功能表项目

    • 水果

    • 风景

    • 汽车

    • 房屋

    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

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

    • 水果

    • 风景

    • 汽车

    • 房屋

    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

    表示选项

    • 苹果

    • 梨子

    • 香蕉

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

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

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

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

    role=”listbox”:清单方块

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

    presentation

    表示称述

    45

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

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

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

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

    role="slider":滑动条

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

    progressbar

    表示进度条

    23%

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

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

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

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

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

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

    radio

    表示单选

    • A选项

    • B选项

    • C选项

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

    role="radiogroup":单选组

    aria-checked="false":未选中

    aria-checked="true":已选中

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

    radiogroup

    表示单选组

    • A选项

    • B选项

    • C选项

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

    role="radio":单选

    aria-checked="false":未选中

    aria-checked="true":已选中

    region

    表示区域

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

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

    row

    表示行

    苹果 梨子 香蕉

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

    aria-readonly唯读，默认为false

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

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

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

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

    role=”grid”表示网格

    role=”gridcell”表示网格单元

    row用在表格类比的行清单上，对应table下面的tr标签

    separator

    表示分隔

    • 水果

    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

    表示滑动条

    45

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

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

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

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

    role="presentation":称述

    spinbutton

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

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

    45

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

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

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

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

    屏幕阅读器提示微调下拉式列示方块45

    tab

    表示标签

    • 苹果

    • 梨子

    • 香蕉

    • 西瓜

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

    role="tablist":标签列表

    aria-selected="true"已选中

    aria-selected="false"未选中

    tab主要应用於选项卡

    tablist

    表示标签列表

    • 苹果

    • 梨子

    • 香蕉

    • 西瓜

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

    role="tab":标签

    aria-selected="true"已选中

    aria-selected="false"未选中

    tab主要应用於选项卡组

    tabpanel

    表示标签面板

      <-- 选项卡 -->

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

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

    timer

    表示计数

    0

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

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

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

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

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

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

    屏幕阅读器提示:时钟

    toolbar

    表示工具列

    情况一:

    内容

    情况二:

    cut

    copy

    paste

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

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

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

    tooltip

    表示提示文本

    情况一:

    内容

    情况二:

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

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

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

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

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

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

    tree

    表示树形

    情况一:

    内容

    情况二:

    • 展开水果

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

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

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

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

      role="group":组；

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

      treeitem

      表示树结构选项

      • 展开水果

        • 苹果

        • 梨子

        • 香蕉

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

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

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

      role="tree":表示树形；

      role="group":组；

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

      ARIA属性值示意及说明表

      ARIA属性值

      含义

      Html示例

      示例说明

      aria-activedescendant

      表示後代元素的id值。

      cut

      copy

      paste

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

      aria-atomic

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

      2012年 3月

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

      aria-autocomplete

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

      both, none

      • 苹果

      • 梨子

      • 香蕉

      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属性值清单。

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

        请选择

        该属性定义了元素间不能通过文档结构决定的关联关系。ariaControls属性主要被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属性。

        aria-haspopup

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

        • 水果