aria属性表

参考： aria属性表

A. role有哪些呢？

① radiogroup/radio/presentation

<ul role="radiogroup">
    <li tabindex="-1" role="radio" aria-checked="false">
        <!-- presentation：描述 -->
        <img role="presentation" src="radio-unchecked.gif" /> 晴川
    </li>
    <li tabindex="0" role="radio" aria-checked="true">
        <img role="presentation" src="radio-checked.gif" /> 静秋
    </li>
</ul>

② group/checkbox

<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>
</ul>

③ combobox/option

<input type="text" tabindex="0" role="combobox" 
    aria-autocomplete="inline" aria-owns="cb1-list" />      
<ul tabindex="-1" role="listbox" aria-expanded="true">
    <li role="option">晴川</li>
    <li role="option">静秋</li>
</ul>

④ grid/row/gridcell

<table role="grid" aria-labelledby="grid1_label" aria-readonly="true">
  <caption>美女们</caption>
  <thead>
    <tr><th tabindex="-1">晴川</th><th  tabindex="-1">静秋</th></tr>
  </thead>
  <tbody >
     <tr role="row" aria-selected="false">
        <td role="gridcell" tabindex="-1">晴川</td>
        <td role="gridcell" tabindex="-1">静秋</td>
     </tr>
</tbody>
</table>

⑤menubar/menuitem/menu/menuitemradio/menuitemcheckbox & separator

<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>
    </ul>
  </li>
  <li role="separator" tabindex="-1"></li>  <!-- 分割线 -->
  <li role="menuitem" tabindex="-1" aria-haspopup="false">靓女
    <ul role="menu" aria-hidden="true">
      <li role="menuitemcheckbox" aria-checked="true">Lily</li>
      <li role="menuitemcheckbox" aria-checked="true">Lucy</li>
     </ul>
  </li>
  <li role="menuitem" tabindex="-1" aria-haspopup="false">淑女</li>
  <li role="menuitem" tabindex="-1" aria-haspopup="false">熟女</li>
</ul>

⑥ tabpanel/tablist/tab

<div role="tabpanel">
  <ul role="tablist">
    <li role="tab" aria-selected="true"  tabindex="0">美女</li>
    <li role="tab" aria-selected="false" tabindex="-1">淑女</li>
  </ul>
</div>

⑦ tree/treeitem

<ul role="tree">
   <li role="treeitem" aria-expanded="true" tabindex="-1" >
      <img alt="展开" src="expanded.gif" />美女
      <ul role="group">...</ul>
   </li>
   <li role="treeitem" aria-expanded="false" tabindex="0" >
      <img alt="收起" src="contracted.gif" />淑女
      <ul role="group">...</ul>
   </li>
</ul>

⑧ alert/alertdialog

<p id="ajax_error_alert" role="alert"></p>

<div aria-labelledby="alert_title" aria-hidden="false" 
    tabindex="0" role="alertdialog">
    <p id="alert_title">弹出框</p>
    <p id="alert_message">
      哥，你输入的时间穿越了，请重新输入！
    </p>
    <input type="button" value="关闭"  />
</div>

⑨ log/region/timer/tooltip/toolbar

<div role="log" aria-atomic="false" aria-relevant="additions"></div>
<!-- 区域  -->
<div role="region" tabindex="-1" aria-expanded="false">
    我之所以会出现，是因为主人你点击了某个命中注定的按钮。
</div>
<!-- 计时器 -->
<div role="timer" aria-atomic="true" aria-relevant="all">0</div>
<!-- 提示 -->
<div role="tooltip" aria-hidden="true">必须是美女姓名哦</div>
<!-- 工具栏 -->
<div role="toolbar" tabindex="0" aria-activedescendant="button">
  <img src="btncopy.png" role="button" alt="copy" />
  <img src="btnpaste.png" role="button" alt="paste" />
</div>

⑩ heading/application/spinbutton

<div role="heading" aria-live="assertive" aria-atomic="true">
  2012年 3月
</div>
<div role="application">
    <label for="date">时间</label>:
    <input type="text"/>
    <button>选择日期...</button>
    <div class="datepicker" aria-hidden="true">
        <-- 时间选择控件具体 -->
    </div>
</div>

<!-- spinbutton：微调，数字微调等-->
<div role="spinbutton" tabindex="0"
    aria-valuemin="0" aria-valuemax="100" aria-valuenow="50" >
    50
</div>

⑪ slider/progressbar

<div><!-- slider：滑动条 -->
    <img aria-valuenow="45" aria-valuemax="100" aria-valuemin="0"
        role="slider" src="slider_control.png" />
    <!-- 滑动条的位置在45%的地方，presentation：描述 -->
    <div role="presentation" tabindex="0">45</div>
</div>

<!--progressbar：进度条 -->
<div role="progressbar" tabindex="0"
    aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" >
</div>

B. 属性及属性值

aria-activedescendant：指定后代元素id aria-live & aria-atomic aria-busy aria-controls aria-describedby aria-haspopup aria-owns

aria-relevant

aria-relevant:表示区域内哪些操作行为需要做出反应。可选值有：
additions表示新增节点的时候做出反应；
removals表示删除节点时重要操作；
text表示文本改变是值得重视的；
all等同于同时使用上面三个属性值。

其他

aria-dropeffect ：表示拖拽效果。
可选值有：copy（复制）, move（移动）, reference（参照）, 
execute（执行）, popup（弹出）, none（没有效果）  
----------
aria-flowto：
若该属性值对应的是单独的id, 辅助技术会恢复目标元素的阅读；
若对应多个id, 辅助技术则会让用户去选择、导航到目标元素
----------
aria-grabbed：拖拽中元素的捕获状态。
可选值有:true（元素可以捕获）, false（不能捕获）, undefined（状态未知）.
----------
aria-multiselectable：表示是否可多选；
例如手风琴展开收起效果，我们可以使用aria-multiselectable来
告知辅助设备，一次可以展开多个项还是只有一个展开

----------
aria-readonly： 是否只读（true:只读，false:可修改）
aria-required： 是否必输
aria-label：定义一个字符串值标记当前元素
aria-labelledby：一般用在区域元素上，
      对于的值一般为对应的标题或是标签元素的id
aria-level：等级（1级标题，2级标题）

aria-secret： 机密状态
aria-posinset： 当前位置
aria-setsize： 设置尺寸大小
aria-sort：升序降序（ascending(↑), descending(↓), none, other.）

-----范围组件属性-----
aria-valuemax
aria-valuemin
aria-valuenow
aria-valuetext

属性状态

属性状态