Accessibility Development (c) of the AIRA aira - *** property values

aira - *** property values

Property name Property Value HTML schematic Explanation
aria-activedescendant  String. It represents descendant elements of idvalue.
<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 attribute defines when working time toolbar gets the focus, which toolbars child controls get focus. The HTM L example, the first control in the toolbar ( have id"button1") is able to get the focus of child controls.

aria-atomic   String. Indicates whether the complete broadcast content area. Values can be trueand false. As is true, it indicates that the entire area of the auxiliary equipment required to the user is informed of the content; if it is falserequired only to inform said modified part.
<div role="heading" aria-live="assertive" aria-atomic="true">2012年 3月</div>
 
Or the example of a time selector title of years. Here aria-atomicit is truesaid that when the time is time for a change, here's the month and year to complete player, not only changed the reported month on month only content. 
 aria-autocomplete  String. Automatically prompts the user indicate whether the text box provided. Available values: inlinelistbothnone.
<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>
 
At present, for the property inlineand listtemporarily clear the meaning of the two values. But it is determined that the attribute corresponding to the HTML5 autocompleteproperties. Note that, if aria-autocomplete="list"aria-autocomplete="inline"or aria-autocomplete="both"is provided to support autocompletethe element, the autocompleteattribute value needs to be set "on", if so aria-autocomplete="none", it is necessary to set"off" 
 aria-busy  String. Table busy state current region. Default false, clear the busy status table; optionally true, in the region Loading table; or to errorindicate that the invalid authentication region.
<ul aria-atomic="true" aria-busy="true" aria-live="polite">
 
If a certain area (such as here ul) there are many places need to be modified, all changes need to finish and then notify the user if it can first aria-busyset true, until the entire contents of the update is completed and then set to false. This attribute can be avoided in aid former regional content constantly updated instantly alert the user. 
 aria-controls  String. Space-separated idproperty value list.  
<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>
This attribute defines the relationship can not be determined by the structure of the document between elements. ariaControlsThe main attribute is roleas groupregionor widgetelements used. 
 aria-describedby String. Space-separated idproperty value list.   
<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  字符串。表示拖拽效果。可选值有:copymovereferenceexecutepopupnone, 依次表示:复制,移动,参照,执行,弹出以及没有效果。
<-- 暂无HTML示例 -->
 
该属性用在拖拽上。
 aria-flowto  字符串。空格分隔的id属性值列表。  
<-- 暂无HTML示例 -->
 如果该属性值对应的是单独的id, 辅助技术会恢复目标元素的阅读;如果对应的是多个id, 则辅助技术会让用户去选择、导航到目标元素。
 aria-grabbed  字符串。拖拽中元素的捕获状态。可选值有:truefalseundefined. 默认为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  字符串。可选值有:offpoliteassertiverude。默认为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表示一次可以选择多个项。
<-- 暂无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-owns表示元素所拥有的,这里这里的文本框拥有其对应的下拉列表。

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 字符串。表示区域内哪些操作行为需要做出反应。可选值有:additionsremovalstextall可以空格分隔多个一起显示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(↓), noneother.
<-- 暂无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示例 -->
用在范围组件上。

Guess you like

Origin www.cnblogs.com/kunmomo/p/11568694.html