為我們的社區創建可訪問和包容的網站
已發表: 2021-07-21如何讓任何人都可以訪問您的網站，以及網站可訪問性標準是什麼？
並非每個人都可以像通常發達的人那樣訪問互聯網。 我們社會的很大一部分——澳大利亞有 20%——生活在某種形式的殘疾中。 這意味著至少有 20% 的澳大利亞人無法或無法消費、訪問、閱讀、聽到或理解互聯網內容，因為他們看、聽或認知消化在線內容的能力較差。 這可能是由於永久性或暫時性殘疾、受傷或語言障礙，或與正在交互的網站的不必要的複雜性。
網站可訪問性意味著網站、工具和技術可以被每個人感知、理解、導航、互動和貢獻，無論他們是誰。 可訪問性支持那些可能處於孤立風險中的人的社會包容性，並且當網站和網絡工具的設計具有包容性時，殘疾人可以充分使用它們。
在本文中：
1. 為什麼我們應該讓我們的網站更易於訪問？
可訪問性是法律
可訪問性是一項人權
2. 常見的可訪問性問題
聽力
看見
理解
導航
演講
3. 我們如何使我們的網站更易於訪問？
4. 編寫所有人都可以訪問的網頁的方法
5. Web 內容可訪問性指南 (WCAG)
6. WCAG 總結——讓每個人都可以訪問 Web 內容的方法
7. 什麼情況下不符合 WCAG 是合理的？
8. 測試 Web 可訪問性
9. 手動測試 Web 可訪問性的 6 種簡單方法
回到頂部
1. 為什麼我們應該讓我們的網站更易於訪問？
我們應該讓我們的網站更易於訪問，主要有 3 個原因：
- 這對讀者有好處——每個人都有權像其他人一樣完整地使用互聯網，當這種情況發生時，它會增加讀者的生活質量和幸福感。 他們感到相互聯繫和包容，因為我們正在使我們的網站“符合社會消除歧視和促進人權的義務”。
- 這對業務有好處——如果更多的人可以訪問我們為客戶創建的內容，更多的人將接觸到我們正在為其創建網站的品牌。 更大的曝光率意味著更大的銷售額，但除此之外，更大的可訪問性表明我們正在創建的品牌考慮到了包容性。 這將導致積極的品牌認知度增加。
- 這是一項人權，也是一項法律要求——這非常重要。
回到頂部
可訪問性是法律
根據《殘疾歧視法》（1992 年）第 24 條，“無論是否有償提供商品或服務或提供設施的人，以他人的殘疾為由歧視他人是非法的：
- 拒絕向他人提供這些商品或服務或拒絕向他人提供這些設施；
- 在首先提及的人向另一人提供該等貨品或服務或向另一人提供該等設施的條款或條件中； 或者
- 以首述人向另一人提供該等貨品或服務或向另一人提供該等設施的方式。
用簡單的英語來說，這意味著如果一家公司在合理的情況下選擇不根據某人的殘疾向其提供設施，則可以根據該法案被起訴。
回到頂部
可訪問性是一項人權
除了《殘疾歧視法》之外，所有形式的無障礙都是一項人權。 聯合國於 2006 年通過了《殘疾人權利公約》(CRPD)。公約第 (4)(1)(g) 條呼籲締約方“促進殘疾人獲得新的信息和通信技術和系統，包括互聯網”。 澳大利亞是該公約的首批簽署國之一，但正如澳大利亞人權委員會 (AHRC) 指出的那樣，我們都有義務維護公約確立的權利。
回到頂部
2. 常見的可訪問性問題
在線內容通常由文本、音頻、視頻和圖像組成，並且通常採用非線性格式（換句話說，網站通常不只是在頁面從上到下的列表中，有鏈接、單獨的部分、按鈕和其他媒體）以及網站的各種元素將無法訪問某些人。
聽力
有聽力障礙的人或聾啞人不一定能理解音頻剪輯或其中包含音頻的視頻剪輯。 音頻可以是音樂、傳達信息的聲音，例如樂譜，或者是點擊網頁元素時激活的噪音，或者是語音，甚至是計算機警告聲音。
看見
同樣，有視覺障礙或部分或完全失明的人不一定能夠有效地閱讀文本、觀看視頻剪輯或瀏覽網站。 他們可能難以閱讀對比度差的文本，或者他們可能對閃爍的圖像敏感。
理解
了解網站歸結為網站的複雜性。 如果網站有無法解釋的行話、小字體、不明顯的點擊和瀏覽網站的位置、糟糕的反向鏈接系統、缺乏標題結構、糟糕的文本對比、隱藏的部分，許多人將難以瀏覽網站。 如果一個人有認知挑戰、缺乏技術經驗或視力受損，他們可能會在這些領域遇到問題。 但是，任何人都可能在存在任何這些設計缺陷的網站上遇到問題。
導航
網站因設計缺陷而變得難以導航，但生活在認知挑戰或視覺挑戰中的人將難以導航網頁。 還有更多的人可能有運動功能因素影響他們使用鼠標或鍵盤的能力。
演講
互聯網的某些部分是語音激活的，最近，語音正被用作一種密碼形式（例如，Centrelink 語音身份驗證），但互聯網訪問這一日益增長的方面可能無法被語言受限或聽力受損的人使用，或使用英語作為第二語言的人。
回到頂部
3. 我們如何使我們的網站更易於訪問？
很明顯，除非網絡程序員和設計師努力尋找增加產品包容性的方法，否則許多人都有被排除在某些、大部分或全部互聯網內容之外的風險。
讓盡可能多的人訪問我們的網站的方法是遵循國際準則，以使我們遵守萬維網聯盟 (W3C) 規定的法律。
回到頂部
4. 編寫所有人都可以訪問的網頁的方法
只需稍加研究，網頁設計師和開發人員就可以更積極地創造更多人可以做到的產品。 網上有一些很棒的資源可以幫助解決這個問題，並幫助我們更好地製作以下網站：
- 提供信息豐富、獨特的頁面標題
- 使用標題來傳達含義和結構
- 使鏈接文本有意義
- 為圖像編寫有意義的替代文本
- 為多媒體創建腳本和字幕
- 提供明確的指示
- 保持內容清晰簡潔
回到頂部
5. Web 內容可訪問性指南 (WCAG)
W3C 是一個國際社區，會員組織、全職工作人員和公眾共同致力於開發 Web 標準。 W3C 的使命是引導 Web 發揮其全部潛力，他們運行 Web Accessibility Initiative (WAI)。 Web 可訪問性的 WAI 指南是：
- Web 內容可訪問性指南 (WCAG) 2.0 – 使殘障人士可以訪問網站的指南。
- 移動網絡最佳實踐 (MWBP) – 使網站可從移動設備使用的指南。
- 移動 Web 應用程序最佳實踐 (MWABP) – 在移動設備上開發和交付 Web 應用程序的指南。
指南的全部細節非常錯綜複雜，遠遠超出了本文的範圍。 為此，本文將對文章的主要觀點進行總結和討論，作為您理解網絡可訪問性的跳板和進一步閱讀的起點。 以下是完整文檔的鏈接：
WCAG（Web 內容可訪問性指南）完整文檔
MWBP（移動網絡最佳實踐）完整文檔
MWABP（移動 Web 應用程序最佳實踐）完整文檔
您可能想知道為什麼會有基於為移動設備製作頁面、應用程序或 Web 工具的可訪問性指南，但 W3C 和澳大利亞人權委員會 (AHRC) 同意“使用計算機的殘障人士與那些正在使用移動設備”。 事實上，有很多重疊之處，以至於 W3C 已經為適合不同能力和一般發達人群的手機制定了指南，因為與計算機相比，我們都面臨著手機的可訪問性問題。
回到頂部
6. WCAG 總結——讓每個人都可以訪問 Web 內容的方法
這是一個簡單的看待它的簡單方法，一個簡單的經驗法則：努力使用多種媒體類型來傳達我們工作的網站上的每條信息，包括多種方式來訪問網站上的元素，並避免對任何人造成不滿健康）狀況。
WCAG 將這些列為可以達到良好、非常好或優秀水平的 4 項主要原則（在指南中分別標註為 A、AA 和 AAA）。 在本文檔中，僅列出了 A 和 AA 解決方案，因為所有等級的“通過”可訪問性要求和一些 AAA 解決方案的時間或成本都令人望而卻步。 例如，澳大利亞政府網站聲明它符合 AA 標準並致力於實現 AAA 標準。
要向 WCAG 投訴，用戶界面的信息和操作必須是：
- 可感知的（通過視覺、聽覺或兩者）
- 可操作（通過鼠標和鍵盤）
- 易懂（文字必須通俗易懂）
- 健壯（由各種用戶代理解釋）
原則 1 – 網站及其導航必須是可感知的
對任何非文本內容使用替代文本，例如：
- 大字體、盲文、語音
- 符號
- 更簡單的語言
將基於時間的媒體替代品用於基於時間的媒體，例如：
- 預錄或現場字幕
- 音頻描述
- 預先錄製的手語
- 擴展的音頻描述
製作可以以多種方式呈現而不會丟失信息或結構的適應性 Web 內容：
- 使用正確的閱讀順序。
- 為僅依賴於形狀、顏色、大小、視覺位置、方向或聲音的說明提供文本或音頻等價物。
- 使用縱向和橫向（除非需要特定的顯示方向）。
- 標籤輸入字段。
讓用戶更容易看到和聽到內容：
- 包括超過 3 秒的音頻的聲音控制。
- 使用低背景音頻或無背景音頻。
- 將前景與背景分開。
- 僅將顏色與文字一起用作傳達信息、動作、響應或視覺元素的視覺手段。
- 使用文字來描述視覺呈現。
- 在副本中使用至少 4.5:1 的對比度
- 在不丟失內容或功能的情況下，將復製文本的大小調整到 200%。
- 避免用戶在二維中滾動的需要。
- 間距：
- 行距：1.5以上
- 結束段落間距：2 x 字體大小或更大
- 字母間距：0.12 或更大
- 字間距：0.16 x 字體或更大
- 使懸停內容可忽略、可懸停和持久。
回到頂部
原則 2 – 網站及其導航必須是可操作的
通過鼠標和鍵盤使網頁內容可訪問：
- 使用鍵盤和鼠標使所有內容和功能都可用。
- 允許使用鍵盤和鼠標自由移動鍵盤焦點。
- 快捷方式只能在焦點上啟用或禁用、重新映射或激活。
為用戶提供足夠的時間閱讀和使用內容：
- 能夠關閉、調整或延長內容設置的每個時間限制。
- 向用戶發出有關時間限制結束的警告。
- 暫停、停止或隱藏移動、閃爍、滾動或自動更新信息。
不會引起癲癇發作或身體反應的設計內容：
- 元素每秒閃爍少於 3 次，或確保閃爍低於一般閃爍和紅色閃爍閾值。
- 添加禁用非必要動畫的選項。
提供幫助用戶導航、查找內容和確定他們所在位置的方法：
- 添加一個選項以繞過重複內容塊。
- 確保網頁具有準確的描述性標題。
- 確保可聚焦的組件保留意義和可操作性。
- 確保每個鏈接都可以從準確的鏈接文本或上下文中確定。
- 確保網站中存在多個網頁位置選項（網頁是流程的結果或步驟的情況除外）。
- 確保鍵盤焦點指示器可見。
讓用戶更容易通過鍵盤以外的多個輸入來操作功能：
- 多點或基於路徑的指針手勢可以使用單個指針來操作，而無需基於路徑的手勢。
- 文本圖像的文本標籤應包含視覺呈現的文本。
- 設備或用戶運動功能也可以由其他用戶界面組件操作。
回到頂部
原則 3 – 可以理解
用戶界面的信息和操作必須易於理解。
使文本內容可讀易懂：
- 用戶可以更改每個網頁的默認人類語言。
- 內容中每個段落或短語的人類語言都可以翻譯（名稱、行話和俚語除外）。
使網頁以可預測的方式出現和操作：
- 用戶界面組件在收到焦點時不會啟動上下文更改。
- 更改元素設置不會自動導致任何未指定的上下文更改。
- 在網站內的多個網頁上重複的導航機制每次都以相同的相對順序出現，除非用戶發起更改。
- 一致地識別網站中具有相同功能的組件。
輸入輔助：幫助用戶避免和糾正錯誤：
- 識別並向用戶描述所有自動檢測到的錯誤。
- 當內容需要用戶輸入時提供標籤或說明。
- 輸入錯誤會被自動檢測並提供更正建議，除非它會危及內容的安全性或目的。
- 法律或金融交易在最終確定之前是可逆的、經過檢查和確認的。
回到頂部
原則 4 – 穩健
內容必須足夠健壯，可以被包括輔助技術在內的各種用戶代理解釋。
最大限度地兼容當前和未來的用戶代理，包括輔助技術：
- 標記元素應該——
- 有完整的開始和結束標籤；
- 根據其規格嵌套；
- 不包含重複的屬性；
- ID 應該是唯一的，除非規範允許這些功能。
- 腳本生成的表單元素、鏈接和組件應該能夠自動生成。
- 狀態、屬性和值應該能夠以編程方式或手動設置。
- 用戶代理（包括輔助技術）應該可以收到這些項目更改的通知。
- 在使用標記語言實現的內容中，狀態消息應該能夠以編程方式確定，以便它們可以通過輔助技術呈現給用戶而無需獲得焦點。
這是對我們在 Jezweb 上可用的可訪問性選項的簡要總結。 有些符合 A 級標準，有些是 AA，但如果他們儘早寫入網頁設計和文案流程，則所有領域都可以實現。 在早期階段編寫可訪問性比修改現有工作更快、更容易。
回到頂部
7. 什麼情況下不符合 WCAG 是合理的？
正如澳大利亞人權委員會所規定的，建立可訪問網站存在商定的限制。 根據《殘疾歧視法》（1992 年），在某些（但不是全部）情況下，根據 DDA 提供平等機會的義務受到不合理困難概念的限制。
換句話說，如果一家公司沒有時間或金錢來改進某些特定的可訪問性元素，並且他們可以證明這一點，那麼可能有理由不包括這些元素。 否則，好吧，這取決於我們作為公司和個人，以使我們的內容盡可能地被所有人訪問。
有關法律案件的更多信息 - 請記住，此鏈接不是法律建議，只是一般信息 - 單擊 humanrights.gov.au/our-work/disability-rights/world-wide-web-access-disability-discrimination -act-advisory-notes-ver#whatis
回到頂部
8. 測試 Web 可訪問性
我們可以通過兩種方式測試我們的網絡可訪問性級別：
- 無障礙網頁工具（有關網頁無障礙工具流程，請諮詢您的直線經理）
- 人工審核（人工檢查 - 見下文）
在開發或重新設計網站或 Web 應用程序時，儘早評估可訪問性並在整個開發過程中儘早發現可訪問性問題，以便更容易解決這些問題。 有一些評估工具可以幫助進行評估。 但是，沒有任何工具可以單獨確定網站是否符合可訪問性標準。 需要有知識的人工評估來確定網站是否可訪問”。 （W3C 網站，2021 年 4 月 9 日）
回到頂部
9. 手動測試 Web 可訪問性的 6 種簡單方法
人工測試可以通過手動審核網站是否符合 WCAG（Web Accessibility Initiative 的 Web Content Accessibility Guidelines，以防您忘記它的含義！）來完成。
WCAG的細節很密集。 人們致力於整個職業生涯來理解它，但是您可以做一些簡單的事情來測試您的工作的可訪問性：
1. 拔下鼠標和/或關閉觸控板
僅使用 TAB 或 SHIFT+TAB 與站點交互。 導航和 ENTER 以跟隨鏈接。
- 您能否僅使用鍵盤與所有控件、鏈接和菜單進行交互？
- 你能看到哪個項目一直有焦點嗎？
- 視覺焦點順序是否與預期的交互順序相匹配？
2. 打開高對比度模式——這也會刪除網站上的顏色。
根據 WebAIM 對低視力用戶的調查，30% 的受訪者表示他們使用高對比度模式。
- 您可以輕鬆查看頁面上的每個元素嗎？
- 你能瀏覽網站嗎？
- 你能閱讀和理解所有的文案元素嗎？
3. 在瀏覽器設置中關閉圖像。
- 內容有意義嗎？
- 內容是否變得更難理解？
- 現在缺少任何內容嗎？
- 是否有任何重要控件消失？
4.檢查字幕或成績單
- 視頻上是否直接有字幕，或者播放器中是否有打開/關閉字幕的控件？
- 是否有帶有音頻描述的替代版本或播放器中打開/關閉音頻描述的控件？
- 對於有大量對話的視頻，頁面上是否有文本腳本或靠近視頻播放器的鏈接可以轉到腳本？
僅視頻和僅音頻方案存在其他要求，但以上內容將涵蓋大多數站點上的大多數媒體。
注意：不僅媒體內容本身應可訪問，播放器也應如此。 查找有關媒體播放器可訪問性的未來博客文章。
5. 點擊字段標籤
注意缺少或不完整的標籤、無效的錯誤處理和不良的焦點控制。
單擊字段旁邊的文本標籤：
- 當您單擊文本輸入或文本區域旁邊的標籤時，光標是否進入該字段？
- 當您單擊單選按鈕或複選框旁邊的標籤時，是否會選擇相鄰選項？
- 當您單擊 SELECT 元素旁邊的標籤時，該位置是否集中在 SELECT 上？
注意：標籤和控件之間應該是一對一的關係。
6. 在瀏覽器設置中關閉 CSS。 背景圖像將消失
- 重要內容是否消失了，或者任何控件、圖標或其他可操作元素是否消失了？
- 現在是否很難理解錯誤消息或其他以前的視覺提示之類的東西？
- 內容是否仍以合理、易於理解的順序顯示？
- 是否保留任何顏色，包括背景顏色？
- 是否保留任何文本表示樣式？
遵循這些簡單的指導方針是一個很好的跳板，但只是一個非常簡單的概述。 更詳細的信息，您應該始終參考 WCAG。
回到頂部
如何確保您是具有不同能力的人的盟友
要求進行網站審核，並採納他們提出的建議。 Jezweb 擁有一支由經驗豐富的網站開發人員和設計師組成的團隊，他們在可訪問網站方面擁有豐富的經驗，並且個人熱衷於隨著技術的發展而使它們變得更加完善。 有關特定網站功能或問題的更多信息，請與我們的團隊聯繫以進行對話。