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焦點獲取狀態

轉載于:https://www.cnblogs.com/kunmomo/p/11569321.html

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。