歡迎來到Linux教程網
Linux教程網
Linux教程網
Linux教程網
您现在的位置: Linux教程網 >> UnixLinux >  >> Linux編程 >> Linux編程

WAI-ARIA無障礙網頁應用屬性完全展示

一、你至少應該知道ARIA是什麼東西!

WAI-ARIA指無障礙網頁應用。主要針對的是視覺缺陷,失聰,行動不便的殘疾人以及假裝殘疾的測試人員。尤其像盲人,眼睛看不到,其浏覽網頁則需要借助輔助設備,如屏幕閱讀器,屏幕閱讀機可以大聲朗讀或者輸出盲文。

而ARIA就是可以讓屏幕閱讀器准確識別網頁中的內容,變化,狀態的技術規范,可以讓盲人這類用戶也能無障礙閱讀!

二、為什麼需要ARIA?

回答標題問題前我先問其他幾個問題?

  1. 如何讓盲人用戶知道當前浏覽區域就是網站主導航?
  2. 如果讓盲人用戶知道點擊某個按鈕後出來的是彈框?
  3. 如何讓盲人用戶知道點擊某個按鈕後頁面另外一個區域的文字發生了變化?
  4. 如何讓盲人用戶知道您使用了li標簽是用來模擬標准select控件呢?
  5. 如何讓盲人用戶知道您模擬的select控件是單選呢還是可以多選呢?

在你現有的知識范圍內,您有辦法解決上面的問題嗎?有人會說,我使用HTML5, 恩,確實,HTML5的出現大大增強了網頁的可訪問性和無障礙閱讀,但是,其不是萬能的,例如無法讓盲人知道模擬控件的類型等。

因此,才需要ARIA.

三、ARIA是個非主流,咱不鳥!

ARIA是非主流嗎?真是睡在凍床上不知冷熱啊。ARIA規范一直在更新維護,浏覽器方面IE8+以及其他所有現代浏覽器都都已支持ARIA, 幾乎可以說是全方位支持。流行的JavaScript庫jQuery, 以及衍生的jQuery Mobile早早支持了ARIA,國內知名JavaScript庫kissy也在去年(我沒記錯的話)支持了ARIA並在實際項目中使用了(可以在淘寶首頁尋覓蹤跡)。

Coach是包包中的主流嗎?ARIA就是包包中的Coach.

四、算了吧,盲人,這麼小眾,鳥個毛啊!

嘛,確實,反正你一輩子就照著設計圖切幾個死頁面就夠了。

五、靠,ARIA相關屬性茫茫多,老子調戲前台都沒時間,鳥這個!

ARIA相關屬性雖然多,哥們,要曉得,時間緊的時候,做前戲就沒有必要把每個部位都親個遍,直接針對敏感部位就行了。ARIA也是一樣,知道幾個常用的屬性就可以了。以後在領導面前吹噓啊,面試得瑟啊什麼的就有料了!

到現在全是文字,為了提高可閱讀性,避免文字閱讀吃力的潛在用戶關閉本頁面,是時候舉個實際的例子提提大家的神了,讓大家知道ARIA就是個冰激凌(跟屎放在一起只是膚色白了點而已)。

本例來自淘寶首頁,大家有興趣也可以自己看看,示例對象見下截圖(淘寶網右上角選項卡):

使用firebug查看其對應的HTML代碼,就可以看到aria的應用啦!

仔細一看,唷,這可是標准的選項卡ARIA屬性應用(該用的屬性都有),OK,對於常用的選項卡,就套用淘寶網這裡的結構吧,很標准的。就是增加幾個role屬性,增加幾個aria-屬性就可以了,然後,這個選項卡就變成了很牛逼很碉堡的無障礙閱讀選項卡啦。恩,這再一次驗證了這個道理:要變成牛人很簡單——騎在牛身上就可以了。

哎呀哎呀,聰明好學的你可能希望知道這裡aria-hidden, aria-labelledby是啥意思。

好同學,我被你這種學習的熱情感動了,於是決把我這幾天沒日沒夜整理的WAI-ARIA無障礙網頁應用屬性大全表展示出來,上面的兩個屬性,以及其他N多aria-的兄弟姐妹屬性都可以從下面幾個表中找到。

如果你被表格的高度嚇住了不想看也沒關系,記住這裡,回頭需要的時候再來找找,哦呵呵!^_^

下面三個表,依次為:ARIA role屬性值表、ARIA屬性表、ARIA狀態屬性表。

六、ARIA屬性表

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>
自定義的出錯提示彈框。

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" ></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 字符串。表示區域內容是否完整播報。值可以為truefalse。當為true時,表示輔助設備需要把整個區域內容都通報給使用者;如果為false則表示只需要通報修改的部分。
<div role="heading" aria-live="assertive" aria-atomic="true">2012年 3月</div>
還是這個時間選擇器年月標題的例子。這裡的aria-atomictrue則表示當時間改變的時候,這裡的年月日期要完整播放,不要只改了月份就只報月份內容。 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>
目前,該屬性對於inlinelist兩個值的含義暫不清楚。不過可以確定的是該屬性對應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屬性主要被rolegroup, 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類似於<h2>次標題</h2> 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 字符串。可選值為truefalse, true表示元素隱藏(不可見),false表示元素可見。
<div aria-hidden="false">23%</div>
該屬性使用非常普遍。幾乎所有涉及到顯示與隱藏這類交互或沒有交互的地方都可以應用該屬性。左邊的示例HTML代碼來自進度條進度值顯示的div, 當前aria-hiddenfalse, 表示該進度值是可見的。 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

Copyright © Linux教程網 All Rights Reserved