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 屬性定義了當(dāng)工具欄獲取焦點(diǎn)時，哪一個工具欄的子控件獲取了焦點(diǎn)。在此HTML示例中，工具欄的第一個控件（擁有id“button1″）是能獲取焦點(diǎn)的子控件。
aria-atomic?	?字符串。表示區(qū)域內(nèi)容是否完整播報。值可以為true和false。當(dāng)為true時，表示輔助設(shè)備需要把整個區(qū)域內(nèi)容都通報給使用者；如果為false則表示只需要通報修改的部分。	<div role="heading" aria-live="assertive" aria-atomic="true">2012年 3月</div> ?	還是這個時間選擇器年月標(biāo)題的例子。這里的aria-atomic為true則表示當(dāng)時間改變的時候，這里的年月日期要完整播放，不要只改了月份就只報月份內(nèi)容。?
?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兩個值的含義暫不清楚。不過可以確定的是該屬性對應(yīng)HTML5中autocomplete屬性。需要注意的是，如果aria-autocomplete="list",?aria-autocomplete="inline"或aria-autocomplete="both"被設(shè)置在支持autocomplete的元素上，則autocomplete的屬性值需要設(shè)成"on", 如果是aria-autocomplete="none"，則需要設(shè)成"off"?
?aria-busy	?字符串。表當(dāng)前區(qū)域的忙碌狀態(tài)。默認(rèn)為false, 表清除busy狀態(tài)；可選為true, 表該區(qū)域正在加載；或?yàn)閑rror, 表示該區(qū)域驗(yàn)證無效。	<ul aria-atomic="true" aria-busy="true" aria-live="polite"> ?	如果某個區(qū)域內(nèi)(如這里ul)有多個地方需要修改，需要全部修改完畢再通知使用者的話，就可以先將aria-busy設(shè)為true, 等到全部內(nèi)容更新完畢后再設(shè)成false. 該屬性可以避免輔助工具在區(qū)域內(nèi)容更新完畢前不斷即時提醒使用者。?
?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>	該屬性定義了元素間不能通過文檔結(jié)構(gòu)決定的關(guān)聯(lián)關(guān)系。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>	同樣的，該屬性定義了文檔結(jié)構(gòu)表現(xiàn)不出來的的元素間的相互關(guān)聯(lián)性。該屬性旨在通過標(biāo)簽提供更多用戶可能需要的信息。如果指定了不只一個id, 所有元素會合并在一起共同創(chuàng)建一條單獨(dú)的描述。?
?aria-dropeffect	?字符串。表示拖拽效果。可選值有：copy,?move,?reference,?execute,?popup,?none, 依次表示：復(fù)制，移動，參照，執(zhí)行，彈出以及沒有效果。	<-- 暫無HTML示例 --> ?	該屬性用在拖拽上。
?aria-flowto	?字符串。空格分隔的id屬性值列表。	? <-- 暫無HTML示例 -->	?如果該屬性值對應(yīng)的是單獨(dú)的id, 輔助技術(shù)會恢復(fù)目標(biāo)元素的閱讀；如果對應(yīng)的是多個id, 則輔助技術(shù)會讓用戶去選擇、導(dǎo)航到目標(biāo)元素。
?aria-grabbed	?字符串。拖拽中元素的捕獲狀態(tài)。可選值有:true,?false,?undefined. 默認(rèn)為undefined，表示元素捕獲狀態(tài)未知。true表示元素可以捕獲；false表示不能被捕獲。	? <-- 暫無HTML示例 -->	該屬性用在拖拽上。類似于HTML5中的draggable屬性。?
?aria-haspopup	?字符串。true表示點(diǎn)擊的時候會出現(xiàn)菜單或是浮動元素；?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示例 --> ?	?定義一個字符串值標(biāo)記當(dāng)前元素。
?aria-labelledby	?字符串。空格分隔的id屬性值列表。	? <div aria-labelledby="title" role="alertdialog"><h3 id="title">標(biāo)題</h3></div>	??aria-labelledby一般用在區(qū)域元素上，對于的id一般為對應(yīng)的標(biāo)題或是標(biāo)簽元素的id.關(guān)系型屬性。
?aria-level	?字符串。數(shù)值表示等級。	<div aria-level="2">次標(biāo)題</div> ?	?上面的HTML類似于<h2>次標(biāo)題</h2>
?aria-live	?字符串。可選值有：off,?polite,?assertive,?rude。默認(rèn)為off, 表示不宣布更新；polite表示只有用戶閑時宣布；assertive表示盡快對用戶宣布；rude表示即時提醒用戶，必要的時候甚至中斷用戶。	<div role="heading" aria-live="assertive" aria-atomic="true">2012年 3月</div> ?	絕大多數(shù)的更新應(yīng)該在用戶閑暇的時候告知，即時提示對用戶是一種干擾。如果希望內(nèi)容完全更新后再提示，可以使用上面提到的aria-busy. 左側(cè)的HTML為時間選擇控件的年月標(biāo)題部分，aria-live="assertive"表示的是當(dāng)用戶選擇了新的時間的時候，盡快通知用戶時間發(fā)生了變更。 ?
aria-multiselectable	字符串。表示是否可多選。默認(rèn)為false, 表示一次只能選擇一個項(xiàng)。true表示一次可以選擇多個項(xiàng)。	<-- 暫無HTML示例 -->	例如手風(fēng)琴展開收起效果，我們可以使用aria-multiselectable來告知輔助設(shè)備，一次可以展開多個項(xiàng)還是只有一個展開。
aria-owns	字符串。值為目標(biāo)元素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表示元素所擁有的，這里這里的文本框擁有其對應(yīng)的下拉列表。
aria-posinset	數(shù)值。表示當(dāng)前位置。	<-- 暫無HTML示例 -->	用在設(shè)置和獲取一個集合內(nèi)某項(xiàng)的當(dāng)前位置。
aria-readonly	字符串。表示是否只讀。默認(rèn)為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	字符串。表示區(qū)域內(nèi)哪些操作行為需要做出反應(yīng)。可選值有：additions,?removals,?text,?all，可以空格分隔多個一起顯示.?additions表示新增節(jié)點(diǎn)的時候做出反應(yīng)；removals表示刪除節(jié)點(diǎn)時重要操作；text表示文本改變是值得重視的；all等同于同時使用上面三個屬性值。	<div role="log" aria-atomic="false" aria-relevant="additions"></div>	左邊的HTML表示當(dāng)日志內(nèi)容有添加的時候做出反應(yīng)。
aria-required	字符串。元素值是否必需。默認(rèn)為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>	多半用在表單控件中。對應(yīng)HTML5中required屬性。
aria-secret	字符串。表示機(jī)密狀態(tài)。	<-- 暫無HTML示例 -->	具體含義不詳
aria-setsize	數(shù)值。設(shè)置的尺寸大小值。	<-- 暫無HTML示例 -->	顧名思意
aria-sort	字符串。表示表格或格柵中的項(xiàng)是以升序排列還是降序排列。可選值：ascending(↑),?descending(↓),?none,?other.	<-- 暫無HTML示例 -->	Widget組件應(yīng)用屬性。
aria-valuemax	數(shù)值。表允許的最大值。	<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>	用在范圍組件上。對應(yīng)于HTML5中的max屬性。
aria-valuemin	數(shù)值。表示允許的最小值。	<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>	用在范圍組件上。對應(yīng)于HTML5中的min屬性。
aria-valuenow	數(shù)值。表示當(dāng)前值。	<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>	用在范圍組件上。對應(yīng)于value屬性。
aria-valuetext	字符串。定義等同于aria-valuenow人可讀的文本。	<-- 暫無HTML示例 -->	用在范圍組件上。

?

轉(zhuǎn)載于:https://www.cnblogs.com/kunmomo/p/11568694.html

與50位技術(shù)專家面對面20年技術(shù)見證，附贈技術(shù)全景圖

總結(jié)

以上是生活随笔為你收集整理的无障碍开发（三）之ARIA aria-***属性值的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。