- FAQ
- HTML TAG - Accessibility
HTML TAG - Accessibility
- role
- 告诉辅助设备（ex 如屏幕阅读器）这个元素所扮演的角色 (ex 属于 WAI-ARIA 无障碍网页应用属性).
- 例如点击的按钮，就是 role="button"；会让这个元素可点击；
- 前端的基礎修養：aria-label
- aria-label 是一個 HTML attribute，用來告訴 "讀屏軟件" 某個元素是什麼，提升 Web Accessibility 無障礙 / 可達性。
- 不能给 span 添加注释，但是 div 可以
- 初窺
- 圖片 的 alt 屬性亦有此效果。
- 假如 標籤同時有 aria-label 與 alt 屬性，讀屏軟件會閱讀 aria-label。
- alt 本身作用，當圖片無法加載時，瀏覽器會將 alt 的內容展示給用戶。
- aria-label 與 title
- 全局屬性 title 是用作 提示 與 補充 的，
- 讀屏軟件完全不會識別 title ，Voice Over1、JAWS2、NVDA3 都不會去識別，title 對於 Accessibility 毫無幫助。
"Voice Over 是 Apple (Mac & iOS) 的讀屏軟件↩
JAWS 是一個讀屏軟件，適用於 Windows↩
NVDA 是一個開源讀屏軟件 www.nvaccess.org/↩"
- aria-label 與 iconfont
- iconfont 或 svg 圖標，需要使用 arial-label 來標注。
- aria-hidden 噤聲，這樣讀屏就不會唸出兩次 “設置”
- aria-label 作為提示
- 我們常會用 tooltip 作為提示，比如 jquery.tipsy。 他默認使用 title 作為數據來源，也可以使用其它屬性：
"$('#example-custom-attribute').tipsy({title: 'aria-label'});"
- GitHub 使用的純 CSS 方案不錯，使用 CSS attr() 獲取 arial-label 的內容作為提示，在不需要兼容老舊瀏覽器的情況下建議使用，整理代碼如下：
".tip {
position: relative;
}
.tip:before {
display: none;
position: absolute;
top: auto;
right: 50%;
bottom: -7px;
margin-right: -5px;
width: 0;
height: 0;
content: '';
border: 5px solid transparent;
border-bottom-color: rgba(0, 0, 0, 0.9);
pointer-events: none;
z-index: 10000;
}
.tip:after {
display: none;
position: absolute;
top: 100%;
right: 50%;
padding: 0 10px;
border-radius: 3px;
background-color: rgba(0, 0, 0, 0.9);
color: #fff;
font-size: 11px;
font-weight: 500;
content: attr(aria-label);
white-space: pre;
z-index: 10000;
margin-top: 5px;
line-height: 26px;
transform: translateX(50%);
}"
- aria-label 與表單
- placeholder 的出現導致了大量不帶
- 使用 CSS 來隱藏 .sr-only (screen reader only) 這個 class 的標籤，注意不能使用 display: none，否則讀屏軟件會忽略，只在視覺上隱藏即可。
- aria-label 理論上是作用於所有 tag 的，但是實際測試下來，不支持 h1-h6。
- aria-labelledby