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