无障碍开发(三)之ARIA aria-***属性值

  • Post author:
  • Post category:其他



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">晴川</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

, 表示该区域验证无效。