您需要了解的有關網站可訪問性的所有信息
已發表: 2022-02-15每個訪問您網站的用戶都應該有權獲得可理解的用戶體驗,無論他們的能力如何。 這不僅是我們的意見,而且在某些國家,這是法律。 但這並不是確保您的網站符合可訪問性標準的唯一原因。 根據一份關於殘疾的報告,有 10 億人患有殘疾,相當於世界人口的 15% 。 有身體、視覺、認知、神經、運動和聽力障礙的人將使用您的網站。 雖然使用這些數字作為一個理由感覺令人反感,但這是大量潛在訪問者。 讓您的網站可供所有人使用是值得的。
可訪問網站與那些通常無法訪問的網站之間的差距通常發生在預算中。 使您的網站具有包容性只是在開發過程中需要更多的努力,而更多的努力意味著更多的錢。 但是,當戰略性地完成並使用像 Drupal 這樣的 CMS 時,它不一定是一個重大的努力。 Drupal 核心支持設計和開發符合 WCAG 2.0 和 ATAG 2.0 標準的網站。 事實上,有一個完整的社區(Drupal Accessibility 社區)致力於改進和跟上可訪問性標準。 你甚至可以說可訪問性是 Drupal 的核心優勢。
如果您要重建您的網站,這一切都很好,但如果您正在使用現有的網站呢? 讓我們深入研究 Web 可訪問性以及如何知道您的網站是否可訪問。
什麼是無障礙網頁?
Web 可訪問性是 Web 開發中非常重要的一個方面。 用外行的話來說,網絡可訪問性是確保每個人都可以訪問您的網站,無論他們的殘疾如何。 儘管人們經常假設,可訪問性不僅僅與殘疾人有關。 作為一個身體健全的人,您可能會發現自己處於某些情況下——情境性或臨時性的——這可能會影響您訪問網站的方式。
為什麼 Web 可訪問性很重要
另一個誤解是,網絡可訪問性主要用於創建積極的品牌形象。 但是,擁有一個可訪問的網站比許多人想像的要多得多。
- 擴大您的受眾範圍
- 避免法律問題(請記住 2019 年針對碧昂絲的訴訟,當時她的網站不符合 ADA(美國殘疾人法案))
- 改善可訪問性的用戶體驗也意味著您正在提高整體 UX 分數
- 提高您的網站在搜索引擎上的排名
也就是說,最近以目標為導向的品牌的增長和普及確實表明,包容性可能是一個關鍵的品牌差異化因素。
一致性和級別
萬維網聯盟 (W3C) 開發並發布了一套指南 - WCAG(Web 內容可訪問性指南),用於管理 Web 可訪問性標準。 這些標準(WCAG 2.0、WCAG 2.1 和 WCAG 2.2)的成功標準具有三個一致性級別:
- A級
- AA 級
- AAA級
A 級- 這是可訪問性的最低級別,涵蓋了可訪問性功能的最基本要求。
AA級 - 此級別需要 A 級中的所有內容以及一些附加要求。 當一個網站符合這個級別時,這是一件大事,因為許多最大的可訪問性障礙都被清除了。
AAA 級- AAA 級需要 A 級和 AA 級的所有內容以及一些額外的要求。 大多數網站都很難達到這個級別,它是WCAG標準下的最高級別的可訪問性。
你怎麼知道你的網站是否可以訪問?
WCAG 制定了 4 項原則和 13 項 Web 可訪問性指南。 不遵守這四項原則中的任何一項都會使殘障用戶無法訪問您的網站。 這些原則被稱為 POUR 原則
- 可感知的
- 可操作
- 可以理解
- 強大的
可感知的 - 可感知的所有指南都圍繞確保人們能夠找到您的內容。
可操作- 您需要確保您的網站是可操作的。 人們必須能夠使用您的網站。
可理解 - 人們必須能夠理解您的網站。
健壯- 您的網站應與所有瀏覽器、操作系統和設備兼容。
無障礙指南
現在,每個原則都有自己的一套指導方針,我們將在這裡討論:
可感知的準則
1.1) 替代文本- 第一個可感知指南,可感知 1.1要求所有非文本內容都具有替代文本。 這意味著圖像需要有有意義的替代文本。 替代文本應描述圖像中發生的情況。
1.2) 基於時間的媒體-可感知的 1.2要求有基於時間的媒體的替代選項。 為有聽力障礙的人在視頻中添加隱藏式字幕。 關閉字幕可以幫助給他們提供背景信息。
1.3) 適應性——可感知 1.3要求內容可以以不同的方式呈現,而不會丟失上下文。
1.4) Distinguishable - perceivable 的最後一條準則是Perceivable 1.4 ,它要求內容可以在視覺上與其背景分離。 這意味著文本和背景顏色之間應該有足夠的對比度。 文本需要具有 4.5 的最小對比度。
可操作指南
2.1) 可訪問鍵盤- 第一個可操作指南 2.1要求網站的所有部分都可以僅使用鍵盤訪問。
2.2) 足夠的時間 - 可操作 2.2要求人們有足夠的時間來使用您網站上的內容。 您必須給用戶時間來完成任務而不會感到匆忙。 你還需要考慮到不同的人有不同的能力,有些人做事的速度可能會慢一些。
2.3) 癲癇發作和身體反應 - 可操作 2.3要求內容的設計方式不會導致癲癇發作。 動畫和視頻每秒閃爍次數不應超過 3 次。
2.4) 可導航 - 可操作 2.4要求人們可以瀏覽網站並了解他們在網站中的位置。 頁面上的所有鏈接、輸入和按鈕都應具有焦點狀態,以指示用戶在使用選項卡導航時用戶在屏幕上的位置。
2.5) 輸入模式- Operable 的最後一個準則是Operable 2.5 ,它要求網站的所有部分都可以使用鍵盤以外的其他輸入設備訪問。 基本上,您需要確保您的網站可以使用鼠標、觸摸屏設備和語音轉文本。
可理解的準則
3.1) 可讀性——可理解性 3.1要求內容可讀且易於理解。 使用簡單的語言並儘量避免使用行話。
3.2) 可預測 - 可理解 3.2要求網頁的外觀和操作方式是可預測的。 每個頁面的內容會有所不同,但頁面的主要結構應該保持不變。 導航、鏈接順序和搜索應始終位於頁面上的同一位置。
3.3) 輸入輔助——可理解的 3.3要求人們易於糾正和避免錯誤。
強大的指導方針
4.1) Compatible - 在 robust 下只有一個準則,那就是4.1 。 這要求網站應與所有瀏覽器、操作系統和設備兼容。 這可以通過編寫有效的語義 HTML 來實現。 如果出於某種原因該網站仍需要一些輔助功能幫助,請添加一些 ARIA 屬性。
如何測試可訪問性?
最後,您希望將可訪問性測試納入您的網站管理流程。 例如,您可以通過頁面來測試鍵盤可訪問性。 幸運的是,互聯網上有許多工具可用於自動化測試:
- 海浪
- 燈塔
參考網站
有關標準和指南,請參閱以下 W3C 站點。
- https://www.w3.org/
- https://www.w3.org/WAI/
- https://www.w3.org/WAI/standards-guidelines/wcag/
- https://www.w3.org/WAI/WCAG21/quickref/