建站
咨詢(xún)
售后
建站咨詢(xún)
新聞中心
作者 | 孫郁儼
專(zhuān)注于為中小企業(yè)提供網(wǎng)站設(shè)計(jì)、做網(wǎng)站服務(wù),電腦端+手機(jī)端+微信端的三站合一,更高效的管理,為中小企業(yè)三都免費(fèi)做網(wǎng)站提供優(yōu)質(zhì)的服務(wù)。我們立足成都，凝聚了一批互聯(lián)網(wǎng)行業(yè)人才，有力地推動(dòng)了超過(guò)千家企業(yè)的穩(wěn)健成長(zhǎng)，幫助中小企業(yè)通過(guò)網(wǎng)站建設(shè)實(shí)現(xiàn)規(guī)模擴(kuò)充和轉(zhuǎn)變。
The power of the Web is in its universality. Access by everyone regardless of disability is an essential aspect," said Tim Berners-Lee, W3C Director and inventor of the World Wide Web.
30年前，Tim Berners-Lee 在歐洲核子研究中心創(chuàng)建了第一個(gè) Web 網(wǎng)頁(yè)，宣告了萬(wàn)維網(wǎng)的誕生。自此，萬(wàn)維網(wǎng)就承載著開(kāi)放平等的愿景。
Accessibility——無(wú)障礙設(shè)計(jì)&信息無(wú)障礙（也簡(jiǎn)稱(chēng)為 A11y），雖然常常會(huì)被解釋為”為殘障人士服務(wù)“，但其無(wú)障礙設(shè)計(jì)的核心在于為所有人提供同等的體驗(yàn)。我們每個(gè)人都有可能在某些時(shí)刻成為失能者，這稱(chēng)為場(chǎng)景性殘疾（situational disability & temporary disability），比如受傷骨折后，暫時(shí)失去了部分活動(dòng)能力。又比如被強(qiáng)光照射時(shí)，看不清楚事物，在嘈雜地鐵中的聽(tīng)力產(chǎn)生障礙等等。
根據(jù) W3C 組織的定義，Web accessibility 意味著每個(gè)人都可以感知、理解并與 Web 交互，甚至為 Web 做出貢獻(xiàn)。中國(guó)工信部也指出，信息無(wú)障礙是指通過(guò)信息化手段彌補(bǔ)身體機(jī)能、所處環(huán)境等存在的差異，使任何人（無(wú)論是健全人還是殘疾人，無(wú)論是年輕人還是老年人）都能平等、方便、安全地獲取、交互、使用信息。
但在萬(wàn)物互聯(lián)的當(dāng)下，盡管我們的衣食住行早已與網(wǎng)絡(luò)世界息息相關(guān)，互聯(lián)網(wǎng)并未成一個(gè)平等的，人人都可以訪問(wèn)的世界。根據(jù)2022 年 The WebAIM Million 統(tǒng)計(jì)報(bào)告，在對(duì) 100萬(wàn) 個(gè)網(wǎng)站首頁(yè)進(jìn)行無(wú)障礙分析后，得到的結(jié)果卻差強(qiáng)人意：
- 在 100 萬(wàn)個(gè)首頁(yè)中，一共檢測(cè)到 50,829,406 項(xiàng)非重復(fù)的無(wú)障礙錯(cuò)誤，平均每個(gè)首頁(yè)有50.8個(gè)錯(cuò)誤。
- 96.8% 的首頁(yè)檢測(cè)到了 WCAG 2 錯(cuò)誤，未能達(dá)到 WCAG 2的標(biāo)準(zhǔn)，盡管現(xiàn)在最新的標(biāo)準(zhǔn)是WCAG 2.1
- 在殘障用戶(hù)的頁(yè)面訪問(wèn)流程中，每交互 19 個(gè)首頁(yè)元素，就可能遇到一個(gè)無(wú)障礙錯(cuò)誤
圖源：2022 年 The WebAIM Million 報(bào)告
在這些頁(yè)面無(wú)障礙錯(cuò)誤中，96.5%的錯(cuò)誤歸屬于以下五類(lèi)：
- 頁(yè)面顏色對(duì)比度不達(dá)標(biāo)，影響視力障礙用戶(hù)的訪問(wèn)體驗(yàn)。
- 未定義
標(biāo)簽的alt屬性，影響輔助技術(shù)（Assistive technologies, ATs) 如屏幕閱讀器等設(shè)備獲取圖片信息。
- 空鏈接和空按鈕，指不包含不包含實(shí)際的文本的標(biāo)簽或
- 表單元素標(biāo)簽沒(méi)有對(duì)應(yīng)的
- 標(biāo)簽沒(méi)有設(shè)置lang屬性。不同的語(yǔ)言類(lèi)型在屏幕閱讀器中的發(fā)音是不同的，比如six單詞在法語(yǔ)和英文兩種類(lèi)型的屏幕閱讀器中的發(fā)音就非常的不同。在上定義lang屬性，會(huì)告知 ATs 設(shè)備當(dāng)前頁(yè)面所使用的語(yǔ)言。
作為前端開(kāi)發(fā)者，我們要如何把關(guān)頁(yè)面的無(wú)障礙功能呢？
在前端開(kāi)發(fā)的視角中，每一個(gè) Web 應(yīng)用都可以拆解為 HTML、CSS 和 JavaScript。HTML 會(huì)經(jīng)過(guò) HTML Parser 將 HTML 結(jié)構(gòu)轉(zhuǎn)換成 DOM Tree；CSS 會(huì)經(jīng)過(guò) CSS Parser 將 CSS 轉(zhuǎn)換成 CSSOM Tree。最終，瀏覽器根據(jù) DOM Tree 和 CSSOM Tree 構(gòu)建出最終的 Render Tree。
對(duì)于無(wú)障礙 Web 應(yīng)用，除了包含 DOM 和 CSSOM 之外，將包含 AOM (Accessibility Tree，可訪問(wèn)性樹(shù))。AOM 可訪問(wèn)性樹(shù)和 DOM 樹(shù)平行存在。簡(jiǎn)單來(lái)說(shuō)，可訪問(wèn)性樹(shù)是 DOM 樹(shù)的一個(gè)子集。每個(gè)需要暴露給 ATs 輔助技術(shù)的 DOM 元素都對(duì)應(yīng)一個(gè)在可訪問(wèn)樹(shù)中存在的無(wú)障礙對(duì)象。定義 AOM 實(shí)現(xiàn)的標(biāo)準(zhǔn)是 WAI-ARIA(Web Accessibility Initiative – Accessible Rich Internet Application)，即可訪問(wèn)的互聯(lián)網(wǎng)富應(yīng)用標(biāo)準(zhǔn)，致力于解決應(yīng)用的可訪問(wèn)性問(wèn)題，它與HTML5 標(biāo)準(zhǔn)同屬于 W3C 組織。Web 應(yīng)用的 AOM 也并非遙不可及，打開(kāi) Chrome 瀏覽器的 Devtools，我們即可查看頁(yè)面的 AOM 結(jié)構(gòu)。
在了解了無(wú)障礙的基本概念后，我們分別從 HTML、開(kāi)發(fā)框架以及 CSS等角度，一起來(lái)看看無(wú)障礙頁(yè)面的實(shí)現(xiàn)方式吧。
編寫(xiě) HTML 時(shí)需要考慮的 Web Accessibility
就像瀏覽器引擎依賴(lài) HTML 結(jié)構(gòu)以構(gòu)建頁(yè)面 UI 骨架，ATs 設(shè)備也依賴(lài) HTML 結(jié)構(gòu)來(lái)構(gòu)建頁(yè)面的 AOM 可訪問(wèn)性樹(shù)。所以語(yǔ)義化的 HTML 對(duì)于實(shí)現(xiàn) Web 應(yīng)用無(wú)障礙至關(guān)重要，因?yàn)樵?HTML 標(biāo)簽中包含了構(gòu)建 AOM 的必要元數(shù)據(jù)。
參考上圖，ATs 設(shè)備完全可以正確地渲染滑動(dòng)輸入框，即便我們沒(méi)有在HTML 標(biāo)簽上添加 WAI-ARIA 屬性。但我們?cè)陂_(kāi)發(fā)時(shí)往往會(huì)忽略 HTML 元素的實(shí)際語(yǔ)意，而更多采用無(wú)語(yǔ)意的
以上圖為例，對(duì)于 標(biāo)簽，讀屏軟件將讀出 “Button, foo"，告知用戶(hù)當(dāng)前元素是按鈕，包含文字 foo。但對(duì)于
通過(guò) HTML 提升頁(yè)面可訪問(wèn)性
規(guī)則 1：結(jié)構(gòu)和樣式分離
在社區(qū)中一直都有人在提倡 CSS裸奔日（CSS Naked Day），編寫(xiě) HTML 時(shí)不要基于 UI 視覺(jué)效果（CSS 樣式），而是基于 UI 的頁(yè)面結(jié)構(gòu)，可以確保 HTML 的語(yǔ)義完善，增強(qiáng)頁(yè)面可訪問(wèn)性。
相關(guān)瀏覽器插件：HeadingsMap - Chrome Web Store
規(guī)則 2：只在必要時(shí)使用 ARIA
WAI-ARIA 的全稱(chēng)是 Accessible Rich Internet Applications，簡(jiǎn)稱(chēng) ARIA，是 W3C規(guī)范之一。ARIA 允許 Web 開(kāi)發(fā)者創(chuàng)建只有 ATs 技術(shù)（比如屏幕閱讀器）可以看到的內(nèi)容（屬性），用以實(shí)現(xiàn) HTML 無(wú)法達(dá)成的無(wú)障礙功能，比如：
- 增強(qiáng)交互式控件的可訪問(wèn)性，比如下拉菜單、彈窗，滑塊等
- 為頁(yè)面結(jié)構(gòu)定義有用的地標(biāo)
- 定義動(dòng)態(tài)更新的“活動(dòng)區(qū)域”
- 改善鍵盤(pán)可訪問(wèn)性和交互性
ARIA 表現(xiàn)為 HTML 的屬性，確定了元素的 ARIA 角色、狀態(tài)和屬性。這些信息幫助 ATs 技術(shù)更好地理解 Web 頁(yè)面，確保用戶(hù)與頁(yè)面元素的交互。一般情況下，ARIA 不會(huì)影響 Web 頁(yè)面的渲染，也不會(huì)影響鼠標(biāo)或鍵盤(pán)用戶(hù)的行為，只有使用輔助技術(shù)的用戶(hù)才能感知到 ARIA。開(kāi)發(fā)人員隨意使用 ARIA 所導(dǎo)致的問(wèn)題，對(duì)于頁(yè)面無(wú)障礙功能往往是致命的，而且難以察覺(jué)。
但 ARIA 永遠(yuǎn)無(wú)法替代語(yǔ)義化 HTML 標(biāo)簽，NO ARIA is better than bad ARIA。請(qǐng)優(yōu)先考慮語(yǔ)義最貼近的 HTML 標(biāo)簽，只在必要時(shí)使用 ARIA。
相關(guān)瀏覽器插件：
- Visual ARIA - Chrome Web Store
- Landmark Navigation via Keyboard or Pop-up - Chrome Web Store
規(guī)則 3：提升表單結(jié)構(gòu)的包容性
(1) 采用