无障碍开发（七）之实例讲解
radio
| <div role="radio" aria-checked="true" aria-label="單選2" tabindex="0">單選tabindex="0"</div> |
這個div模擬了radio的功能，在平時讀屏軟件是分辨不出來的，但是加上role及aria-checked狀態，屏幕閱讀器就能閱讀出其內容了。
aira-label
正常情況下，form 表單的 input 組件都有對應的 label 。
|
<form role="form"> |
當 input 組件獲取到焦點時，屏幕閱讀器會讀出相應的 label 里的文本。
但是如果我們沒有給輸入框設置 label 時，當其獲得焦點時，屏幕閱讀器會讀出 aria-label 屬性的值，aria-label 不會在視覺上呈現效果。
|
<form role="form"> |
經測試，aria-label 只有加在可被 tab 到的元素上，讀屏才會讀出其中的內容。
| <spantabindex="0″ aria-label="標簽提示內容">可被tab的span標簽</span> |
使用aria-label時需注意：
同時使用aria-label和label for時，忽略后者。
同時使用aria-label和aria-labelledy時，忽略前者
IE不支持對input使用aria-label，但是支持aria-labelledby。
使用aria-labelledby時，即使對應的注釋文本被隱藏，依然能讀出來。
label for針對表單元素和div有效，span不行
表單元素中input type=button，不用加注釋，讀屏軟件可以讀出value
不是所有的title讀屏軟件都讀，a，span以及button的title個別情況下不讀，a，span在IE下直接讀標簽里的內容，button讀value值
a標簽必須加上href屬性之后才能定位，否則就要用到tabindex.
aria-labelledby
如果想要屏幕閱讀器讀的標簽文本在其他元素中存在時，可以將其值為該元素的 id。設置 aria-labelledby 的值為某個元素的 id 。那么屏幕閱讀器就可以讀取它的值。
|
<body> |
當 ul 獲取到焦點時，屏幕閱讀器會讀：“選擇你的職業”。
如果一個元素同時有 aria-labelledby 和 aria-label ，讀屏軟件會優先讀出 aria-labelledby 的內容。
progressbar、aria-valuenow、aria-valuemin、aria-valuemax
|
<div id="percent-loaded" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100" /> |
由于這個滾動條是用div寫的，沒有字面含義。然而，對開發者來說，在HTML4中，又沒有更多的語義化的標簽，所以我們需要引入ARIA這個角色和屬性，來給元素增加特定的屬性。舉個例子，role="progressbar"這個屬性告訴瀏覽器，
該元素其實是一個JavaScript實現的進度條組件。aria-valuemin 和aria-valuemax 屬性表明了進度條的最小值和最大值。 aria-valuenow則描述了當前進度條的狀態， 因此它得用JavaScript來更新。
除了直接給標簽加屬性，還可以通過JavaScript代碼把ARIA屬性添加到元素并動態地更新，如下面所示：
|
//Find the progress bar <div>in the DOM. var progressBar = document.getElementById("percent-loaded"); // Set its ARIAroles and states, // so that assistive technologies know what kind of widget it is. progressBar.setAttribute("role", "progressbar"); progressBar.setAttribute("aria-valuemin", 0); progressBar.setAttribute("aria-valuemax", 100); // Create a function that can be called at any time to update // the value of the progress bar. function updateProgress(percentComplete) { progressBar.setAttribute("aria-valuenow", percentComplete); } |
無障礙模式下點擊事件失效
a標簽可能會導致點擊事件無效也就是彈層不出來，所以我們可以將a替換成div
無障礙彈窗
應該在絕對必要的情況下才使用彈出窗口，因為這將牽扯到網頁的可訪問性問題，例如：用戶使用的屏幕讀取軟件無法向用戶說明彈出了窗口，因此如果某個網頁的鏈接將彈出新窗口，最好在這個鏈接本身的文字中予以說明。
參考
ARIA
總結
以上是生活随笔為你收集整理的无障碍开发（七）之实例讲解的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Java提高篇 —— Java三大特性之
- 下一篇： C++ primer 第12章 12.