資訊專欄INFORMATION COLUMN
簡(jiǎn)介
無(wú)障礙、WAI、ARIA、a11y、Accessibility、框架選擇
如何向 視障用戶 介紹兔子長(zhǎng)什么樣？有的同學(xué)可能會(huì)說(shuō)：
毛茸茸的長(zhǎng)耳朵。
短短圓圓的小尾巴。
紅紅的眼睛。
那如何向 視障用戶 介紹網(wǎng)頁(yè)長(zhǎng)什么樣？有看過(guò) 語(yǔ)義化與無(wú)障礙樹(shù) 的同學(xué)可能會(huì)說(shuō)：
header 標(biāo)簽表示一個(gè)網(wǎng)頁(yè)的頁(yè)眉。
main 標(biāo)簽表示一個(gè)網(wǎng)頁(yè)的內(nèi)容。
footer 標(biāo)簽表示一個(gè)網(wǎng)頁(yè)的頁(yè)腳。
哎呦不錯(cuò)哦~ 那你給我表演一下怎么描述 導(dǎo)航 呢？
導(dǎo)航 現(xiàn)在在 HTML5 語(yǔ)義化標(biāo)簽的加持下導(dǎo)航可以這樣寫(xiě)：
不同用戶理解：
普通用戶通過(guò) 顯示效果 識(shí)別出是導(dǎo)航。
程序員通過(guò) nav 標(biāo)簽 識(shí)別出是導(dǎo)航。
視障用戶通過(guò) 屏幕閱讀器 識(shí)別出是導(dǎo)航。
過(guò)去這個(gè)時(shí)候有同學(xué)想過(guò)在 標(biāo)簽還沒(méi)有出現(xiàn)的時(shí)候，只靠 div 和 span 標(biāo)簽一把梭是時(shí)候怎么寫(xiě)的？
不同用戶理解：
普通用戶通過(guò) 顯示效果 識(shí)別出是導(dǎo)航。
程序員通過(guò) class="navigation" 識(shí)別出是導(dǎo)航。
視障用戶通過(guò) 屏幕閱讀器 識(shí)別出是兩個(gè)鏈接。
這對(duì)于 視障用戶 多么不友好，他們除了知道有兩個(gè)鏈接并不能識(shí)別出是導(dǎo)航。
Cosplay聰明的同學(xué)肯定想到了：
是否可以指定一個(gè)規(guī)范？
是否可以通過(guò) cosplay 來(lái)把 div 標(biāo)簽 變成 nav 標(biāo)簽？
媽耶你們也真的是太聰明啦！確實(shí)存在這一個(gè)規(guī)范叫做 Web Accessibility Initiative - Accessible Rich Internet Applications 縮寫(xiě) WAI-ARIA，它的作用就和同學(xué)們想到的一樣通過(guò)角色扮演來(lái)描述 html 使得 視力障礙 用戶可以理解 html 所表達(dá)的含義。
使用 WAI-ARIA 來(lái)表單 nav 標(biāo)簽，屏幕閱讀器便會(huì)幫助視障用戶識(shí)別出是導(dǎo)航 ：
好奇寶寶
好奇寶寶肯定會(huì)問(wèn)：可是有的頁(yè)面有 主導(dǎo)航 和 副導(dǎo)航 甚至還有 面包屑導(dǎo)航、奇奇怪怪不知道什么的導(dǎo)航 正常用戶可以通過(guò)視覺(jué)秒理解是什么，那視障用戶怎么辦呢？
媽耶你們真的是有夠聰明，居然能想到這么厲害的問(wèn)題，不過(guò)沒(méi)關(guān)系 WAI-ARIA 已經(jīng)定義好了通過(guò) aria-label 標(biāo)簽來(lái)描述是什么：
WAI-ARIA
可能還是有同學(xué)不是很能理解 WAI-ARIA 是什么，簡(jiǎn)單來(lái)說(shuō) WAI-ARIA 便是視障用戶的 UI：
| 用戶 | 兔子 | 頁(yè)面 |
|---|---|---|
| 普通用戶 | 看到兔子樣子 | 看到頁(yè)面效果 |
| 視障用戶 | 知道兔子構(gòu)成 | 知道頁(yè)面構(gòu)成 |
通過(guò)上面的導(dǎo)航例子也大概知道了 WAI-ARIA 的使用方法，但是 WAI-ARIA 并沒(méi)有這么簡(jiǎn)單，它其實(shí)定義了一系列的屬性和角色來(lái)幫助 視力障礙 用戶理解頁(yè)面，只不過(guò)導(dǎo)航的結(jié)構(gòu)比較簡(jiǎn)單，如果像是復(fù)雜一點(diǎn)的 多項(xiàng)選擇 除了要使用 WAI-ARIA 規(guī)定的標(biāo)簽，還有實(shí)現(xiàn) WAI-ARIA 規(guī)定的 焦點(diǎn)、鍵盤(pán)事件 等。
更多內(nèi)容可以閱讀 WAI-ARIA 這份文檔算是詳細(xì)描述了所有的規(guī)則，如果覺(jué)得復(fù)雜可以閱讀 WAI-ARIA 實(shí)踐，如果覺(jué)得英語(yǔ)看不來(lái)可以閱讀 餓了么前端團(tuán)隊(duì)翻譯的 WAI-ARIA 實(shí)踐。
題外話 關(guān)于學(xué)習(xí)有的人很奇怪對(duì)事物的認(rèn)識(shí)取決于第一次，比如小二先接觸的 LOL 后面玩 DotA 對(duì)正反補(bǔ)兵很不適應(yīng)。所以在小二看來(lái)應(yīng)該在學(xué)習(xí) HTML 的時(shí)候應(yīng)該穿插部分 WAI-ARIA 內(nèi)容，在學(xué)習(xí)部分 JavaScript 后應(yīng)該穿插實(shí)現(xiàn)幾個(gè) WAI-ARIA 規(guī)定的角色，當(dāng)然現(xiàn)在學(xué)習(xí)也不遲。
現(xiàn)實(shí)情況如果大家有追更小二就會(huì)記得：
扼住焦點(diǎn)的喉嚨 挑選框架時(shí)提到的 Element UI 部分語(yǔ)義化做的還不錯(cuò)。
如果你真的點(diǎn)進(jìn)去上文提到的 餓了么前端團(tuán)隊(duì)翻譯的 WAI-ARIA 實(shí)踐 你就會(huì)發(fā)現(xiàn)：這個(gè)項(xiàng)目停止在了 2018年7月26日 而且沒(méi)有完全翻譯完。
可能是因?yàn)槟承┰驅(qū)е碌模峭ㄟ^(guò)閱讀 餓了么前端團(tuán)隊(duì)翻譯的 WAI-ARIA 實(shí)踐 在每篇文章底部 Example 中重復(fù)出現(xiàn) Material 和 Element，小二個(gè)人能感受到的是翻譯這篇文章和寫(xiě)相關(guān)代碼同學(xué)對(duì)幫助 無(wú)障礙群體的熱情。
社會(huì)挺現(xiàn)實(shí)的大家都忙忙碌碌、加班賺錢(qián)有很多需要的事情要去做小二也不例外，無(wú)障礙可能是個(gè)遙遠(yuǎn)的話題。小二這幾篇文章也只能是幫大家認(rèn)識(shí)一下這個(gè)群體和給出相關(guān)的知識(shí)，本來(lái)還想講一下 無(wú)障礙視覺(jué)設(shè)計(jì) 相關(guān)內(nèi)容，但是 魚(yú)頭哥哥 最近分享了幾篇相關(guān)文章都挺好的。
期望如果可以使用 heading 和 語(yǔ)義化、圖片加上 alt 也挺好。
如果還可以選擇一個(gè)無(wú)障礙做得好的框架，比如二哲哥哥常說(shuō)的 material ui。
如果挺可以選擇閱讀 material ui 源碼和 WAI-ARIA。
最后希望魚(yú)頭哥哥的 無(wú)障礙世界 可以實(shí)現(xiàn)。
無(wú)障礙相關(guān)內(nèi)容H1 の 小秘密
img の 小九九
無(wú)障礙世界
扼住焦點(diǎn)的喉嚨
語(yǔ)義化與無(wú)障礙樹(shù)
HTML Cosplay
一起成長(zhǎng)在困惑的城市里總少不了并肩同行的 伙伴 讓我們一起成長(zhǎng)。
如果您想讓更多人看到文章可以點(diǎn)個(gè) 點(diǎn)贊。
如果您想激勵(lì)小二可以到 Github 給個(gè) 小星星。
如果您想與小二更多交流添加微信 m353839115。
本文原稿來(lái)自 PushMeTop
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://specialneedsforspecialkids.com/yun/103592.html
showImg(https://segmentfault.com/img/remote/1460000018793640?w=900&h=500); 簡(jiǎn)介 安全、注入攻擊、XSS 13歲女學(xué)生被捕：因發(fā)布 JavaScript 無(wú)限循環(huán)代碼。 這條新聞是來(lái)自 2019年3月10日 很多同學(xué)匆匆一瞥便滑動(dòng)屏幕去看下一條消息了，并沒(méi)有去了解這段代碼是什么，怎么辦才能防止這個(gè)問(wèn)題。事情發(fā)生后為了抗議日本...
showImg(https://segmentfault.com/img/remote/1460000018760855?w=900&h=500); 簡(jiǎn)介 SEO、Meta、搜索引擎優(yōu)化、簡(jiǎn)單教程 細(xì)心的同學(xué)可能發(fā)現(xiàn)了開(kāi)頭出現(xiàn)了關(guān)鍵字，這是為什么呢？閱讀完本文后大家就會(huì)明白了。 同學(xué)們有沒(méi)有想過(guò)互聯(lián)網(wǎng)上用戶、網(wǎng)站 有多少呢？這里提供一個(gè)網(wǎng)站 internet live stats 里面實(shí)時(shí)的給出了...
showImg(https://segmentfault.com/img/remote/1460000018760855?w=900&h=500); 簡(jiǎn)介 SEO、Meta、搜索引擎優(yōu)化、簡(jiǎn)單教程 細(xì)心的同學(xué)可能發(fā)現(xiàn)了開(kāi)頭出現(xiàn)了關(guān)鍵字，這是為什么呢？閱讀完本文后大家就會(huì)明白了。 同學(xué)們有沒(méi)有想過(guò)互聯(lián)網(wǎng)上用戶、網(wǎng)站 有多少呢？這里提供一個(gè)網(wǎng)站 internet live stats 里面實(shí)時(shí)的給出了...
showImg(https://segmentfault.com/img/remote/1460000018653055?w=900&h=500); 簡(jiǎn)介 字符編碼、字符長(zhǎng)度錯(cuò)誤、截取字符錯(cuò)誤、UTF8、Unicode 計(jì)算機(jī)重重底層之下都是由 0 和 1 組合，但是你知道他們是怎么一步步變成字符串的嘛？在我們現(xiàn)實(shí)生活中最常見(jiàn)的例子可以通過(guò) wo 在新華字典中找到 我 這個(gè)字。同樣計(jì)算機(jī)通過(guò) 0 ...
showImg(https://segmentfault.com/img/remote/1460000018747727?w=900&h=500); 簡(jiǎn)介 heading 標(biāo)簽、SEO、無(wú)障礙閱讀 ps: 內(nèi)容有點(diǎn)多，本來(lái)只想講一個(gè)點(diǎn)，但是關(guān)聯(lián)性太強(qiáng)了，所以辛苦大家了。 在學(xué)習(xí) HTML 標(biāo)簽的時(shí)候，很多教程只告訴你 怎么用 而沒(méi)有講清楚 是什么，讓我們一起從 h1 到 h6 開(kāi)始重新認(rèn)識(shí) HTM...
閱讀 859·2021-11-25 09:44
閱讀 1063·2021-11-19 09:40
閱讀 7062·2021-09-07 10:23
閱讀 1975·2019-08-28 17:51
閱讀 1106·2019-08-26 10:59
閱讀 1927·2019-08-26 10:25
閱讀 3130·2019-08-23 18:22
閱讀 865·2019-08-23 16:58
