WAI-ARIA アクセシビリティ Web アプリケーション属性の完全表示_html/css_WEB-ITnose

1. 少なくとも ARIA が何であるかを知っておく必要があります。

WAI-ARIA は、アクセス可能な Web アプリケーションを指します。主に、視覚障害、聴覚障害、運動制限のある障害者、および障害者のふりをしたテスターを対象としています。特に、目で見ることができない視覚障害者は、スクリーン リーダー などの音声読み上げや点字出力が可能な補助デバイスを使用してウェブを閲覧する必要があります。

ARIA は、スクリーン リーダー が Web ページの内容、変更、ステータスを正確に識別し、目の見えないユーザーなどのユーザーが問題なく読めるようにするための技術仕様です。

2. ARIA が必要な理由は何ですか?

タイトルの質問に答える前に、他にもいくつか質問させてください。

1. 視覚障害のあるユーザーに、現在の閲覧領域が Web サイトのメイン ナビゲーションであることを知らせるにはどうすればよいでしょうか?
2. 視覚障害のあるユーザーに、特定のボタンをクリックするとポップアップ ボックスが表示されることを知らせたらどうなるでしょうか?
3. 特定のボタンをクリックした後にページの別の領域のテキストが変更されたことを視覚障害のあるユーザーに知らせるにはどうすればよいですか?
4. 標準の選択コントロールをシミュレートするために li タグを使用していることを視覚障害のあるユーザーに知らせるにはどうすればよいですか?
5. 視覚障害のあるユーザーに、シミュレートする選択コントロールが単一選択であるか複数選択であるかを知らせるにはどうすればよいですか?

あなたの現在の知識の範囲内で、上記の問題を解決する方法はありますか?私は HTML5 を使用していると言う人もいるでしょう。確かに、HTML5 の登場により、Web ページのアクセシビリティとバリアフリーな閲覧が大幅に向上しました。シミュレートされたコントロールのタイプ。

だからこそ ARIA が必要なのです

3. ARIA は非主流ですが、私たちは気にしません。

ARIA は非主流ですか?暑いのか寒いのかも分からず、凍てつくベッドの上で寝るのは本当に辛いです。 ARIA 仕様は更新され、維持されています。ブラウザに関しては、IE8 以降のすべての最新ブラウザがすでに ARIA をサポートしており、ほぼ全面的にサポートされていると言えます。人気の JavaScript ライブラリである jQuery とその派生である jQuery Mobile は、国産の有名な JavaScript ライブラリである Kissy も長い間 ARIA をサポートしており、(私の記憶が正しければ) 昨年にも ARIA をサポートし、実際のプロジェクトで使用されていました (痕跡が見つかります)。タオバオのホームページで）。

バッグはコーチが主流でしょうか？ ARIA はバッグの中のコーチです

4. 視覚障害者、そんなニッチなことは忘れてください、あなたはとても愚かです。

そうですね、実際、設計図に従っていくつかの死んだページを切り取るだけで、残りの人生を過ごすことができます。

5. くそー、ARIA関連の属性が多すぎてフロントをからかう暇もないのに、これはもったいない！

ARIA には関連する属性がたくさんありますが、時間がないときは、前戯中にすべての部分にキスする必要はなく、敏感な部分を直接ターゲットにするだけでよいことを知っておいてください。同じことが ARIA にも当てはまりますが、一般的に使用される属性をいくつか知っておくだけで済みます。これからは上司の前で自慢すれば面接などでもうまくいきます。

これまでのところ、すべてテキストです。読みやすさを向上させ、テキストを読むのが難しい潜在的なユーザーがこのページを閉じるのを防ぐために、ARIA がアイスクリームであることを全員に知らせるために、実践的な例を示します。そしてたわごと）一緒にいると、彼らはただ顔色が明るくなるだけです）。

この例は、淘宝網のホームページからのものです。興味がある場合は、サンプル オブジェクトを以下のスクリーンショット (淘宝網の右上隅にあるタブ) に示します。 firebug を使用して対応する HTML コードを表示すると、aria アプリケーションが表示されます。

よく見てください、ふぅ、これは標準のタブ ARIA 属性アプリケーションです (すべての属性を使用する必要があります)、OK、よく使用されるタブの場合は、淘宝網のここにある構造を適用するだけです。非常に標準的です。いくつかのロール属性といくつかの aria 属性を追加するだけで、このタブは非常に優れた強力なアクセシビリティ タブになります。これは、この真実をもう一度証明しています。牛になるのはとても簡単です。牛に乗るだけです。

おっと、賢くて勉強熱心なあなたは、ここで aria-hidden、aria-labeledby が何を意味するのか知りたいかもしれません。

良い生徒さん、私はあなたの学習熱心さに感動したので、私が最近日夜作成したWAI-ARIAバリアフリーWebアプリケーション属性表を表示することにしました。上記の2つの属性と、その他Nの複数の属性です。兄弟属性は次の表から見つけることができます。

フォームの高さに怖気づいて見たくない場合でも、大丈夫、これだけ覚えておいて、必要なときに戻ってきてください、ああ、ははは！ ^_^

次の 3 つのテーブルは、ARIA ロール属性値テーブル、ARIA 属性テーブル、および ARIA ステータス属性テーブルです。

6. ARIA 属性テーブル

ARIA ロール値の表現と説明テーブル

ロール属性値

意味警告を示します 警告ポップアップ ボックスを示します

HTML 表現	説明		alert
そうです	例えば、 ajax 操作でエラー情報 div タグが返されます。		alertdialog
<p id="ajax_error_alert" role="alert"></p>	カスタマイズされたエラー プロンプト ポップアップ ボックスを示します。
application	表示应用	<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" class="datepicker" aria-hidden="true"> <-- 时间选择控件具体 --> </div></div>	例如自定义的时间选择器。
button	表示按钮	<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>	大家都懂的，没啥好说的
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>	同样，大家都懂的，没啥好说的
combobox	表示下拉列表框	<input id="cb1-edit" class="cb_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>
grid	表示网格	<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-cell
group	表示组合并	<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>
heading	表示应用程序标题头	<div role="heading" aria-live="assertive" aria-atomic="true">2012年 3月</div>	例如时间选择器中的月份标题：
listbox	表示列表框	<input id="cb1-edit" class="cb_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>
log	表示日志记录	<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>
menubar	表示菜单栏	<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>
menuitem	表示菜单项	<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>
menuitemcheckbox	表示可复选的菜单项	<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>
menuitemradio	表示只能单选的菜单项	<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>
option	表示选项	<input id="cb1-edit" class="cb_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>
presentation	表示称述	<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>	左边示例的HTML为一个自定义的滑动条。而 role="presentation"所在 div显示的就是当前滑动位置对应的值。
progressbar	表示进度条	<div class="progress" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" tabindex="0"> <div class="progressIndicator" style="width: 23.3333%;"></div> <div class="progressVal" aria-hidden="false">23%</div></div>
radio	表示单选	<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的效果图：
radiogroup	表示单选组	<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>
region	表示区域	<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像素水平分隔线：
slider	表示滑动条	<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>
spinbutton	表示微调	<div class="spinbutton" role="spinbutton" aria-valuemin="0" aria-valuemax="100" aria-valuenow="50" tabindex="0">50</div>	例如下面这个数值微调效果截图：
tab	表示标签	<div class="tabpanel"> <ul class="tablist" 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>
tablist	表示标签列表	<div class="tabpanel"> <ul class="tablist" 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>
tabpanel	表示标签面板	<div role="tabpanel"> <ul class="tablist" role="tablist"><-- 选项卡 --></ul> <div id="panel1" aria-labelledby="tab1" role="tabpanel"> <ul class="controlList"> <li><input id="girl1" 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>
timer	表示计数	<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="cut" /> <img src="btncopy.png" id="button2" role="button" alt="copy" /> <img src="btnpaste.png" id="button3" role="button" alt="paste" /></div>	左边HTML表示一个剪切，复制，粘贴三功能在一起的工具栏。
tooltip	表示提示文本	<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="false" /> <div id="tip" role="tooltip" aria-hidden="true">必须是美女姓名哦~~</div></div>	如下图黄色的这个提示框：
tree	表示树形	<ul role="tree"> <li aria-expanded="true" tabindex="-1" role="treeitem"> <img alt="展开" src="expanded.gif" />美女 <ul role="group"></ul> </li> <li aria-expanded="false" tabindex="0" role="treeitem"> <img alt="收起" src="contracted.gif" />淑女 <ul role="group"></ul> </li></ul>	效果见下面 treeitem中的图。
treeitem	表示树结构选项	<ul role="tree"> <li aria-expanded="true" tabindex="-1" role="treeitem"> <img alt="展开" 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="收起" src="contracted.gif" />淑女 <ul role="group"></ul> </li></ul>

如果您看到下面的文字，可能是由于在其他网站或是RSS中阅读本文，本文原地址： http://www.zhangxinxu.com/wordpress/?p=2277，本文作者： 张鑫旭，来自张鑫旭-鑫空间-鑫生活，访问原出处更多精彩内容。

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, 表示该区域验证无效。	<ul aria-atomic="true" 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, move, reference, execute, popup, none, 依次表示：复制，移动，参照，执行，弹出以及没有效果。	<-- 暂无HTML示例 -->	该属性用在拖拽上。
aria-flowto	字符串。空格分隔的 id值们。	<-- 暂无HTML示例 -->	如果该属性值对应的是单独的 id, 辅助技术会恢复目标元素的阅读；如果对应的是多个 id, 则辅助技术会让用户去选择、导航到目标元素。
aria-grabbed	字符串。拖拽中元素的捕获状态。可选值有: true, false, undefined. 默认为 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类似于 c1a436a314ed609750bd7c7d319db4da次标题2e9b454fa8428549ca2e64dfac4625cd
aria-live	字符串。可选值有： off, polite, assertive, rude。默认为 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	字符串。表示区域内哪些操作行为需要做出反应。可选值有： additions, removals, text, all，可以空格分隔多个一起显示. 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(↓), none, other.	<-- 暂无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示例 -->	用在范围组件上。

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 class="controlList"> <li><input id="p1_1" 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, true表示元素隐藏(不可见)， false表示元素可见。	<div aria-hidden="false">23%</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" title="添加个姑娘" aria-pressed="false" aria-disabled="false">添加</div>	左边HTML表示按钮已经按下，同时处于禁用状态。
aria-selected	字符串。表示选择状态。可选值有： true, false, undefined. 默认为 undefined，表示元素选择状态未知。 true表示元素已选择； false表示未被选中。	<div class="tabpanel"> <ul class="tablist" role="tablist"> <li role="tab" 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相关大图：

点击图片查看大图

八、对提供资源便于整理的站点的感谢

感谢 http://msdn.microsoft.com, 感谢Chromium官方的扩展开发文档，感谢openajax可访问性 官方网站，感谢opera提供的ARIA文档，感谢W3C编辑者草案，感谢百度，必应，谷歌的搜索支持。

最最重要的，就是感谢大家的支持，正因为有你们或言语或财力上的支持，我才能坚持下来，完成这么多内容的整理!

最后，我由衷希望本文内容能够对国内无障碍网页应用的重视和发展提供一些帮助。

辛苦之作，尊重劳动，转载请注明来自 张鑫旭-鑫空间-鑫生活[ http://www.zhangxinxu.com]

本文地址： http://www.zhangxinxu.com/wordpress/?p=2277

本文永久更新链接地址： http://www.linuxidc.com/Linux/2016-02/128552.htm