WAI-ARIA无障碍网页应用属性完全展示【转】
使用firebug查看其对应的HTML代码，就可以看到aria的应用啦！
仔细一看，唷，这可是标准的选项卡ARIA属性应用（该用的属性都有），OK，对于常用的选项卡，就套用淘宝网这里的结构吧，很标准的。就是增加几个role属性，增加几个aria-属性就可以了，然后，这个选项卡就变成了很牛逼很碉堡的无障碍阅读选项卡啦。恩，这再一次验证了这个道理：要变成牛人很简单——骑在牛身上就可以了。
哎呀哎呀，聪明好学的你可能希望知道这里aria-hidden,ARIA Roles值示意及说明表role属性值含义HTML示意说明alert表示警告
<p id="ajax_error_alert" role="alert"></p>例如ajax操作返回错误信息的
div标签。alertdialog表示警告弹出框<div aria-labelledby="alert_title" aria-hidden="false" tabindex="0" role="alertdialog" id="alert1"> <p id="alert_title">弹出框</p> <p id="alert_message">哥，你输入的时间穿越了，请重新输入！</p> <input type="button" value="关闭" id="alert_close" /></div>自定义的出错提示弹框。
<div id="application" role="application"> <label id="date_label" for="date">时间</label>: <input id="date" type="text"/> <button id="bn_date">选择日期...</button> <div id="dp1" aria-hidden="true"> <-- 时间选择控件具体 --> </div></div>例如自定义的时间选择器。button表示按钮
<div role="toolbar" tabindex="0" aria-activedescendant="button1"> <img src="btncut.png" id="button1" role="button" alt="WAI-ARIA无障碍网页应用属性完全显示【转】" /> <img src="btncopy.png" id="button2" role="button" alt="WAI-ARIA无障碍网页应用属性完全显示【转】" /> <img src="btnpaste.png" id="button3" role="button" alt="WAI-ARIA无障碍网页应用属性完全显示【转】" /></div>大家都懂的，没啥好说的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> <li role="checkbox" aria-checked="true" tabindex="0">黄小仙</li></ul>同样，大家都懂的，没啥好说的
<input id="cb1-edit" type="text" tabindex="0" role="combobox" aria-autocomplete="inline" aria-owns="cb1-list" /> <ul id="cb1-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>
<table id="grid1" role="grid" aria-labelledby="grid1_label" aria-readonly="true"> <caption id="grid1_label">美女们</caption> <thead> <tr> <th id="grid1_q" tabindex="-1">晴川</th> <th id="grid1_j" tabindex="-1">静秋</th> <th id="grid1_h" tabindex="-1">黄小仙</th> </tr> </thead> <tbody id="data"></tbody></table>
gridcell表示网格单元<table role="grid" aria-readonly="true"> <tr role="row" aria-selected="false"> <td role="gridcell" tabindex="-1">晴川</td> <td role="gridcell" tabindex="-1">静秋</td> <td role="gridcell" tabindex="-1">黄小仙</td> </tr></table>类似于table & table-cellgroup表示组合并
<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> <li role="checkbox" aria-checked="true" tabindex="0">黄小仙</li></ul>
<div role="heading" aria-live="assertive" aria-atomic="true">2012年 3月</div>例如时间选择器中的月份标题：
<input id="cb1-edit" type="text" tabindex="0" role="combobox" aria-autocomplete="inline" aria-owns="cb1-list" /> <ul id="cb1-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>
<div role="log" aria-atomic="false" aria-relevant="additions"></div>类似三国杀右侧记录战事区域；或是比赛文字直播记录区域。menu表示菜单
<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>
<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>
<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>
<ul role="menubar" title="美女菜单"> <li role="menuitem" tabindex="0" aria-haspopup="true">美女 <ul role="menu" aria-hidden="true"> <li role="menuitemcheckbox" tabindex="-1" aria-checked="true">晴川</li> <li role="menuitemcheckbox" tabindex="-1" aria-checked="true">静秋</li> <li role="menuitemcheckbox" 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>
<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>
<input id="cb1-edit" type="text" tabindex="0" role="combobox" aria-autocomplete="inline" aria-owns="cb1-list" /> <ul id="cb1-list" tabindex="-1" role="listbox" aria-expanded="true"> <li role="option">晴川</li> <li role="option">静秋</li> <li role="option">黄小仙</li></ul>
<div aria-valuemax="100" aria-valuemin="0" role="slider" src="slider_control.png" /> <div role="presentation" tabindex="0">45</div></div>左边示例的HTML为一个自定义的滑动条。而
role="presentation"所在div显示的就是当前滑动位置对应的值。
<div role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" tabindex="0"> <div style="width: 23.3333%;"></div> <div aria-hidden="false">23%</div></div>
<h3 id="girl_label">美女们：</h3><ul role="radiogroup" aria-labelledby="girl_label"> <li tabindex="-1" role="radio" aria-checked="false"> <img role="presentation" src="radio-unchecked.gif" /> 晴川 </li> <li tabindex="0" role="radio" aria-checked="true"> <img role="presentation" src="radio-checked.gif" /> 静秋 </li> <li tabindex="-1" role="radio" aria-checked="false"> <img role="presentation" src="radio-unchecked.gif" /> 黄小仙 </li> </ul>自定义单选框控件的时候使用，下图为左侧HTML的效果图：
<h3 id="girl_label">美女们：</h3><ul role="radiogroup" aria-labelledby="girl_label"> <li tabindex="-1" role="radio" aria-checked="false"> <img role="presentation" src="radio-unchecked.gif" /> 晴川 </li> <li tabindex="0" role="radio" aria-checked="true"> <img role="presentation" src="radio-checked.gif" /> 静秋 </li> <li tabindex="-1" role="radio" aria-checked="false"> <img role="presentation" src="radio-unchecked.gif" /> 黄小仙 </li> </ul>
<div role="region" tabindex="-1" aria-expanded="false"> 我之所以会出现，是因为主人你点击了某个命中注定的按钮。</div>例如用在
div区域显示隐藏切换的时候。row表示行<table role="grid" aria-readonly="true"> <tr role="row" aria-selected="false"> <td role="gridcell" tabindex="-1">晴川</td> <td role="gridcell" tabindex="-1">静秋</td> <td role="gridcell" tabindex="-1">黄小仙</td> </tr></table>用在表格模拟的行列表上，对应
table下面的tr标签。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="separator" tabindex="-1"></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>反应在下图就是那条黑色的1像素水平分隔线：
<div aria-valuemax="100" aria-valuemin="0" role="slider" src="slider_control.png" /> <div role="presentation" tabindex="0">45</div></div>
<div role="spinbutton" aria-valuemin="0" aria-valuemax="100" aria-valuenow="50" tabindex="0">50</div>例如下面这个数值微调效果截图：
<div role="tablist"> <li aria-selected="true" role="tab" tabindex="0">美女</li> <li role="tab" aria-selected="false" tabindex="-1">淑女</li> <li role="tab" aria-selected="false" tabindex="-1">熟女</li> <li role="tab" aria-selected="false" tabindex="-1">腐女</li> </ul></div>
<div role="tablist"> <li aria-selected="true" role="tab" tabindex="0">美女</li> <li role="tab" aria-selected="false" tabindex="-1">淑女</li> <li role="tab" aria-selected="false" tabindex="-1">熟女</li> <li role="tab" aria-selected="false" tabindex="-1">腐女</li> </ul></div>
<div role="tabpanel"> <ul role="tablist"><-- 选项卡 --></ul> <div id="panel1" aria-labelledby="tab1" role="tabpanel"> <ul type="radio" name="girl" value="q" /> <label for="girl1">晴川</label></li> <li><input id="girl2" type="radio" name="girl" value="j" checked /> <label for="girl2">静秋</label></li> <li><input id="girl3" type="radio" name="girl" value="h" /> <label for="girl3">黄小仙</label></li> </ul> </div> <div id="panel2" aria-labelledby="tab2" role="tabpanel"></div> <div id="panel3" aria-labelledby="tab3" role="tabpanel"></div> <div id="panel4" aria-labelledby="tab4" role="tabpanel"></div></div>
<div role="timer" aria-atomic="true" aria-relevant="all">0</div>模拟计数器，使用在动态显示规律数值变化的地方toolbar表示工具栏
<div role="toolbar" tabindex="0" aria-activedescendant="button1"> <img src="btncut.png" id="button1" role="button" alt="WAI-ARIA无障碍网页应用属性完全显示【转】" /> <img src="btncopy.png" id="button2" role="button" alt="WAI-ARIA无障碍网页应用属性完全显示【转】" /> <img src="btnpaste.png" id="button3" role="button" alt="WAI-ARIA无障碍网页应用属性完全显示【转】" /></div>左边HTML表示一个剪切，复制，粘贴三功能在一起的工具栏。tooltip表示提示文本
<div for="name">姓名:</label> <input type="text" id="name" name="name" aria-labelledby="name_label" aria-describedby="tip" aria-required="false" /> <div id="tip" role="tooltip" aria-hidden="true">必须是美女姓名哦~~</div></div>如下图黄色的这个提示框：
<ul role="tree"> <li aria-expanded="true" tabindex="-1" role="treeitem"> <img alt="WAI-ARIA无障碍网页应用属性完全显示【转】" src="expanded.gif" />美女 <ul role="group"></ul> </li> <li aria-expanded="false" tabindex="0" role="treeitem"> <img alt="WAI-ARIA无障碍网页应用属性完全显示【转】" src="contracted.gif" />淑女 <ul role="group"></ul> </li></ul>效果见下面
treeitem中的图。treeitem表示树结构选项<ul role="tree"> <li aria-expanded="true" tabindex="-1" role="treeitem"> <img alt="WAI-ARIA无障碍网页应用属性完全显示【转】" src="expanded.gif" />美女 <ul role="group"> <li tabindex="-1" role="treeitem">晴川</li> <li tabindex="-1" role="treeitem">静秋</li> <li tabindex="-1" role="treeitem">黄小仙</li> </ul> </li> <li aria-expanded="false" tabindex="0" role="treeitem"> <img alt="WAI-ARIA无障碍网页应用属性完全显示【转】" src="contracted.gif" />淑女 <ul role="group"></ul> </li></ul>
?
ARIA 属性值示意及说明表属性名属性值HTML示意说明aria-activedescendant字符串。表示后代元素的id值。<div role="toolbar" tabindex="0" aria-activedescendant="button1"> <img src="btncut.png" id="button1" role="button" alt="WAI-ARIA无障碍网页应用属性完全显示【转】" /> <img src="btncopy.png" id="button2" role="button" alt="WAI-ARIA无障碍网页应用属性完全显示【转】" /> <img src="btnpaste.png" id="button3" role="button" alt="WAI-ARIA无障碍网页应用属性完全显示【转】" /></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,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-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,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>
<-- 暂无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,aria-live="assertive" aria-atomic="true">2012年 3月</div>绝大多数的更新应该在用户闲暇的时候告知，即时提示对用户是一种干扰。如果希望内容完全更新后再提示，可以使用上面提到的aria-busy.左侧的HTML为时间选择控件的年月标题部分，aria-live="assertive"表示的是当用户选择了新的时间的时候，尽快通知用户时间发生了变更。
false, 表示一次只能选择一个项。true表示一次可以选择多个项。<-- 暂无HTML示例 -->例如手风琴展开收起效果，我们可以使用
aria-multiselectable来告知辅助设备，一次可以展开多个项还是只有一个展开。aria-owns字符串。值为目标元素id.<input id="cb1-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表示元素所拥有的，这里这里的文本框拥有其对应的下拉列表。
<-- 暂无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,aria-relevant="additions"></div>左边的HTML表示当日志内容有添加的时候做出反应。aria-required字符串。元素值是否必需。默认为false, 表示元素值可以为空；true表示元素值是必需的。<div 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,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 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 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示例 -->用在范围组件上。
?
ARIA 状态值示意及说明表属性状态属性值HTML示意说明aria-checked字符串。表示检查的状态。true表示元素被选择；false表示元素未被选择；mixed表示元素同时有选择和为选择状态。<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> <li role="checkbox" aria-checked="true" tabindex="0">黄小仙</li></ul>
该属性用来表明用户是否选择了某些项（如左边这个截图所示）。aria-disabled字符串。表禁用状态，true表示当前是非激活状态；false表示清除非激活状态。<div role="button" tabindex="0" title="添加个姑娘" aria-pressed="false" aria-disabled="false">添加</div>对应单复选框等控件的
disabled属性，一般用在自定义模拟控件中。aria-expanded字符串。表示展开状态。默认为undefined, 表示当前展开状态未知。其它可选值：true表示元素是展开的；false表示元素不是展开的。<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> <ul type="radio" name="girl" value="q" /> <label for="p1_1">晴川</label></li> <li><input id="p1_2" type="radio" name="girl" value="j" checked /> <label for="p1_2">静秋</label></li> <li><input id="p1_3" type="radio" name="girl" value="h" /> <label for="p1_3">黄小仙</label></li> </ul></div>
例如在手风琴交互效果中标示展开与否的状态。该属性对应HTML5的open属性。aria-hidden字符串。可选值为true和false,aria-invalid="false" />?aria-pressed字符串。表示按下的状态，可选值有：true,false,aria-pressed="false" aria-disabled="false">添加</div>左边HTML表示按钮已经按下，同时处于禁用状态。aria-selected字符串。表示选择状态。可选值有：true,false,aria-selected="true" tabindex="0">美女</li> <li role="tab" aria-selected="false" tabindex="-1">淑女</li> <li role="tab" aria-selected="false" tabindex="-1">熟女</li> <li role="tab" aria-selected="false" tabindex="-1">腐女</li> </ul></div>元素被选中表明其处于某种交互之中，因此选中元素很可能处于focus焦点获取状态。
注意：为了跨浏览器兼容，总是使用WAI-ARIA属性解析来访问和修改ARIA属性，例如object.setAttribute("aria-valuenow", newValue).
末了，附上09年，腾讯（好像现在叫isux）团队弄的张ARIA相关大图：
点击图片查看大图
?