其他分享
首页 > 其他分享> > WAI-ARIA无障碍网页资料

WAI-ARIA无障碍网页资料

作者：互联网

西门小白菜 我很骄傲，因为我是小白菜一枚！

WAI-ARIA无障碍网页资料

一、ARIA是啥？

     WAI-ARIA指无障碍网页应用。主要针对的是视觉缺陷，失聪，行动不便的残疾人以及假装残疾的测试人员。尤其像盲人，眼睛看不到，其浏览网页则需要借助辅助设备，如屏幕阅读器，屏幕阅读机可以大声朗读或者输出盲文。而ARIA就是可以让屏幕阅读器准确识别网页中的内容，变化，状态的技术规范，可以让盲人这类用户也能无障碍阅读！

     虽然HTML5的出现大大增强了网页的可访问性和无障碍阅读，但是，其不是万能的，例如无法让盲人知道模拟控件的类型等。所以ARIA才显得更加重要。

    其次，ARIA规范一直在更新维护，浏览器方面IE8+以及其他所有现代浏览器都都已支持ARIA, 几乎可以说是全方位支持。流行的JavaScript库jQuery, 以及衍生的jQuery Mobile早已支持了ARIA，国内知名JavaScript库kissy也在11年支持了ARIA并在实际项目中使用了。

二、实际应用的例子

      本例来自淘宝首页，示例对象见下截图（淘宝网右上角选项卡）：

                 

       大家主要到这个部分的地方，F12开启开发人员模式，可以发现，后台有一行代码，如下：

                  

       这个就是ARIA在现实应用的例子。

三、属性

       以下是整理后的：ARIA属性值表、ARIA属性表、ARIA状态属性表。

     （1）、  ARIA属性表：

                                                                                                        ARIA Roles值示意及说明表

role属性值 含义 HTML示意 说明
alert 警告  alert 例子代码

 

 例如ajax操作返回错误信息的div标签。
alertdialog 表示警告弹出框  alertdialog例子代码

 

 
 application  表示应用    application例子代码

 

  例如自定义的时间选择器。
button 表示按钮  button例子代码

 

 就是一个button
checkbox 表示复选框  View Code

 

 
 combobox  表示下拉列表框    View Code

 

  

 
grid 表示网格  View Code

 

 
 gridcell  表示网格单元    View Code

 

  类似于table & table-cell
group 表示组合并  View Code

 

 
 heading  表示应用程序标题头    View Code

 

  

 
 listbox  表示列表框    View Code

 

  

 
log 表示日志记录  View Code

 

 类似三国杀右侧记录战事区域；或是比赛文字直播记录区域
menu 表示菜单  View Code

 

  

 
 menubar  表示菜单栏    View Code

 

  

 
 menuitem  表示菜单项    View Code

 

  

 
menuitemcheckbox 表示可复选的菜单项  View Code

 

 
 menuitemradio  表示只能单选的菜单项    View Code

 

  

 
option 表示选项  View Code

 

 
 presentation  表示称述    View Code

 

  

 
 progressbar  表示进度条    View Code

 

  

 
radio 表示单选  View Code

 

 
 radiogroup  表示单选组    View Code

 

  

 
 region  表示区域    View Code

 

  

 
 row  表示行    View Code

 

  用在表格模拟的行列表上，对应table下面的tr标签。
separator 表示分隔  View Code

 

 
 slider  表示滑动条    View Code

 

  

 
 spinbutton  表示微调    View Code

 

  

 
 tab  表示标签    View Code

 

  

 
 tablist  表示标签列表    View Code

 

  

 
tabpanel 表示标签面板  View Code

 

 
 timer  表示计数    View Code

 

  模拟计数器，使用在动态显示规律数值变化的地方
 toolbar  表示工具栏    View Code

 

  左边HTML表示一个剪切，复制，粘贴三功能在一起的工具栏。
 tooltip  表示提示文本    View Code

 

  

 
tree 表示树形  View Code

 

 效果见下面treeitem中的图。
treeitem 表示树结构选项  View Code

 

 

     

（2）、  ARIA属性值：

                                                                                                        ARIA  属性值示意及说明表

属性名 属性值 HTML代码示例 说明
 aria-activedescendant  字符串。表示后代元素的id值。    View Code

 

 aria-activedescendant 属性定义了当

工具栏获取焦点时，哪一个工具栏的子控

件获取了焦点。在此HTML示例中，工具

栏的第一个控件（拥有id“button1″）是

能获取焦点的子控件。
 aria-atomic

 字符串。表示区域内容是否完整

播报。值可以为true和false。当

为true时，表示辅助设备需要把

整个区域内容都通报给使用者；

如果为false则表示只需要通报

修改的部分。

    View Code

 

 还是这个时间选择器年月标题的例子。这

里的aria-atomic为true则表示当时间改变

的时候，这里的年月日期要完整播放，不

要只改了月份就只报月份内容。
 aria-autocomplete

 字符串。表示用户的文本框的

自动提示是否提供。可选值有：

inline, list, both, none.

    View Code

 

 目前，该属性对于inline和list两个值

的含义暂不清楚。不过可以确定的是该

属性对应HTML5中autocomplete属性。

需要注意的是，如果aria-autocomplete

="list", aria-autocomplete="inline"

或aria-autocomplete="both"被设置在

支持autocomplete的元素上，则

autocomplete的属性值需要设成

"on", 如果是aria-autocomplete

="none"，则需要设成"off"
aria-busy

字符串。表当前区域的忙碌状

态。默认为false, 表清除busy

状态；可选为true, 表该区域

正在加载；或为error, 表示该

区域验证无效。

  View Code

 

如果某个区域内(如这里ul)有多个地

方需要修改，需要全部修改完毕再通

知使用者的话，就可以先将aria-busy

设为true, 等到全部内容更新完毕后

再设成false. 该属性可以避免辅助

工具在区域内容更新完毕前不断即

时提醒使用者。
aria-controls

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

列表。

  View Code

 

该属性定义了元素间不能通过文档

结构决定的关联关系。ariaControls

属性主要被role为group, region,

或widget的元素使用
aria-describedby

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

列表。

  View Code

 

同样的，该属性定义了文档结构表

现不出来的的元素间的相互关联性。

该属性旨在通过标签提供更多用户

可能需要的信息。如果指定了不只

一个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效果。

    View Code

 

  

 
 aria-label  字符串。    定义一个字符串值标记当前元素。
 aria-labelledby  字符串。空格分隔的id们    View Code

 

 aria-labelledby一般用在区域元素上，

对于的id一般为对应的标题或是标签

元素的id.关系型属性。
aria-level 数值。表示等级。  View Code

 

 上面的HTML类似于<h2>次标题</h2>
aria-live

字符串。可选值有：off,

 polite, assertive, rude。

默认为off, 表示不宣布更新；

polite表示只有用户闲时宣布；

assertive表示尽快对用户宣布；

rude表示即时提醒用户，必

要的时候甚至中断用户。

  View Code

 

绝大多数的更新应该在用户闲

暇的时候告知，即时提示对用

户是一种干扰。如果希望内容

完全更新后再提示，可以使用

上面提到的aria-busy.

左侧的HTML为时间选择控件

的年月标题部分，aria-live=

"assertive"表示的是当用户

选择了新的时间的时候，尽

快通知用户时间发生了变更。
aria-multiselectable

字符串。表示是否可多选。

默认为false, 表示一次只

能选择一个项。true表示

一次可以选择多个项。

  

例如手风琴展开收起效果，

我们可以使用aria-

multiselectable来告

知辅助设备，一次可以

展开多个项还是只有一个展开。
aria-owns 字符串。值为目标元素id.  View Code

 

 
 aria-posinset  数值。表示当前位置    用在设置和获取一个集合内某项的当前位置
 aria-readonly  

字符串。表示是否只读。

默认为false, 表示元素

值可以被修改；true

表示元素指不能被改变。
   View Code

 

  

 
 aria-relevant

 字符串。表示区域内哪

些操作行为需要做出反应。

可选值有：additions, 

removals, text, all，

可以空格分隔多个一起

显示. additions表示新

增节点的时候做出反应；

removals表示删除节点

时重要操作；text表示

文本改变是值得重视的；

all等同于同时使用上

面三个属性值。

    View Code

 

  左边的HTML表示当日志内容有添加的时候做出反应。
 aria-required

 字符串。元素值是否必

需。默认为false, 表示

元素值可以为空；true

表示元素值是必需的。

    View Code

 

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

字符串。表示机密状态。

   具体含义不详
aria-setsize 数值。设置的尺寸大小值。   顾名思意
aria-sort

字符串。表示表格或格

栅中的项是以升序排列

还是降序排列。可选值：

ascending(↑),

descending(↓), none, 

other.
  Widget组件应用属性。
aria-valuemax 数值。表允许的最大值。  View Code

 

用在范围组件上。对应

于HTML5中的max属性。
aria-valuemin 数值。表示允许的最小值。  View Code

 

用在范围组件上。对应

于HTML5中的min属性。
aria-valuenow 数值。表示当前值。  View Code

 

用在范围组件上。对

应于value属性。
aria-valuetext

字符串。定义等同于

aria-valuenow人可读

的文本。

   用在范围组件上。

      

 

（3）、  ARIA属性值：

                                                                                                        ARIA  状态值示意及说明表

属性状态 属性值 HTML示意 说明
aria-checked

字符串。表示检查的状态。

true表示元素被选择；

false表示元素未被选择；

mixed表示元素同时有选

择和为选择状态。

  View Code

 

 

该属性用来表明用户是

否选择了某些项（如上边

这个截图所示）。
 aria-disabled

 字符串。表禁用状态，

true表示当前是非激活

状态；false表示清除

非激活状态。

    View Code

 

 对应单复选框等控件的

disabled属性，一般用在

自定义模拟控件中。
 aria-expanded

 字符串。表示展开状态。

默认为undefined, 表示

当前展开状态未知。

其它可选值：true

表示元素是展开的；

false表示元素不是展开的。

    View Code

 

  

 

例如在手风琴交互效果中标示展开

与否的状态。该属性对应HTML5

的open属性。
aria-hidden

字符串。可选值为true和

false, true表示元素隐藏

(不可见)，false表示元素

可见。

  View Code

 

该属性使用非常普遍。几乎所

有涉及到显示与隐藏这类交互

或没有交互的地方都可以应用

该属性。左边的示例HTML代

码来自进度条进度值显示的

div, 当前aria-hidden为false,

表示该进度值是可见的。
aria-invalid

字符串。表示元素值是否

错误的。默认为false,

表示是OK的，如果为true,

则表示值验证不通过。

  View Code

 

  
aria-pressed

字符串。表示按下的状态，

可选值有：true, false,

 mixed, undfined.默认为

undfined, 表示按下状态

未知；true表示元素往下

（按钮按下）；false表

示元素抬起；mixed表示

元素同时有按下和没有

按下的状态。

  View Code

 

左边HTML表示按钮已经按

下，同时处于禁用状态。
aria-selected

字符串。表示选择状态。

可选值有：true, false,

 undefined. 默认为

undefined，表示元素

选择状态未知。true

表示元素已选择；

false表示未被选中。

  View Code

 

 

                    注意：为了跨浏览器兼容，总是使用WAI-ARIA属性解析来访问和修改ARIA属性，例如object.setAttribute("aria-valuenow", newValue).

 四、附录

        ARIA属性关系图：

        

        

 

标签：表示,Code,WAI,aria,ARIA,无障碍,属性,View
来源： https://www.cnblogs.com/proving/p/10364489.html