文章 Web 可訪問性初學者指南

已發表: 2022-08-12

Web 可訪問性最近經常出現在新聞中。 最近，涉及 Domino's Pizza 的案件有可能一直訴諸最高法院，這可能是一個里程碑式的決定，將塑造網絡可訪問性的未來。

無障礙網站就是那些殘障人士可以感知、操作和理解的網站。 它們可以很好地與屏幕閱讀器等輔助技術配合使用，為其他障礙提供替代媒介，並允許使用鼠標以外的設備進行導航。

無法訪問的網站排除了潛在客戶群，並增加了根據 ADA 標題 III 提起訴訟的機會。 它可能會損害搜索排名——更多內容見下文。

在美國，大約八分之一的人患有殘疾。 如果將定義擴大到包括那些中度受損的人，這個數字將躍升至近五分之一。

未能容納如此龐大的受眾會限製網站對您的業務產生的積極影響——更不用說您的品牌與人們產生共鳴和激發信念的能力了。 構建一個可在盡可能多的瀏覽器中使用且可供盡可能多的人使用的可訪問網站可以幫助您的業務——但這也是正確的做法。

本指南的目的是幫助您了解 Web 可訪問性，以便您可以發展您的品牌並更好地為您的網站訪客提供服務——因為他們就是這樣。 不是訪客； 不是客戶； 但指望您幫助他們找到他們所尋求的信息的客人。 在本指南中，我們將介紹以下內容：

  1. 什麼是無障礙網頁？
  2. 可訪問性的好處
  3. 無障礙規定
  4. 無障礙標準
  5. 可訪問性測試：自動與人工
  6. 不合規風險
  7. 可訪問性自我評估
  8. 有用的專家和資源

當我們完成時，您將清楚地了解與 Web 可訪問性相關的所有內容，並訪問一些相關資源，以幫助您進行自己的網站評估。 讓我們潛入水中！

什麼是無障礙網頁？

讓我們從定義可訪問性開始。 根據 W3C（萬維網聯盟）的說法，“Web 可訪問性意味著殘障人士可以使用 Web。 更具體地說，Web 可訪問性意味著殘障人士可以感知、理解、導航和與 Web 交互，並且他們可以為 Web 做出貢獻。 網絡可訪問性也使其他人受益，包括因年齡增長而能力變化的老年人。”

當我們在 BrandExtract 構建網站時，我們會對超過 1% 的客戶受眾使用的每個瀏覽器版本進行測試。 網站可以在盡可能多的瀏覽器中使用是有意義的，這樣我們就不會排除潛在客戶、合作夥伴或員工。 儘管這會影響他們網站的總成本，但我們從來不需要說服任何人這是值得的努力。

作為網絡瀏覽器，人類應該得到同樣的——如果不是更多的話——考慮。

在討論 Web 可訪問性時，我們傾向於考慮的第一件事是視覺障礙訪問者的網站可用性，但視覺障礙只是一個殘疾類別。 聽覺、身體和認知障礙同樣重要，必須以不同的方式加以解決。

有這些障礙的人可以使用各種輔助設備來幫助更輕鬆地瀏覽網絡。 無障礙網站就是那些與這些輔助設備配合得很好，並努力提供一種用戶體驗，從一開始就最大限度地減少對輔助設備的需求的網站。

可訪問性的好處

良好的規劃是構建高質量、可用網站的關鍵。 它需要深思熟慮和良好的流程。 圍繞可訪問性規劃您的 UX 和設計工作會提高工作細節的標準。 增加勤奮可確保您的網站對人類和機器人都表現良好。

可以通知屏幕閱讀器或其他輔助技術的相同細節也有助於搜索引擎機器人抓取和索引您的網站。 根據谷歌網站管理員中心博客，可訪問的網站更容易被谷歌搜索引擎索引，這可以帶來更好的匹配和更高的排名。 十多年來，谷歌一直強調這一事實。

我們為使有障礙的用戶更容易訪問網站所做的許多事情也有助於其他用戶。 更大的字體，更好的對比度 和許多其他基本的可訪問性原則使網站對每個人都更有用。

無障礙規定

快速免責聲明：我不是律師。 您為實施任何不完全遵守下述所有規定（以及那些省略的規定）而做出的決定會帶來風險，並且應該讓您的法律團隊參與進來。 他們有適當的資格來評估不遵守這些規定的風險和後果。 “你可能會被起訴”不僅僅是一種可怕的銷售策略。

無障礙規定因國家/地區而異。 這裡有一些你需要知道的。

美國

在美國，您應該熟悉 1990 年美國殘疾人法案（修訂版 (ADA)）、1996 年電信法案第 255 條、1986 年航空承運人接入法案和 2010 年 21 世紀通信和視頻無障礙法案（CVAA）。

美國政府

如果您為美國政府機構或從政府獲得資金的實體創建網站，您還需要了解 1973 年美國康復法案第 504 條和同一美國的第 508 條 康復法案1973年 .

歐洲聯盟

如果您位於歐盟 (EU) 或在歐盟 (EU) 開展重要業務，您 需要請注意擬議的歐洲無障礙法案以及可能的網絡和移動無障礙指令。 一些歐盟成員國將有額外的規定。 例如，英國有 2010 年的《平等法》。

加拿大

如果您在加拿大開展業務，請確保您了解《加拿大人權法》以及《通信和聯邦身份政策》。 許多其他國家也有自己的個人法規。

感到不知所措是完全自然的。 沒有個人或小公司 可以除非這是他們的核心關注點，否則可能會跟上所有法規。 幸運的是，有標準機構、指南和專家來幫助我們做對。

無障礙標準

大多數法規都藉鑑了 WCAG 1.0 和 WCAG 2.0 標準作為構建可訪問網站的指南。 這兩個標準都是由 Web 內容可訪問性指南工作組建立和維護的，該工作組是一個由 Web 開發人員和來自各種公司和組織的專家組成的聯盟。

WCAG 工作組是 W3C（萬維網聯盟）下的眾多工作組之一。 W3C 是負責 HTML、CSS 和 Web 所依賴的許多其他技術的國際標準社區。

WCAG 1.0 和 2.0 將在很大程度上將您引導到同一個地方，但 WCAG 2.0 具有更容易測量的啟發式方法。 符合 WCAG 1.0 的網站很可能符合 WCAG 2.0。 所有符合 WCAG 2.0 的網站都將符合 WCAG 1.0。 兩者之間的區別在於它們如何組織指南。 引用 W3C 網站：

WCAG 1.0 是圍繞具有檢查點的指南組織的，這些檢查點是優先級 1、2 或 3。確定是否符合 WCAG 1.0 的基礎是檢查點。

WCAG 2.0 圍繞 Web 可訪問性的四個設計原則進行組織。 每個原則都有指導方針，每個指導方針都有 A、AA 或 AAA 級別的可測試成功標準。 確定是否符合 WCAG 2.0 的基礎是成功標準。

WCAG 是一個不斷發展的標準。 WCAG 2.1 已達到候選推薦狀態，最早可在 2018 年夏天在任何新立法中採用。WCAG 2.1 是 WCAG 2.0 的補充。 換句話說，符合 2.1 的站點將符合 2.0 和 1.0，因此在任何新計劃中以 WCAG 2.1 為目標是有意義的。

讓我們分解 WCAG 2.1 層次結構。 提出的四個基本設計原則是：

  • 信息和用戶界面組件必須以它們可以感知的方式呈現。
  • 用戶界面組件和導航必須是可操作的。
  • 信息和用戶界面的操作必須是可以理解的。
  • 內容必須足夠健壯，可以被包括輔助技術在內的各種用戶代理可靠地解釋。

這些原則中的每一個都包含一系列指導方針。 例如，從屬於第一條原則，我們會發現以下準則：

  • 創建可以以不同方式（例如簡單佈局）呈現的內容，而不會丟失信息或結構。

根據該指南，我們發現了以下成功標準：

  • 通過演示傳達的信息、結構和關係可以通過程序確定或以文本形式提供。
  • 當呈現內容的順序影響其含義時，可以以編程方式確定正確的閱讀順序。
  • 為理解和操作內容而提供的說明並不僅僅依賴於組件的感官特徵，例如形狀、大小、視覺位置、方向或聲音。
  • 在以下情況下，可以通過編程方式確定收集用戶信息的每個輸入字段的含義：
    1. 輸入字段具有映射到 HTML 5.2 自動填充字段名稱的含義； 和
    2. 內容是使用支持識別表單輸入數據的預期含義的技術實現的。
  • 在使用標記語言實現的內容中，用戶界面組件、圖標和區域的用途可以通過編程方式確定。

每個原則都有一個或多個指導方針，每個指導方針都有一個或多個成功標準。 當前的 WCAG 2.1 草案有四項原則、十四項指導方針和七十八條成功標準。 必鬚根據所有這些標準對網站進行審核，以確保符合標準，並且這些標準中的大多數都涉及多項測試。

但是等等，還有更多。 每一次的成功 標準具有三個一致性級別：A、AA 和AAA。 正如 Section508.gov 網站所解釋的，這些級別如下：

A級（最低）

解決最基本的 Web 可訪問性功能，但通常無法實現廣泛的可訪問性

AA級（中檔）

解決殘疾用戶最常見的障礙，並符合修訂後的 508 標準

AAA級（最高）

解決最高級別的 Web 可訪問性，但不建議將其作為一般策略，因為不可能滿足某些內容的所有標準。

仔細選擇您希望網站達到的一致性級別，因為這將對進度和預算產生重大影響。

可訪問性測試：自動與人工

有免費的工具和在線服務可以對單個網頁甚至整個網站進行自動化測試。 這些工具可以是瀏覽器插件、獨立桌面應用程序、自託管服務、免費在線服務 和商業（付費）自動化測試。

我們最喜歡的自動化工具是：

  • tenon.io - Tenon 是 SaaS，可以通過瀏覽器或 API 執行按需搜索。 定價取決於您需要執行的 API 請求（掃描）的數量。 它有很好的文檔記錄，可以很容易地整合到 BrandExtract 的 CMS SAM 中。
  • Paypal 的 AATT（自動可訪問性測試工具） - AATT 是一個作為服務運行的 node.js 應用程序。 它可以掃描單個頁面或整個站點，並且可以配置為可以訪問非公開（受密碼保護）網頁。 掃描請求可以通過 API 提交，響應以易於解析的 JSON 格式返回。 AATT 也很容易與 SAM 集成。
  • 斧頭Dequeue Systems 的開發者工具 - ax 在 Chrome 和 Firefox 的瀏覽器插件中可用。 它擴展了瀏覽器的內置開發人員工具，並創建了一個漂亮、易於解析的報告，並帶有明確的建議。

這些工具快速且易於使用，但不是靈丹妙藥。 WCAG 文件中提出的許多指導方針的措辭都需要仔細分析和評估。 這些指南如何適用於獨特的設計可能是主觀的。 為什麼他們措辭模糊？ 這些指導方針必須是面向未來的。

由於 Web 和相關技術是一種不斷發展的媒介，因此這些指南需要適用於尚未發明的技術、設備和界面。

此外，自動化測試工具根本無法以與人類相同的方式感知用戶體驗。 您可以使用一些可衡量的指標來做得非常好，例如字體是否滿足最小尺寸和對比度標準。 但還有許多其他變量更難以衡量。 例如，文本中是否充分傳達了圖表的含義？）

這就是人類介入的地方。對網站的人工測試是一個經過深思熟慮且嚴格的過程，可能需要數百小時。 但這對於在受眾和品牌之間建立同理心至關重要。

在一個完美的場景中，測試應該與具有您正在解決的相同障礙的用戶進行測試，並且具有知道網站什麼是對什麼是錯的專業知識。

找到由這些專家組成的團隊的唯一實用方法是外包給專門從事可訪問性測試的知名第三方。 僱用人員來測試網站的可訪問性可能非常昂貴。 您可能會發現讓人工測試更複雜的交互式頁面是一種具有成本效益的折衷方案。

不合規風險

我們都想相信我們將建立包容性網站僅僅是因為這是正確的做法。 但事實是，有時我們的好意會超過我們的錢包。 為什麼一家公司要花費數千美元來使其網站易於訪問？

原因之一是將風險降至最低。 即使您不向消費者提供直接服務，您仍可能面臨被發現違反一項或多項法規的風險。

考慮在您的組織內尋找工作但由於無法訪問您的在線職位數據庫而被排除在外的用戶。 那些無法訪問貴公司財務狀況的投資者怎麼辦？ 當這些事情發生時，你可以被發現違反規定。

沒有政府實體會花時間上網、審核網站和尋找不符合網絡可訪問性準則的網站。 當您的網站準備好上線時，沒有檢查員會“簽字”。

確保工作順利完成完全取決於您的組織。 您有責任選擇一個認真對待網絡可訪問性並擁有內部或外部資源的合作夥伴，以確保工作正確完成。

很難量化被起訴的可能性和隨後的成本，但即使是毫無根據的訴訟也很容易被駁回，也可能使公司損失數千美元的法律費用。 如果很明顯您沒有為使您的網站易於訪問而付出足夠的努力，那麼您可能會失敗（或被迫定居）。

2016 年提起的網絡可訪問性訴訟超過 260 起，2017 年的數字顯著增加。這不包括那些未經訴訟就和解的案件。 與您的律師交談以真正了解可能性，但要知道風險是真實存在的。

如果您有興趣了解有關不合規風險的更多信息，我強烈推薦 Karl Groves 的這篇博文。 這是一個平衡的觀點，以實數為後盾。 請記住，它是幾年前寫的，隨著訴訟數量的增加，情況已經發生了變化。

可訪問性自我評估

希望在這一點上，您已經很好地掌握了可用性這一主題。 但感到不知所措是完全自然的。 進行小的改進是降低訴訟風險和潛在損害的良好開端。 您可以採取以下幾個步驟：

評估您的風險

諮詢您的法律團隊併計算（盡可能）您的風險。 讓他們在公共記錄中搜索該領域正在進行的和最近的訴訟。 趨勢在上升嗎？ 成功率是多少？ 您的行業是否似乎正在看到更多的活動？ 訴訟會給您的組織帶來什麼損失，無論是美元還是對您的品牌的負面影響？ 收入損失怎麼辦？

研究成本

如果您正在構建一個新站點，請讓您的開發合作夥伴使用自動化可訪問性測試工具創建一個項目，以確保他們的工作符合 WCAG 2.1 標準。 此外，考慮與有資源進行人體測試的第三方無障礙顧問會面。 直接從他們那裡獲得定價，以便他們可以獨立於您的開發人員工作。

算一算

這聽起來很無情，但事實是您必須確定風險是否大於成本。 在 BrandExtract，我們相信對於大多數企業對企業 (B2B) 網站而言，在啟動和任何重大更新時對 WCAG 2.0 A 級一致性進行徹底的自動化測試是一種具有成本效益的解決方案，表明了使網站易於訪問的明確努力。 對於面向消費者的網站或具有豐富、複雜交互性的網站，可能需要進行更徹底的測試。 再次，您應該諮詢法律專業人士，以清楚準確地了解違規風險。

制定啟動計劃

如果您的網站是面向消費者的，那麼在新網站啟動時或在發生重大變化時進行人工測試是合理的。 對於沒有很多複雜性或豐富交互的 B2B 站點，站點的自動化測試可能就足夠了。

制定維護計劃

您提出的任何計劃都必須包括按需或定期自動進行的持續測試。 只有在網站進行重大修改和/或重新設計時才需要進行人工測試。

有用的專家和資源

在研究如何實現一致性時，您會發現解決方案並不總是很清楚。 幸運的是，我們有 A11Y 項目。 A11Y 項目是一個社區組織，致力於使 Web 可訪問性指南更易於理解和實施。 它為常見的設計模式、關於可訪問性的文章、精選的事件列表和清單提供了具體建議，以確保您已完成所有重要步驟。

“A11Y”是社交媒體和其他空間受限媒體中常用的數字代名詞，指代可訪問性。 您可以簡單地將其理解為“可訪問性”並使用它來幫助發現其他資源。

  • A11Y 項目
  • W3C 無障礙網頁倡議
  • W3C
  • WCAG 1.0
  • WCAG 2.0
  • WCAG 2.1（候選人推薦）
  • Section508.gov
  • 選擇 Web 可訪問性評估工具
  • 斧頭開發者工具
  • 自動可訪問性測試工具
  • Tenon.io 在線測試工具
  • TinyMCE A11yChecker
  • 可訪問性訴訟、巨魔和恐嚇策略
  • 還要特別感謝互聯網無障礙局的 Kim Testa。 她的小組提供自動化和人工測試，我覺得和她交談更聰明（儘管本文中的任何錯誤都是我自己的）。

一些額外的見解

SAM 提供了三種可能的集成來幫助自動進行可訪問性檢查：

  1. TinyMCE A11yChecker 插件是 SAM 嵌入式 HTML 編輯器的免費插件，可根據 SAM 版本 3.2 及更高版本的請求打開。
  2. 與 BrandExtract 的 AATT 託管實例的集成可用於 SAM 3.2 或更高版本。
  3. 可以在 SAM 3.2 或更高版本上實現與 tenon.io 的集成。

擁有一個可訪問的網站不僅僅是為了避免不合規的風險。 更重要的是，它關乎每個用戶都做正確的事，並始終如一地兌現您的品牌承諾。 如果您需要有關構建可訪問網站的任何其他指導，請查看我們關於網絡可訪問性的播客節目或隨時與我們的團隊聯繫。