如何使 WordPress 網站易於訪問

已發表: 2023-07-07

這篇文章是由 Equalize Digital 的首席執行官 Amber Hinds 客座撰寫的,Equalize Digital 是一家經過認證的 B Corporation,專門從事 WordPress 輔助功能。 如果您想了解有關 Equalize Digital 及其服務的更多信息,請訪問該公司網站。


世界各地有數百萬人患有影響他們使用互聯網的方式的殘疾,在一場大流行增加了對輕鬆網上購物、食品訂購甚至遠程醫療保健服務的需求之後,網絡可訪問性比以往任何時候都更加重要。

本 Web 可訪問性指南討論了可訪問性是什麼、為什麼重要以及如何使 WordPress 網站可訪問,包括通過測試識別常見問題。

視障男子聽手機

在本文中,我將介紹:

  • 什麼是網絡可訪問性?
  • 為什麼可訪問性很重要
  • 有哪些常見的可訪問性問題?
  • 測試 WordPress 網站的可訪問性
  • 保持網站可訪問

什麼是網絡可訪問性?

簡而言之,無障礙網站是所有人都可以使用的網站,包括無法通過典型鍵盤和鼠標設置與網絡交互的人,以及具有各種智力或身體差異的人。

網站中必須內置特定功能,以使殘疾人可以使用和理解網站。 聽覺、視覺、認知、運動或學習障礙需要調整和網站修改才能使其可用。 根據具體情況,殘疾人使用各種輔助設備(例如屏幕閱讀器)來訪問網站。

網頁設計師和開發人員需要確保其網站的內容和功能是可感知的、可操作的、可理解的和健壯的 (POUR),這意味著內容和功能可以被所有設備上的所有人訪問和理解。

使網站更易於訪問的一些功能示例包括:

  • 視頻和音頻文件的隱藏式字幕和文字記錄
  • 圖像上的替代文字
  • 跳過鏈接以協助鍵盤導航
  • 適當的顏色對比使文本更具可讀性

為什麼可訪問性很重要

網站的可訪問性對每個使用網絡的人都會產生影響。 如果您或您客戶的網站可以訪問,這將確保每個人都可以平等地訪問在線信息、必需品、娛樂、購物等,無論其能力如何。

但網站的可訪問性不僅僅與良好的業力有關;還與良好的業力有關。 它還對搜索引擎排名、新銷售和網站訪問者、法律複雜性和品牌形象產生現實影響。

搜索引擎排名

進行可訪問性修復可以提高網站的搜索引擎排名。 許多輔助功能(例如圖像上的替代文本和帶有標題的正確結構化內容)有助於輔助功能和搜索引擎優化 (SEO)。 在搜索結果頁面上排名較高可以提高新客戶或客戶的知名度,從而增加網站流量、轉化率、博客或新聞訂閱者等。

銷量增加

CDC 指出,截至 2018 年,四分之一的美國人患有殘疾。 美國殘疾人每年在網上可自由支配的支出超過 2000 億美元。 輔助功能使更多人能夠找到和使用網站,從而增加新銷售、轉化和回頭客的機會。 噹噹今世界許多網站無法訪問時,任何可訪問的網站都將在競爭中脫穎而出。

這是法律要求的

所有網站都需要滿足《美國殘疾人法案》(ADA) 中規定的網絡可訪問性標準。 根據《美國殘疾人法》,確立了將網站設立為公共場所的法律先例。 這意味著商業網站(本質上是其數字店面)需要以與實體企業建築相同的方式進行訪問。

地方、州和聯邦政府機構網站以及聯邦資助的組織和項目的任何網站也必須符合第 508 條的標準。此外,還有各種州和國際法律要求網站可訪問。

如果網站不符合這些指南中規定的可訪問性要求,該組織可能面臨訴訟的風險,或者在某些情況下面臨政府罰款的風險。 據 Usablenet 統計,2020 年,美國共提起了 3,550 起網站可訪問性訴訟。 保持法律合規性是開展業務的重要組成部分,擁有無障礙網站是企業履行法律義務的一種方式。

品牌形象

採取措施使其 WordPress 網站更易於訪問的公司和非營利組織表明他們正在履行社會責任,並確認他們希望讓互聯網成為每個人的地方。 組織對無障礙的承諾向人們表明他們以一種深刻的人性化方式受到關心,這可以建立忠誠度並提升品牌形象。

有哪些常見的輔助功能問題?

我的公司 Equalize Digital 是一家無障礙諮詢公司,為企業、非營利組織和政府機構的網站進行無障礙審核。 在我們的所有測試中,我們發現所有網站都重複出現許多可訪問性問題。 這些常見問題是相對簡單的問題,但通常會被開發人員、設計人員和內容創建者所忽視。

如果您想確保您構建或管理的網站可以訪問,請首先檢查是否存在以下問題:

替代文本缺失或質量低下

替代文本是屏幕閱讀器用來向盲人描述圖像內容或目的的文本。 如果替代文本留空,屏幕閱讀器將完全跳過它,或者可能改為讀取圖像的文件名,當文件名是一串數字或不描述外觀時,這毫無幫助。 如果沒有適當的替代文本,盲人和視障用戶將無法了解圖像的上下文或理解。

低質量的替代文本是有問題的,因為它無法準確描述圖像或過於冗長,可能會導致混亂。 不需要將“圖片”、“圖像”、“圖形”、“圖像”等單詞和短語添加到替代文本中,因為屏幕閱讀器會宣布存在圖像或圖形。

如果您的替代文本長度超過 125-150 個字符,某些屏幕閱讀器會中斷並停止閱讀。 在替代文本中添加句點可能會導致屏幕閱讀器暫停,從而可能使聽眾感到困惑或導致他們相信替代文本已經結束。

色彩對比度不足

在網頁設計中,顏色對比度是指背景顏色和文本、按鈕或圖標等彩色元素之間的亮度度量。 背景顏色和前景色的比例必須為 4.5:1,標準尺寸的文本才被認為足夠。 您可以通過將兩種顏色的十六進制代碼輸入免費的顏色對比度檢查器來測試顏色對比度。

不明確的錨文本

錨文本是網頁上可點擊的單詞或單詞組。 單擊錨文本可能會將您帶到新網站、下載文檔、在新選項卡中打開圖像或視頻。 如果錨文本脫離上下文沒有意義或無法描述鏈接的目的,則被認為是不明確的。 不明確的錨文本的一些示例包括“鏈接”、“單擊此處”、“了解更多”或“繼續”。 在向內容添加鏈接時,至關重要的是,如果有人獨立地僅聽到鏈接(沒有任何周圍的文本),他們就會知道鏈接指向哪里或單擊鏈接時會發生什麼。

缺少字幕和文字記錄

字幕採用語音內容和非語音內容(例如視頻中的音效、音樂或笑聲),並通過文本進行描述。 它們在視頻期間出現在屏幕上,因此聾啞和聽力障礙用戶可以了解視頻中發生的情況。 此外,字幕必須符合視頻的時間安排。 需要注意的是,字幕必須準確; 需要檢查自動生成的字幕的準確性。

文字記錄是音頻剪輯或視頻中所說內容的書面記錄。 文字記錄提供了理解視頻內容或音頻文件的輔助手段。 它們應該與視頻的字幕一起使用,以便人們可以閱讀文字記錄而不是觀看視頻。 這很重要,因為並非所有用戶都能閱讀字幕。 成績單還具有可以輕鬆翻譯成其他語言的優點,並且可以幫助搜索引擎優化。

測試 WordPress 網站的可訪問性

測試網站可訪問性的最佳方法是執行自動、手動和用戶測試的組合。

自動輔助功能測試

使用人工智能掃描工具執行自動可訪問性測試。 有許多免費和付費工具可以提供各種輔助掃描功能。 選擇自動化工具時,需要記住以下幾點:

  • 網站的大小。 如果您的網站較小,免費工具可能適合您。 如果您有一個較大的網站,例如帶有博客或電子商務部分且包含數千個帖子的網站,則付費工具可能更合適。
  • 您需要多少支持。 如果您需要幫助查找網站上的可訪問性錯誤以便修復它們,免費工具可能是一個不錯的選擇。 如果您需要幫助了解可訪問性錯誤,或者希望其他人修復這些錯誤,請嘗試查找具有內置或開發人員提供的支持選項的工具。 如果您是輔助功能修復的新手,那麼獲得可用的支持是關鍵。
  • 用戶體驗。 一些自動輔助功能工具可以直接在您的網站上使用,例如通過瀏覽器擴展或在 WordPress 儀表板中使用。 其他工具要求您使用與您的網站完全獨立的界面。 如果您希望在使用網站時查看可訪問性錯誤,請選擇提供現場報告的工具。 這使您在編輯網站內容時可以更輕鬆地持續檢查網站的可訪問性。

WAVE 和 Axe 是兩種可以在任何網站上使用的流行免費工具。 這些工具都具有可用於測試單個 URL 的 Chrome 和 Firefox 擴展(一次一個),以及允許批量測試和附加功能的付費計劃。

輔助功能檢查器 WordPress 插件

如果您想運行批量輔助功能掃描並在 WordPress 儀表板中查看報告,那麼 WordPress 輔助功能檢查器插件是最好的工具。 您可以在 WordPress.org 上免費下載該插件的基本版本。

WordPress 插件的輔助功能檢查器

輔助功能檢查器掃描頁面和帖子是否存在輔助功能錯誤或潛在問題,並將其直接顯示在該頁面或帖子的編輯屏幕上。 這些頁內報告不僅可用於首先檢查網站是否可訪問,還可用於監控持續的可訪問性。

運行測試的輔助功能檢查器插件的屏幕截圖

Accessibility Checker 運行 40 多種不同的檢查,包括針對上述確定的常見問題。 免費版本掃描帖子和頁面,專業版本包括自定義帖子類型和存檔頁面的完整站點掃描。 錯誤標記或審查的項目可以被忽略,從而可以跟踪隨著時間的推移進行的輔助功能修復。 對於機構、開發人員和 WordPress 用戶來說,這是一個很棒的工具。

手動測試

不幸的是,自動掃描無法識別網站上的每個可訪問性問題 - 有些問題只能由體驗該網站的人來確定。 使用輔助功能檢查器等自動化工具測試網站後,接下來執行手動測試,以確保所有人都可以使用它,無論他們使用哪種設備。

手動可訪問性測試的第一步是確認用戶僅使用鍵盤即可完全導航。 轉到網站的前端,使用製表符和箭頭鍵在網站中移動,確保您不會在移動時迷失位置,並且可以使用網站的所有部分。

鍵盤測試後,您可以繼續進行屏幕閱讀器測試。 屏幕閱讀器是盲人和視障人士用來理解網頁內容的一種輔助技術軟件。 如果您擁有 Mac,則可以使用計算機內置的 VoiceOver 軟件。 如果您沒有 Mac,則可以下載免費的開源屏幕閱讀器 NVDA 或購買流行的屏幕閱讀器 JAWS。 最佳做法是使用兩個或更多屏幕閱讀器測試您的網站,因為並非所有屏幕閱讀器對各個元素都說相同的內容。

要使用屏幕閱讀器測試您的網站,請轉到您要測試的頁面,然後像在鍵盤導航測試期間一樣僅使用選項卡和箭頭鍵在頁面中移動。 當您瀏覽頁面時,請聆聽屏幕閱讀器所說的內容,並標記任何不正確或令人困惑的內容。 偵聽自動播放併中斷頁面上其他內容的媒體文件或滑塊。

執行鍵盤導航和屏幕閱讀器測試後,您需要檢查所有嵌入或鏈接的媒體文件。 媒體文件包括視頻、音頻文件、PDF、.Doc 或 .XLS 文件、圖像或文本滑塊以及第三方小部件或 iFrame。 確保殘障人士可以訪問、交互並理解所有嵌入或鏈接的媒體文件呈現的內容。

用戶測試

在自動和手動可訪問性測試之後,建議執行用戶測試。 用戶測試涉及僱用現實世界的輔助技術用戶來測試您的網站是否存在可訪問性錯誤。 通常,測試用戶會收到來自 Web 開發人員的具有特定目標的簡介。 然後測試用戶將嘗試實現這些目標並向開發人員提供反饋。

使用盲文鍵盤的視障女性

您可以通過付費或志願者計劃僱用個人測試用戶,或者找到提供用戶測試服務的輔助功能公司。

結論:保持網站可訪問

需要注意的是,與 SEO 一樣,可訪問性是一個持續的過程,需要持續監控和修改。 為了確保您的網站保持可訪問性,請制定計劃:

  • 使用輔助功能檢查器插件等工具定期監視和測試輔助功能錯誤。
  • 對 Web 開發人員、設計師和內容創建者進行 Web 可訪問性最佳實踐的培訓。 如果您要為客戶啟動網站,請確保他們知道如何在啟動後以可訪問的方式添加內容。
  • 隨時了解您必須遵守的任何無障礙指南或法律變更。

採取這些步驟將有助於確保您的網站保持可訪問性,並且所有人無論能力如何,都可以平等地訪問網絡上的信息、產品和服務。