WAI-ARIA无障碍网页应用属性（aria）

发表于 更新于 分类于 ， 本文字数： 6.4k 阅读时长 ≈ 6 分钟

ARIA属性表

属性名 属性值 HTML示意 说明
aria-activedescendant

字符串(后代元素的 id 值)

 
1
2
3
<div class="toolbar" aira-activedscendant="button1">
  <img src="btn.png" role="button" id="button1">
</div>

aria-activedescendant 属性定义了当工具栏获取焦点时，哪一个工具栏的子控件获取焦点。在这个示例中，id="button1" 的按钮控件先获取焦点
aria-atomic

字符串。表示区域内容是否完整播报。值为 true 和 false。值为 true 时，读屏软件会把整个区域内容都播报出来，如果为 false 则表示只需要播报修改的部分。

 
1
<div role="heading" aria-live="assertive" aria-atomic="true"></div>

这里的 aria-atomic 为 true，则表示当时间改变的时候，日期的年月都要完整播报出来，不要只改了月份就播报月份的内容。
aria-autocomplete

字符串，表示用户的文本框的自动提示是否提供，可选值有 inline、list、both和 none

 
1
<input type="text" tabindex="0" role="combobox" aria-autocomplete="inline" aria-owns="list" />

aria-autocomplete 对应HTML5中的 autocomplete 属性。

  • 如果 aria-autocomplete 取值为 list、inline 或 both 时，元素的 autocomplete 要设置为 on；
  • 如果其值为 none，则 autocomplete取值为 off。
aria-busy 字符串，表示当前区域的忙碌状态。默认为false，表示清除busy状态,取值为true时，表示该区域正在加载；取值为error时，表示该区域验证无效 
1
<ul aria-atomic="true" aria-busy="true" aria-live="polite"></ul>

如果某个区域内(如这里ul)有多个地方需要修改，需要全部修改完毕再通知使用者的话，就可以先将 aria-busy 设为 true, 等到全部内容更新完毕后再设成 false。该属性可以避免辅助工具在区域内容更新完毕前不断即时提醒使用者。
aria-controls 字符串，空格分隔的id属性值列表 
1
2
<h3 aria-controls="panel1" role="tab" tabindex="0"></h3>
<div id="panel1" role="tabpanel"></div>
  • 该属性定义了元素间不能通过文档结构决定的关联关系。
  • aria-controls 属性主要被 role 为 group，region，或 widget 的元素使用。
aria-describedby 字符串，空格分隔的id属性值列表 
1
2
3
4
<ul role="group">
  <li role="checkbox" aria-checked="false" aria-describedby="desc1" tabindex="0"></li>
</ul>
<div id="desc1">desc1的关联内容</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 属性。
aira-haspopup
  • 字符串。
  • true 表示点击的时候会出现菜单或是浮动元素；
  • false表示没有 pop-up 效果。
    
aria-label 字符串   定义一个字符串值标记当前元素。
aria-labelledby 字符串，空格分隔的id列表值 
1
<div aria-labelledby="title" role="alertdialog"><h3 id="title"></h3></div>

aria-labelledby 一般用在区域元素上，对于的 id 一般为对应的标题或是标签元素的 id 关系型属性。
aria-level 数值，表示等级 
1
<div role="heading" aria-level="2">次标题</div>
 模拟h2标签元素
aria-live
  • 字符串。可选值有：off, polite, assertive,rude。
  • 默认为 off, 表示不宣布更新；
  • polite 表示只有用户闲时宣布；
  • assertive 表示尽快对用户宣布；
  • rude 表示即时提醒用户，必要的时候甚至中断用户。
 
1
<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  

aria-owns 表示元素所拥有的
aria-posinset 数值，表示当前位置   用在设置和获取一个集合内某项的当前位置
aria-readonly 字符串。表示是否只读。默认为false, 表示元素值可以被修改；true表示元素指不能被改变    
aria-relevant 字符串。表示区域内哪些操作行为需要做出反应。可选值有：additions, removals, text, all，可以空格分隔多个一起显示。additions表示新增节点的时候做出反应；removals表示删除节点时重要操作；text表示文本改变是值得重视的；all等同于同时使用上面三个属性值 
1
<div role="log" aria-atomic="false" aria-relevant="additions"></div>
 左边的HTML表示当日志内容有添加的时候做出反应。
aria-required 字符串。元素值是否必需。默认为false, 表示元素值可以为空；true表示元素值是必需的 
1
<input type="text" id="name" name="name" aria-labelledby="name_label" aria-describedby="tip" aria-required="true" />

多半用在表单控件中，对应HTML5中的 required 属性
aria-secret 字符串，表示机密状态    
aria-setsize 数值，设置尺寸的大小值    
aria-sort 字符串。表示表格或格栅中的项是以升序排列还是降序排列。可选值：ascending(↑), descending(↓), none, other    
aria-valuemax 数值，允许的最大值 
1
<div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"></div>

用在 progressbar 组件上，对应HTML5中的 max
aria-valuemin 数值，允许的最小值 
1
<div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"></div>

用在 progressbar 组件上，对应HTML5中的 min
aria-valuenow 数值，表示当前值 
1
<div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"></div>

用在 progressbar 组件上，对应HTML5中的 value
aria-valuetext

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

    

ARIA相关状态的使用方法

属性状态 属性值 HTML示意 说明
aria-checked 字符串。表示检查的状态。true表示元素被选择；false表示元素未被选择；mixed表示元素同时有选择和为选择状态。 <li role="checkbox" aria-checked="mixed" tabindex="0"></li> 该属性用来表明用户是否选择了某些项,类似于input type="checkbox"中的checked
aria-disabled 字符串。表禁用状态，true表示当前是非激活状态；false表示清除非激活状态。 <div role="button" tabindex="0" aria-pressed="false" aria-disabled="false"></div> 对应单复选框等控件的disabled属性，一般用在自定义模拟控件中
aria-expanded 字符串。表示展开状态。默认为undefined, 表示当前展开状态未知。其它可选值：true表示元素是展开的；false表示元素不是展开的。    
aria-hidden 字符串。可选值为true和false, true表示元素隐藏(不可见)，false表示元素可见。 <div aria-hidden="false"></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" aria-pressed="false" aria-disabled="false"></div> 左边HTML表示按钮已经按下，同时处于禁用状态。
aria-selected 字符串。表示选择状态。可选值有：true, false, undefined。 默认为undefined，表示元素选择状态未知。true表示元素已选择；false表示未被选中。    
--------------本文结束 感谢您的阅读--------------