使用 WordPress 構建可訪問網站的最佳工具和技巧的終極列表。

已發表: 2016-10-08

閱讀 Web 可訪問性指南以構建可訪問的 Web 設計。有很多免費的 CMS 可用於快速輕鬆地構建網站和博客，但構建可訪問的網站可能既困難又復雜。不要忘記使用網絡可訪問性檢查工具來測試您的網站。

在本文中，我將分享一些最佳實踐、技術和插件，以使用 WordPress 構建用戶友好且可訪問的網站。

世界上大約 15% 的人口，或估計有 10 億人，生活在殘疾中。世界衛生組織估計有 10 億人患有殘疾，其中 80% 生活在發展中國家。
如果適當的互聯網工具可用，殘疾人可以平等地參與社會並為經濟做出重大貢獻。互聯網社會

可訪問的網站是什麼意思？

對於殘障人士來說，無障礙意味著能夠像沒有殘障的人一樣有效地使用網站或移動應用程序。

Web 可訪問性的重要性

這意味著使用包容性設計原則、推薦的最佳編碼實踐和工具來構建可供更廣泛人群使用的網站、產品、應用程序和服務。

在某些情況下，這是不可能的，可能需要輔助技術來填補空白。如果是這樣，主流技術應該能夠實現輔助設備的軟件或硬件無縫連接，無論是互操作性還是數據便攜性。

簡而言之，無障礙網站可供殘障人士毫無問題地使用。聾人可以閱讀音頻和視頻的文字記錄，人們可以通過鍵盤（不使用鼠標）導航到您網站的不同部分，色盲人也可以看到您的網站。

殘障人士的無障礙網頁

構建可訪問的網站：最佳實踐和 WordPress 插件

要建立一個網站，您需要一個 CMS 並在互聯網上託管您的網站，您需要一個可靠的網絡託管服務提供商。

1. 選擇一個快速可靠的虛擬主機提供商

共享託管計劃也非常受歡迎且價格合理。如果您沒有大預算並且想從小處著手。註冊可靠且負擔得起的託管服務提供商，例如 WestHost.com。

如果您要建立一個商業網站或博客。不要猶豫，多花一些錢。註冊一個更可靠和託管的 WordPress 託管服務提供商。

FlyWheel 提供出色的 WordPress 託管和管理服務。專為設計師和代理商打造。基本計劃的起價僅為每月 15 美元。

2. 選擇 Accessibi1e CMS

從頭開始創建網站或構建自己的 CMS 非常昂貴且需要大量時間。選擇一個出色、強大且可靠的內容管理系統，例如 WordPress。

WordPress 開發人員非常重視 Web 可訪問性。 WordPress 可訪問性團隊有一個官方的 WordPress 可訪問性博客。

有很多免費和高級的 WordPress 插件和主題也可用於快速輕鬆地構建可訪問的網站。默認的 WordPress 主題是可訪問的，您可以閱讀文檔來構建您自己的可訪問的 WordPress 主題。

WordPress 不僅僅是一個簡單的博客工具，您可以使用這個強大的 CMS 來構建 35+ 類型的網站和博客。

面向設計師的 Web 可訪問性指南出色的 Web 可訪問性始於設計。

設計是任何網站最重要的部分之一。不要忘記遵循這些最佳實踐。如果您要使用 WordPress，您也可以安裝 Accessibility Ready Themes。

1儘早規劃標題結構：確保所有內容和設計都符合邏輯標題結構。

2考慮閱讀順序：閱讀順序應與視覺順序相同。

3提供良好的對比度：要特別小心灰色、橙色和黃色的淺色調。

4盡可能使用真實文本：避免使用圖像並使用文本。真正的文本可以更好地放大、加載更快並且更容易翻譯。使用 CSS 添加視覺樣式。

5觀看大寫字母的使用：所有大寫字母都可能難以閱讀，並且屏幕閱讀器可能會錯誤地閱讀。

6使用適當的字體大小：字體大小可以根據選擇的字體而有所不同，通常至少 10 磅。為確保可讀性，您網站上的字體大小至少需要為瀏覽器默認大小 16 像素 (100%)。

視頻：Web 可訪問性觀點：可自定義的文本

7記住線長：不要太長或太短

8確保鏈接是可識別的：用下劃線或其他顏色區分頁面正文中的鏈接。

觀看以下視頻以了解有關 Web 可訪問性視角的更多信息：大鍊接、按鈕和控件。

9設計鏈接焦點指示器：確保鍵盤用戶在使用鍵盤導航時可以直觀地識別鏈接。

10設計一個“跳轉到主要內容”鏈接：用戶跳過導航的鍵盤可訪問鏈接應位於頁面頂部。

11確保鏈接文本本身有意義：避免“單擊此處”或其他模棱兩可的鏈接文本，例如“更多”或“繼續”。

12謹慎使用動畫、視頻和音頻：提供播放/暫停按鈕。避免閃爍或頻閃可能導致癲癇發作的內容。為您的所有視頻和音頻內容提供字幕和文字記錄。

13不要只用顏色傳達內容：用戶通常無法區分或可能覆蓋頁面顏色。

14設計可訪問的表單控件：確保表單控件具有描述性標籤、說明和驗證/錯誤消息。

15 個響應式導航菜單：確保您的導航菜單具有完全響應性和移動友好性。以合乎邏輯且一致的方式定位導航菜單項。使它們可以通過鍵盤訪問。

16鏈接和圖像的替代文本：始終優化您的網絡圖像。使用 WordPress 圖像優化插件或 tinypng 等在線服務來壓縮圖像以減小圖像大小。

它將幫助您加快網站加載速度。為所有圖像和鏈接提供替代文本，並正確命名您的圖像。

17使網站響應：確保用戶可以通過移動設備訪問您的網站，並且他們可以輕鬆閱讀您的所有內容。使用 CSS3 媒體查詢使您的網站具有響應性，或使用 WordPress 插件使您的網站具有響應性。

無障礙網頁視角視頻系列

W3C Web Accessibility Initiative (WAI) 發布了 11 個關於無障礙網頁設計的視頻。這是一個備受關注的播放列表，供每位網頁設計師和博主學習如何構建可訪問的網站和博客並創造更好的用戶體驗。

在此 YouTube 播放列表中，您可以了解以下主題。

視頻字幕
具有良好對比度的顏色
大鍊接、按鈕和控件
可定制的文本
鍵盤兼容性
清晰的佈局和設計
7 通知和反饋
文字轉語音
可理解的內容
語音識別
10個主題/視頻的彙編

構建可訪問的網站 – WordPress 插件和主題

有許多可用的免費插件和主題，可幫助您使您的 WordPress 網站和博客上的內容更易於訪問。

可訪問性就緒的 WordPress 主題：

來自 WordPress 開發人員的所有默認 WordPress 主題都是可訪問性的。您還可以在 WordPress 主題目錄中找到大量免費的輔助功能就緒主題。

Web 可訪問性檢查器 WordPress 插件

1. WP Accessibility是最受歡迎的免費和最新插件之一，可幫助解決 WordPress 主題中的各種常見可訪問性問題。

您可以根據活動主題的需要禁用所有功能。對於高級用戶，所有基於修改樣式表的功能都可以通過在主題目錄中放置適當的樣式表來使用您自己的自定義樣式進行自定義。

2. WordPress 的可訪問性主題模式：Github 上提供了一系列免費模式，用於創建可訪問性就緒的 WordPress 主題。

以下模式可供免費下載。

帶有 JS Aria 的評論表單在 ARIA 響應中包含標籤
下拉菜單是一種免費模式，可訪問您的 WordPress 主題的下拉菜單。
創世紀跳過鏈接
菜單鍵盤箭頭導航：閱讀本文以了解如何將箭頭添加到導航菜單。
閱讀更多鏈接：閱讀如何自定義閱讀更多鏈接和顯示 WordPress 帖子摘錄。
響應式菜單是一種添加到您的 WordPress 主題的模式。
跳過鏈接

WordPress 的可訪問性主題模式可幫助您創建可訪問性的 WordPress 主題。該代碼並不意味著是一個完整的主題，但子目錄中的每個模式都可以幫助您使您的主題更易於訪問。

3. Theme-a11y-Tester ：用於測試 WordPress 主題以滿足可訪問性要求的環境。

A11y-Theme-Unit-Test ：這是 WordPress 主題單元測試的一個版本，針對更有效的可訪問性測試進行了調整。

4. 響應式菜單插件是流行、免費且高度可定制的 WordPress 響應式菜單插件，有 120 多個可定制選項。

5. Contact Form 7：Accessible Defaults是一個免費插件，可將默認的 Contact Form 7 表單替換為可訪問的等效表單，並提供一套可選的基本表單。

6. Gravity Forms 的 WCAG 2.0 表單域可以修改表單域並改進驗證，使表單滿足 WCAG 2.0 可訪問性要求。

7. Accessible Video Library是一個免費的 WordPress 插件，用於管理視頻，包括每個視頻的字幕、腳本和字幕。

Web 可訪問性檢查工具和瀏覽器擴展

以下是一些針對 Chrome 的免費輔助功能測試

可訪問性開發人員工具
A-Tester – WCAG 2.0 網頁無障礙工具
WAVE 評估工具
斧頭
ChromeVox