无障碍开发（三）之ARIA aria-***属性值
2024-06-10 17:53:59
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示例中，工具栏的第一个控件（拥有 |
| 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">晴川</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, 依次表示：复制，移动，参照，执行，弹出以及没有效果。
|
<-- 暂无HTML示例 --> |
该属性用在拖拽上。 |
| aria-flowto |
字符串。空格分隔的id属性值列表。
|
<-- 暂无HTML示例 --> |
如果该属性值对应的是单独的id, 辅助技术会恢复目标元素的阅读；如果对应的是多个id, 则辅助技术会让用户去选择、导航到目标元素。
|
| aria-grabbed |
字符串。拖拽中元素的捕获状态。可选值有:true, false, undefined. 默认为undefined，表示元素捕获状态未知。true表示元素可以捕获；false表示不能被捕获。
|
<-- 暂无HTML示例 --> |
该属性用在拖拽上。类似于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">黄小仙</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 | 字符串。 |
<-- 暂无HTML示例 --> |
定义一个字符串值标记当前元素。 |
| 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-multiselectable |
字符串。表示是否可多选。默认为false, 表示一次只能选择一个项。true表示一次可以选择多个项。
|
<-- 暂无HTML示例 --> |
例如手风琴展开收起效果，我们可以使用aria-multiselectable来告知辅助设备，一次可以展开多个项还是只有一个展开。
|
| aria-owns |
字符串。值为目标元素id.
|
<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">晴川</li><li id="cb1-opt2" role="option">静秋</li><li id="cb1-opt3" role="option">黄小仙</li> </ul> |
|
| aria-posinset | 数值。表示当前位置。 |
<-- 暂无HTML示例 --> |
用在设置和获取一个集合内某项的当前位置。 |
| 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">黄小仙</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 | 字符串。表示机密状态。 |
<-- 暂无HTML示例 --> |
具体含义不详 |
| aria-setsize | 数值。设置的尺寸大小值。 |
<-- 暂无HTML示例 --> |
顾名思意 |
| aria-sort |
字符串。表示表格或格栅中的项是以升序排列还是降序排列。可选值：ascending(↑), descending(↓), none, other.
|
<-- 暂无HTML示例 --> |
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人可读的文本。
|
<-- 暂无HTML示例 --> |
用在范围组件上。 |
转载于:https://www.cnblogs.com/kunmomo/p/11568694.html
无障碍开发（三）之ARIA aria-***属性值相关推荐
- 属性值动态调整_【第1603期】CSS 自定义属性：使用篇
前言 好的文章值得多看两眼.今日早读文章由@kmokidd翻译分享. 正文从这开始-- 可读性更高的 CSS 代码 在读过 [第1596期]CSS 自定义属性:基础篇后,我们可以开始着手优化代码了,通 ...
- html里background颜色属性,background属性值
js怎么获取css样式里的background属性值呢? ss文件中如何得到某个属性值: 一.getComputedStyle是一个可以获取当前元素所有最终使用的CSS属性值, 返回的是一个CSS样式 ...
- 无障碍开发（二）之ARIA role属性
role属性 role属性值 含义 HTML示意 说明 alert 表示警告 <p id="ajax_error_alert" role="alert"& ...
- 无障碍开发（六）之ARIA在HTML中的使用规则
ARIA使用规则一 如果你使用的元素( HTML5 )具有语义化,应该使用这些元素,而不应该重新定义一个添加ARIA的角色.状态或属性的元素. 浏览器的语义化标签已经默认隐含ARIA语义,像nav,a ...
- 无障碍开发（五）之设置获取无障碍属性值
设置获取无障碍属性值 为了跨浏览器兼容,总是使用WAI-ARIA属性解析来访问和修改ARIA属性,例如object.setAttribute("aria-valuenow", ne ...
- 无障碍开发（四）之ARIA aria-***状态值
aria-***状态值 属性状态 属性值 HTML示意 说明 aria-checked 字符串.表示检查的状态.true表示元素被选择:false表示元素未被选择:mixed表示元素同时有选择和为选择 ...
- java socket中属性详解_前端开发：关于Vue组件中的data属性值是函数而不是对象的详解...
最近在搞关于前端开发的基础知识归纳,发现了不少经典知识点,那么本篇博文就来分享一个经典的知识点:Vue组件中的data属性值为什么是函数而不是对象.首先来了解一下Vue组件的使用理念:在Vue组件使用 ...
- Angular开发(三)-关于属性绑定与事件绑定
一.新建一个项目工程并创建一个组件bind,如果还有不知道怎么创建angular项目的请先查看Angular2从环境搭建到开发建议直接用angular-cli创建 二.数据绑定 插值的方式[比较常见] ...
- 微信小程序js数组初始化_微信小程序开发之改变data中数组或对象的某一属性值...
前言:在小程序的开发中,我们在view中便利data中数组或对象时,很多情况下需要在js中动态改变数组或者对象中某一香的属性值. 效果图: 我给大家总结了案例如下: wxml如下: {{item.we ...
最新文章
- python 判断列表list是否为空
- 张继平院士：40年北大数学路 | 北大黄金一代是如何培养的
- 编程之美3.2 电话号码对应英语字母
- Linux记起始和结束时间,Linux历史命令的记住执行时间
- 【Julia】ERROR: UndefVarError: linspace not defined
- 【Python数据挖掘课程笔记】八.关联规则挖掘及Apriori实现购物推荐
- canvas图形处理和进阶用法
- Sublime Text编写80×86汇编.asm文件的语法高亮插件
- [渝粤教育] 厦门工学院 逻辑与批判性思维 参考 资料
- vs2005用正则表达式统计有效代码行数
- JAVA格式化输出浮点数：空格，位数
- hd620显卡驱动 linux,英特尔为Windows 10 推出新显卡驱动 26.20.100.7870
- 计算机网络安全技术期末试题,归纳计算机网络安全技术期末复习试题 doc
- html5好看的注册页面设计,美观大气注册登录页面模板html源码
- Bing必应来帮忙之-查询虚拟主机服务器上的同IP网站
- 如何使用OpenCV的处理图像，文字变得锐利和清晰？(How to use OpenCV to process image so that the text become sharp and clea
- 微信登录开发-java
- A. Sequence with Digits
- Wayland (简体中文)
- Newman基础使用