如何使您的 WordPress 網站可訪問

理解和正確利用 WordPress 的可訪問性對您網站的可用性至關重要。 如果您對這個主題不熟悉，那麼可訪問性就是它聽起來的樣子：任何人都可以訪問和充分使用某物的程度。

“可訪問性是讓盡可能多的人可以使用您的網站的做法。 我們傳統上認為這與殘疾人有關，但使網站易於訪問的做法也有利於其他群體，例如使用移動設備的群體或網絡連接速度較慢的群體。” （來源）

您的網站越容易訪問，使用它的人就越多。 當網站的可訪問性較差或未優先考慮可訪問性時，您的一部分受眾會被阻止或完全禁止獲取您的網站必須提供的所有信息。

在這篇文章中，我們將討論為什麼可訪問性很重要，這意味著什麼，WordPress 已經可以訪問的程度，網站建設者如何使網站可訪問，以及如何測試網站的可訪問性。

讓我們開始吧！

查看我們的網站可訪問性視頻指南

Web 可訪問性意味著什麼

Web 可訪問性意味著網站的設計和開發使所有人都可以使用它。 這包括他們如何理解、導航、交互以及為網站做出貢獻。

完全定義和理解 Web 可訪問性的一個好方法是打破它的一些神話。

您的網站越容易訪問，使用它的人就越多。 就是這麼簡單。 在本指南中了解更多信息。 ️ 點擊推文

誤區一：這只是為了盲人

一個完全可訪問的網站應該可供有聽覺、認知、神經、身體、語言和視覺障礙的人使用。 殘疾人是無障礙工作的主要焦點。 但是，他們並不是唯一從可訪問網站中受益的人。

Web 可訪問性改善了以下所有類型的人和情況的用戶體驗：

• 有人使用具有較小屏幕和不同輸入模式的移動設備。
• 由於衰老而導致能力、視力或行動能力受限的人。
• 有暫時困難的人，比如受傷的手。
• 在照明可能會改變屏幕對比度的區域中使用網站的人。
• 有人以有限的 Internet 連接或帶寬訪問該站點。

誤解二：這是一種時尚或趨勢

很有可能，您近年來越來越多地聽到有關 Web 可訪問性的信息。 隨著網絡的發展和越來越多的人依賴它，網絡可訪問性正成為一個更加緊迫的問題。 但這不僅僅是一種時尚。

“數字無障礙是全球殘疾人的公民權利和人權。”
Lainey Feingold，殘疾人權利律師和作家

隨著時間的推移和網絡的使用變得越來越普遍，對廣泛的網絡可訪問性的需求也越來越大。 當網站根據 WCAG 指南無法完全訪問時，個人可以對網站開發商或所有者採取法律行動。

只需查看圍繞 Web 可訪問性的訴訟數量，即可了解人們對此的重視程度。 從 2017 年到 2018 年，訴訟數量幾乎增加了兩倍。 從那時起，這個數字平均每年有 2,345 起訴訟。 即使在整個 2020 年 COVID-19 大流行期間，聯邦法院的 ADA Title III 網站可訪問性訴訟數量也比上一年增加了 12%。

Web 可訪問性將繼續存在。 在我們開發軟件和網站時，我們需要將網絡可訪問性納入我們前進的流程中。 這是必要的，不僅因為沒有人喜歡被起訴，而且因為互聯網需要滿足所有人的需求，無論這些需求是什麼。

誤區三：您可以完全自動化可訪問性

一旦你理解了為什麼可訪問性很重要——並且不優先考慮它可能會產生後果——你可能會急於確保你的網站符合 WCAG 標準。

關於 Web 可訪問性的最流行的神話之一是，您可以下載一個簡單的插件或安裝一個軟件，只需輕輕一按，您的網站就可以完全訪問。 這簡直是不可能的。

根據 a11yproject.com 的說法，可訪問性問題要么是客觀的，要么是主觀的。 客觀問題可以通過代碼檢測，主觀問題需要人為判斷。 代碼永遠無法準確解決屬於後一類的問題，並且嘗試這樣做通常會在此過程中造成弊大於利。

“覆蓋解決方案是自動化軟件解決方案，正如我們所知，它首先只能檢測到約 30% 的 WCAG 問題。 這是因為 WCAG 是細緻入微且具有解釋性的。 機器不擅長這個。” （來源）

請記住，可訪問性不是為了規避風險，而是為所有用戶提供優化的體驗。

網頁內容無障礙指南

Web Accessibility Initiative 制定了一套 Web Content Accessibility Guidelines (WCAG)，可以幫助您確保您的網站合規且完全可訪問。 如果您設計、開發或支持網站，您應該非常熟悉這些指南。

可訪問性不僅是開發人員關注的焦點，也是設計師、營銷人員、內容作者、項目經理等更多人關注的焦點。 在從規劃到啟動的整個網站建設過程中，可訪問性應該是一個優先事項。 您還應該在網站上線後不斷改進其可訪問性。

開箱即用的 WordPress 可訪問性如何

這是許多人在將 WordPress 視為一種網站構建選項時提出的大問題之一：它的可訪問性如何，以及要使 WordPress 可訪問性需要做多少工作？ 由於對此沒有非黑即白的答案，讓我們看看 WordPress 已經可以訪問的程度。

WordPress 在可訪問性方面做得很好

好消息是，隨著時間的推移，WordPress 變得越來越容易訪問。 每個版本都會在考慮到可訪問性的情況下進行小步驟和改進。 隨著可訪問性在更多人的腦海中成為一個更大的話題，更多的人可以優先考慮它。

此外，WordPress 社區中的許多人都對這些主題充滿熱情和直言不諱。 每個新的默認 WordPress 主題都採取了額外的步驟來變得更易於訪問。 開發人員一直在想出新的輔助工具，並編寫有關 WordPress 可訪問性的指南和文章。 因此，您在 WordPress 可訪問性之旅中永遠不會孤單。

如果您有興趣直接從社區成員那裡了解有關 WordPress 和可訪問性的更多信息，請訪問 WordPress.tv 並觀看這些有關可訪問性的講座。

WordPress錯失良機的地方

儘管最近取得了進步，但 WordPress 並不總是 100% 開箱即用。 每個 WordPress 版本都面臨一些批評，因為它的不足之處。 2019 年初，WPCampus 對當時最新的 Gutenberg 版本進行了廣泛的審核。 這樣的工作非常重要； 自那次審計以來，與無障礙相關的 116 個問題已經結案。

殘疾內容創建者可能很難使用 WordPress 進行發布。 因為不可能自動化所有可訪問的設計和開發方面，所以任何人都可以使用 WordPress 創建不可訪問的網頁。

“WordPress 的前端幾乎與多年來一直在同一個地方：完全可以訪問，但這完全取決於構建網站的開發人員。 糟糕的主題或無法訪問的插件使一切變得不同。 管理員不斷改進——將 Gutenberg 編輯器移向更好的可訪問性是一條艱難的道路，但正在取得進展。 也就是說，避免任何新界面組件的可訪問性回歸是一場持久戰。” （來源）

那麼，作為 WordPress 開發人員或設計師，這對您意味著什麼？ 當您開始使用 WordPress 時，您訪問一個完全可訪問的網站的旅程會更短一些。 然而，距離終點線還有一段距離。

如何製作可訪問的 WordPress 網站

現在，讓我們進入您可以採取的步驟，以確保所有用戶都可以訪問 WordPress 網站。

無論如何，永遠不要將可訪問性作為在項目結束時解決的任務。 它應該是從您的流程一開始就整合的優先事項。 一旦網站啟動，它應該是一個持續的目標。

沒有一個可以遵循或自動化以確保 100% 可訪問性的單一清單。 大部分工作取決於您的插件、主題和內容。

創建一個可訪問的網站就像建造一座安全的建築——當然，有指導方針，但個人的關注、維護和周到的翻新對於確保你達到目標至關重要。

無障礙設計的最佳實踐

讓我們從 WordPress 網站可訪問設計的一些最佳實踐開始，按類型細分。 此信息應為您的無障礙教育奠定堅實的基礎。

圖片

您網站上的所有圖像都需要可供所有用戶訪問。 鑑於並非所有用戶都能看到圖像，有些用戶可能會使用輔助技術來理解視覺元素，因此您的網站應該準備好使用該技術。

替代（或“替代”）文本是您附加到圖像的書面描述。 屏幕閱讀器將向可能看不到圖像的任何客人大聲朗讀該描述。 替代文本應用於在頁面上提供有用信息的任何圖像。 這包括從照片到圖標再到信息圖表的所有內容。

唯一的例外是圖像被認為是純粹的“裝飾性”。 背景圖像、分隔線或顯示頁面本身顯示的文本的圖像不一定需要替代文本。

編寫替代文本時，請記住不要按原樣描述圖像。 相反，在頁面的上下文中傳達圖像的含義。 以下是一些很好的指導方針，可幫助您編寫出色的替代文本：

• 簡短而簡單是最好的。
• 屏幕閱讀器會傳達這是一張圖片，因此請避免在替代文本中說“這是一張……的圖片”。
• 如果圖像是鏈接，則替代文本應說明如果用戶選擇該圖像會發生什麼。
• 替代文本應包括圖像上出現的任何文本。 例外情況是當相同的文本也出現在圖像附近時，例如在標題中。

向 WordPress 網站上的圖像添加替代文本比您想像的要容易。 您可以在添加圖像標題的同一位置添加此文本。

打開您的媒體庫並選擇您要編輯的圖像。 該圖像的設置屏幕將打開。 在替代文本字段中，添加您的替代文本，然後單擊保存：

顏色

在設計一個可訪問的網站時，提供足夠的顏色對比是必不可少的。 在許多情況下，較差的顏色對比度會影響您網站的可讀性，例如視力不佳的用戶、色盲用戶或使用某些設備的用戶。 圖像、文本和按鈕等元素都需要適當的顏色對比。

顏色對比度是指當彼此相對或非常靠近時出現的亮色或暗色。 例如，白色背景上的黑色文本具有比白色背景上的黃色文本 (1.08:1) 高得多的顏色對比度 (21:1)。 WCAG 2.0 AA 要求普通文本的最小比例為 4.5:1，較大的文本（粗體 18 像素或標準 24 像素及更大）為 3:1。

訂閱時事通訊

想知道我們是如何將流量提高到 1000% 以上的嗎？

加入 20,000 多人的行列，他們會通過 WordPress 內幕技巧獲得我們的每週時事通訊！

現在訂閱

這到底是什麼意思呢？ 確定您的顏色是否能很好地協同工作的最簡單方法是將它們插入到對比度測試工具中，例如 WebAIM 對比度檢查器。 網上有大量免費的檢查工具。

查看我們的測試部分以了解有關測試顏色的更多信息。

隨著您測試越來越多的顏色組合，您將更好地通過視覺來確定哪些顏色組合有效，哪些無效。

您還需要確保避免使用顏色作為主要區別因素。 例如，許多網站的鏈接顏色與周圍的正文不同。 但是，如果用戶由於某種原因難以看到顏色，則他們可能無法區分鏈接詞和非鏈接詞。 使用顏色修飾鏈接，但在文本下方添加下劃線以使鏈接易於訪問。

文本

我們在網絡上體驗到的大部分內容都是文本。 我們使用網站來閱讀文章、食譜、故事等等。 你現在正在閱讀這篇文章！ 因此，文本需要針對所有讀者進行優化——無論他們是用眼睛還是耳​​朵閱讀。

在談論可訪問性時，有兩種主要的方式來討論文本：字體和大小。

易於閱讀的字體無論大小都易於閱讀。 Tahoma、Calibri、Helvetica、Arial、Verdana、Times New Roman、Arvo、Museo Slab 和 Rockwell 等字體都是可訪問的選擇。 有閱讀障礙的讀者可能會發現閱讀某些字體很困難，包括許多襯線字體。 正文的無襯線字體往往是更安全的選擇。 最好避免顯示字體（如手寫樣式或草書），除非文本較大、稀疏且主要是裝飾性的。

字體大小對於可訪問性非常重要。 讓我們討論一些關於可訪問字體大小的經驗法則。

默認字體應至少為 9pt 或 12px。 建議使用 12pt 或 16px。 根據 WCAG 指南，文本在放大到 200% 時應該能夠被閱讀。 建議使用百分比或 em 而不是像素或點來設置字體大小。 使用不同的字體粗細就可以了，但請確保如果您的文本使用輕量級，則它足夠大以供查看。

這不是最終的全部，如何在考慮到可訪問性的情況下進行設計。 但重要的是要知道從哪裡開始。 如果您想更深入地了解可訪問性設計，請查看以下資源：

• W3C 網頁設計和應用
• 面向設計師的 Web 可訪問性入門
• 無障礙設計並不難
• 符合 ADA 的無障礙網頁設計的 10 個示例
• 設計中的可訪問性

無障礙開發的最佳實踐

在構建網站或其補充軟件（如主題和插件）時，有一些重要的事情需要牢記於可訪問性。 其中一些與設計重疊，但下一節主要關注您的網站如何工作以及您的用戶將如何與之交互。

互動元素

無論如何，用戶應該能夠相對輕鬆地與您的網站進行交互和使用。 這不僅包括欣賞圖像和閱讀文本，還包括與菜單、表單、按鈕和視頻進行交互。

在構建您的網站時，請確保可以輕鬆識別所有交互元素。 所有導航菜單——從頁眉到頁腳——都應該可以與鍵盤控件一起使用。 hover 、 focus和click上的鏈接和按鈕的外觀應該改變。

跨網站頁面的導航應該一致且清晰。 您如何命名、樣式和定位導航鏈接非常重要。 周到的麵包屑和清晰的標題將使用戶能夠自信地與您的內容進行交互。

很有可能，您的網站上有一兩個表格。 您可能會驚訝地發現有多少表格無法訪問。 您的表單元素必須在字段左側或上方包含相關標籤。 （複選框和單選框可以放在右邊。）用戶應該清楚每個表單字段的用途。

如果您的網站上有任何自動播放的內容，例如 GIF、滑塊、輪播、視頻或音樂，則應該有可見的控件允許用戶停止動畫或聲音。 最好提供完全停止、暫停或隱藏元素的選項。

如果您是一名想要深入研究 Web 可訪問性開發的開發人員，請直接從 W3C 查看這些提示。

WordPress 主題

如果你是一個 DIY 網站建設者，你可以通過選擇一個易於訪問的主題來完成這篇文章討論的很多內容。 對於開發人員來說，了解是什麼使主題易於訪問以在他們的項目中對其進行優先級排序非常重要。

WordPress 主題控制您網站的外觀。 許多主題都預裝了配色方案和字體系列。 必須確保這些顏色和字體符合上述要求。 許多主題將自己標榜為“完全可訪問”，但這並不總是正確的。 使用您自己的測試來確定主題是否可訪問。

WordPress.com 的可訪問性團隊在 WordPress 存儲庫中準備了 92 個免費主題的列表，您可以立即開始使用。

在構建可訪問的主題時，請確保您從一開始就熟悉 WCAG 要求。 在開發過程中要解決的共同領域包括：

• 預設調色板中足夠的顏色對比度
• 使用鍵盤輕鬆瀏覽網站的能力
• 使用適當的 ARIA 角色和/或 HTML5 地標來確保屏幕閱讀器就緒體驗
• 正確的 HTML 語義標記
• 避免在頁面上重複 ID
• 允許用戶停止或控制任何自動運動

開始創建主題時，請務必將 WordPress 可訪問性指南添加為書籤，以便於參考。

WordPress 插件

WordPress 插件允許您向 WordPress 網站添加即插即用功能。 有兩種類型的 WordPress 可訪問性插件：幫助您構建可訪問的網站並使現有網站可供用戶訪問的那些。

請注意 WordPress 插件可為您提供“一鍵式可訪問性”或“自動可訪問性”等保證。 這些事情是不可能的。 插件是可以幫助您實現可訪問性目標的工具，而不是為您完成所有工作的魔杖。 有時，插件甚至會阻礙您的可訪問性工作——因此請謹慎行事！

有大量以可訪問性為重點的插件承諾改進、監控或修復可訪問性問題。 他們可能會審核該站點並讓您知道在哪裡進行改進。 或者，他們可能會提供前端工具，以便更輕鬆地在您的網站上創建可訪問的體驗。

其中一些非常有幫助。 然而，其他人則提供虛假承諾。 在提交之前，請務必確保徹底審查這樣的插件。

一些插件創建交互式內容，如測驗和滑塊。 如前所述，這些元素需要特別注意和測試，以確保它們完全可訪問。 在發布之前，始終在登台或開發站點上徹底測試交互式插件。

表單插件也是如此。 不幸的是，許多都存在可訪問性問題。 如果您發現這種情況，自定義編碼表單是一個不錯的選擇。

一種流行的插件類別是頁面構建器插件。 這些非常適合讓您快速構建強大而復雜的拖放設計。 但是，它們通常會引入比它們解決的更多的可訪問性問題。 這個問題沒有單一的解決方法，所以請保持您的設計簡單，並確保您測試所有元素以確認可訪問性。

可訪問性聲明

可訪問性聲明是您網站上的一個頁面，您可以在其中傳達您的內部政策、可訪問性目標以及過去與殘疾人合作的成功經驗。

出於以下原因，您應該在您的 WordPress 網站上生成並發布可訪問性聲明：

• 向您的用戶表明您關心可訪問性和他們
• 提供有關您的內容的可訪問性的信息
• 展示對可訪問性和社會責任的承諾

您可以按照 W3C 提供的這些指南或使用可訪問性聲明生成器編寫自己的可訪問性聲明。

如何測試 WordPress 網站的可訪問性

可訪問性不是按正確的按鈕，然後走開。 測試是確保網站完全可訪問的重要部分。 自動和手動測試都可以幫助確保您已覆蓋所有基礎。

如何進行自動化測試

自動化測試有助於衡量從哪裡開始。 如果您不熟悉可訪問性或不確定從哪裡開始，請從自動測試和評估開始。

大多數自動化測試將識別顏色對比度差、缺少替代文本、空鏈接、結構元素問題等。 您可以使用這些測試來生成要解決的問題列表。 像這樣的測試對於發現基於代碼的錯誤特別有幫助，這些錯誤肉眼可能不太明顯，但對您的一些用戶來說非常重要。

您可以使用的免費可訪問性測試的一個示例是 WebAim 工具。 它會檢查您的整個網頁並生成錯誤列表。 它甚至會準確地顯示這些錯誤發生在頁面上的哪個位置。

您可以找到大量單獨的可訪問性工具來幫助解決特定問題。 例如，在您開始設計之前使用對比度檢查器，以確保調色板中的顏色可以很好地融合在一起。

請記住，沒有任何自動化測試是完美的、萬無一失的，或者可以替代手動測試。

如何進行手動測試

因為 WordPress 可訪問性是關於真實的人類用例，所以必須由真實的人類來對網站是否可訪問做出最終決定。 因此，為手動測試預留時間和資源非常重要。

那麼，如何進行手動測試呢？ 在沒有花哨或昂貴的工具或程序的情況下，您可以做以下幾件事來測試網站的可訪問性：

1. 放棄鼠標：確保您可以僅使用鍵盤按鍵合理且輕鬆地瀏覽網站的所有功能。 這包括在部分之間移動、訪問菜單、從一個頁面到另一個頁面、向下跳過頁面以及與鏈接和表單進行交互。
2. 使用屏幕閱讀器：設身處地為能見度低或低的人著想。 使用屏幕閱讀器應用程序或網站並查看您網站上的內容，以確保在大聲朗讀時它仍然有意義且聽起來流暢。
3. 在不同的環境中測試網站：去有公共 WiFi 的地方，以確保您的網站在沒有高質量互聯網連接的情況下正常加載。 記下因連接不良而滯後或完全消失的網站區域。
4. 增加縮放：在瀏覽器中打開您的網站並使用瀏覽器設置放大 200%。 您仍然可以在此設置中使用、導航和參與網站嗎？ 是否有內容消失或被截斷？
5. 關注交互性：確保花大量時間測試視頻、表單和按鈕等交互元素。 鏈接和表單域應始終使用輪廓、下劃線、特殊光標突出顯示。
6. 仔細檢查您的 alt 標籤：如果您不確定圖像是否有附加的替代圖像，請使用檢查元素工具進行確認。
7. 換個思路：如果您網站上的所有圖片都消失了，還有人可以使用它嗎？ 如果您網站上的所有顏色突然變成黑白，這將如何影響可用性？ 如果裝飾元素受到某種影響，請確保您網站的重要部分仍然有效。

如有疑問，請聯繫提供手動可訪問性測試的公司。 可訪問性和網頁設計與開發方面的專家可以快速進行手動審查，並準確告訴您哪些領域需要工作。

不要忘記，您的真實受眾是您最好的資源之一。 在您的網站上有一個清晰的區域，用戶可以在其中提供可訪問性反饋。 如果有人在使用您的網站時遇到困難，那麼從您收集反饋的努力中應該可以清楚地看出您願意聽取這種體驗並糾正問題。

您的網站是否可供所有訪問者訪問？ 在本指南中了解有關如何測試可訪問性的更多信息️ Click to Tweet

概括

互聯網已成為我們日常生活中最重要的工具之一。 每個人都需要有訪問它的自由，無論是瀏覽娛樂還是重要信息。 您的網站有責任滿足網絡公平標準。

了解對這些指導方針的需求是做出重大而持久改變的第一步。 從長遠來看，建立一個可訪問的網站意味著更多的人會從您的網站所提供的服務中受益。

您對 WordPress 可訪問性有任何疑問嗎？ 請在評價部分留下您的意見！