办公地址

甘肃兰州市城关区焦家湾路260号天运小区A栋1002室

服务城市
中国
时间
周一 - 周五 9:00am-17:30pm
lzwd@gsidc.net.cn
24 X 7 在线服务

常见问题

ARIA无障碍网页应用属性

  • 发布时间：2024-11-25 15:53:37
  • 发布者：lzwd
  • 浏览：0次

ARIA是什么

WAI-ARIA指无障碍网页应用。主要针对的是视觉缺陷，失聪，行动不便的残疾人以及假装残疾的测试人员。尤其像视障，眼睛看不到，其浏览网页则需要借助辅助设备，如屏幕阅读器，屏幕阅读机可以大声朗读或者输出盲文。

而ARIA就是可以让屏幕阅读器准确识别网页中的内容，变化，状态的技术规范，可以让视障这类用户也能无障碍阅读！

为什么需要ARIA

  1. 让视障用户知道当前浏览区域就是网站主导航；

  2. 让视障用户知道点击某个按钮后出来的是弹框跳转；

  3. 让视障用户知道点击某个按钮后页面另外一个区域的文字发生了变化；

  4. 让视障用户知道您使用了li标签是用来模拟标准select控件；

  5. 让视障用户知道您模拟的select控件是单选呢还是可以多选，等等。

IE8+ 及其他所有浏览器，都已经全方位支持ARIA，真是可喜可贺！

ARIA role 属性值表

role属性值含义说明
role="alert"警告
role="alertdialog"警告框
role="application"应用
role="button"按钮
role="checkbox"复选框
role="grid"网格
role="gridcell"网格单元
role="group"组合
role="heading"应用程序标题
role="listbox"列表框
role="log"日志
role="menu"菜单
role="menubar"菜单栏
role="menuitem"菜单项
role="menuitemcheckbox"可复选的菜单项
role="menuitemradio"只能单选的菜单项
role="option"选项
role="presentation"陈述
role="progressbar"进度条
role="radio"单选
role="radiogroup"单选按钮组
role="region"区域
role="hui-row"行
role="separator"分割
role="hui-slider"滑动条
role="spinbutton"微调
role="tab"tab标签
role="tablist"标签列表
role="tabpanel"标签面板
role="timer"计数
role="toolbar"工具栏
role="tooltip"提示文本
role="tree"树形
role="treeitem"树结构选项

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 id="cb1-edit" class="cb_edit" type="text" tabindex="0" role="combobox" aria-autocomplete="inline" aria-owns="list" />    <ul id="list" tabindex="-1" role="listbox" aria-expanded="true"><li id="cb1-opt1" role="option">H-ui</li><li id="cb1-opt2" role="option">前端</li><li id="cb1-opt3" role="option">框架</li></ul>
目前，该属性对于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, 表示该区域验证无效。
<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属性值列表。
<ul role="group"><li role="checkbox" aria-checked="mixed" tabindex="0">所有姑娘</li>  <li role="checkbox" aria-checked="false" aria-describedby="desc1" tabindex="0">小龙女</li></ul><p id="desc1">杨幂饰演的穿越女王~~</p>
同样的，该属性定义了文档结构表现不出来的的元素间的相互关联性。该属性旨在通过标签提供更多用户可能需要的信息。如果指定了不只一个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" title="美女菜单"><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">baby</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>

aria-label字符串。
定义一个字符串值标记当前元素。
aria-labelledby字符串。空格分隔的id们
<div aria-labelledby="title" role="alertdialog"><h3 id="title">标题</h3></div>
aria-labelledby一般用在区域元素上，对于的id一般为对应的标题或是标签元素的id.关系型属性。
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 id="cb1-edit" class="cb_edit" type="text" tabindex=" role="combobox" aria-autocomplete="inline" aria-owns="list" /> <ul id="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">baby</li></ul>
aria-owns表示元素所拥有的，这里这里的文本框拥有其对应的下拉列表。

 

aria-posinset数值。表示当前位置。
用在设置和获取一个集合内某项的当前位置。
aria-readonly字符串。表示是否只读。默认为false, 表示元素值可以被修改；true表示元素指不能被改变。
<table id="grid1" role="grid" aria-labelledby="girl_label" aria-readonly="true"><caption id="girl_label">美女们</caption><tr><th id="grid1_q" tabindex="-1">小龙女</th><th id="grid1_j" tabindex="-1">辉哥</th><th id="grid1_h" tabindex="-1">baby</th></tr></table>

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="true" /><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="hui-slider"><img aria-valuenow="45" aria-valuemax="100" aria-valuemin="0" role="hui-slider" src="slider_control.png" /><div role="presentation" tabindex="0">45</div></div>
用在范围组件上。对应于HTML5中的max属性。
aria-valuemin数值。表示允许的最小值。
<div class="hui-slider"><img aria-valuenow="45" aria-valuemax="100" aria-valuemin="0 role="hui-slider" src="slider_control.png" /><div role="presentation" tabindex="0">45</div></div>
用在范围组件上。对应于HTML5中的min属性。
aria-valuenow数值。表示当前值。
<div class="hui-slider"><img aria-valuenow="45" aria-valuemax="100" aria-valuemin="0"role="hui-slider" src="slider_control.png" /><div role="presentation" tabindex="0">45</div></div>
用在范围组件上。对应于value属性。
aria-valuetext字符串。定义等同于aria-valuenow人可读的文本。
用在范围组件上。

ARIA 状态属性表

属性状态属性值HTML示意说明
aria-checked字符串。表示检查的状态。true表示元素被选择；false表示元素未被选择；mixed表示元素同时有选择和为选择状态。
<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">baby</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表示元素不是展开的。
<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><ul class="controlList"><li><input id="p1_1" type="radio" name="girl" value="q" /><label for="p1_1">小龙女</label></li><li><input id="p1_2" type="radio" name="girl" value="j" checked /><label for="p1_2">辉哥</label></li><li><input id="p1_3" type="radio" name="girl" value="h" /><label for="p1_3">baby</label></li></ul></div>
例如在手风琴交互效果中标示展开与否的状态。该属性对应HTML5的open属性。
aria-hidden字符串。可选值为true和false, true表示元素隐藏(不可见)，false表示元素可见。
<div aria-hidden="false">23%</div>
该属性使用非常普遍。几乎所有涉及到显示与隐藏这类交互或没有交互的地方都可以应用该属性。左边的示例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表示未被选中。
<div class="tabpanel"><ul class="tablist" role="tablist"><li role="tab" aria-selected="true" 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></div>

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


收藏
0
有帮助
0
没帮助
0
打赏
0
ARIA 无障碍 网页 应用 属性 ARIA 无障碍 网页 应用 属性
把此文扫码分享到手机：
上一篇：
键盘按钮keycode
下一篇：
css 命名规范