无障碍开发（七）之实例讲解
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 到的元素上，讀屏才會讀出其中的內容。
| <span?tabindex="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 ARIA?roles 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); ?} |
?
參考?
ARIA
?
?
?
轉載于:https://www.cnblogs.com/kunmomo/p/11572839.html
總結
以上是生活随笔為你收集整理的无障碍开发（七）之实例讲解的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 无障碍开发（六）之ARIA在HTML中的
- 下一篇： 无障碍开发（九）之tabindex属性