如何在您的 WordPress 網站中加入 Web 可訪問性
已發表: 2020-02-15
WordPress是最流行的網站建設平台。 根據 W3techs 的數據,35.7% 的網站使用 WordPress,這使其在全球內容管理系統 (CMS) 市場份額中達到驚人的 62.5%。
但是,在創建 WP 網站時,Web 可訪問性可能是您最不想考慮的事情。
但是,WordPress 可訪問性編碼標準聲明“在 WordPress 中發布的所有新代碼或更新代碼都必須符合 AA 級的 Web 內容可訪問性指南 2.0。 ”
換句話說,如果您擁有 WP 網站,可訪問性是一個關鍵因素。
幸運的是,讓您的 WP 網站可訪問並非不可能。 但是,在討論如何做之前,讓我們先了解一下 Web 可訪問性的構成。
A. Web 可訪問性的四大支柱
為 Web 制定國際標準的萬維網聯盟 (W3C) 已經提出了以下四項 Web 可訪問性原則:
- 可感知的:您需要以每個人都能感知的方式呈現您網站上的所有信息和元素。
- 可操作:所有可導航和交互的元素都必須可由不同的用戶操作。
- 可理解:每個人都應該能夠理解您網站上的信息和用戶界面。
- 健壯:各種類型的輔助技術和用戶應該能夠閱讀您網站上的內容。
B. WordPress Web 可訪問性最佳實踐
牢記上述原則,您可以採取以下步驟使您的 WordPress 網站可供殘疾人士訪問:
- 提高文本可訪問性
每個人,包括視障者,都應該能夠閱讀您網站上的文字。 雖然您可以默認使用大尺寸字體,但提供可調整大小的文本將進一步提高可讀性。 視障用戶可以使用此功能根據自己的方便增加字體大小。
此外,請確保在必要時添加替代文本,例如 Alt 標籤。 WP Accessibility 是 WordPress 可訪問性插件之一,它可以幫助您添加可調整大小的文本、顏色對比、添加帖子標題以閱讀更多鏈接並提供合適的替代文本。
- 結構化前端和後端
您的每個網頁都需要有一個結構良好的前端和後端。 它不僅提高了內容的整體可讀性,而且使輔助工具更容易將信息傳達給殘疾用戶。 您可以使用語義標題標籤和元描述等 HTML 元素來改進後端。
確保使用項目符號列表、短段落以及組織良好且中肯的內容應該有助於改進前端。 您還應該使用適當的標題和標題來定義各種內容小節。 避免使用華麗的動畫和 GIF,因為它們不便於訪問。
此外,添加跳過鏈接以使屏幕閱讀器用戶更輕鬆地進行內容導航。 這種簡單的可訪問性功能允許用戶從內容的一個部分跳轉到另一部分,而無需瀏覽不必要的材料。
- 鍵盤導航以獲得更好的交互
您還需要確保您的網站可通過鍵盤導航。 它應該包括鏈接和菜單,尤其是下拉菜單。 所有用戶都應該能夠使用 Tab(向前)和 Shift+Tab(向後)訪問鏈接、菜單、按鈕和表單等元素。
您還需要使用可見的焦點指示器,它可以顯示禁用用戶在網頁上的位置。 WordPress 主題通常可能會重置默認的焦點樣式。 確保使用不會重置此功能的 WordPress 主題。 Divi 可訪問性主題可以幫助您通過可訪問的下拉菜單和可聚焦元素的視覺輪廓設置鍵盤友好型導航。

- 添加 ARIA 地標
ARIA 代表 Accessible Rich Internet Applications。 借助 ARIA 地標角色,您可以定義網頁的不同區域,讓輔助技術用戶輕鬆瀏覽您的網站。
最常見的 ARIA 地標角色包括橫幅、主要、補充、內容信息、搜索和導航。
- 橫幅:定義網站標題,例如徽標、公司名稱或網站標題。
- Main:定義網頁的主要內容。
- 補充:檢測作為主要內容的重要組成部分的支持內容。
- 內容信息:提供有關父文檔的信息,例如腳註、版權和隱私聲明。
- 搜索:表示您網站上的搜索表單。
- 導航:標記網頁的導航元素。
使用 ARIA 地標的最大優勢是它們可以使用已經具有語義的 HTML5 元素。 因此,您可以將它們與現有 WordPress 主題中的 HTML5 元素一起使用。
- 互動元素:色彩對比
對於 CTA 和表單等交互式元素,請始終使用高對比度顏色作為文本背景。 WCAG 2.0 AA 級要求普通文本的對比度至少為 4:5:1,大文本的對比度至少為 3:1,而 AAA 級要求普通文本的對比度至少為 7:1,4:5: 1 用於大文本。
通常,白色背景上的黑色文本提供最佳的顏色對比。 您也可以在黃色背景上使用黑色文本,反之亦然。 但是,請避開組合,例如紅色背景上的綠色文本或綠色背景上的紅色文本。
離別詞
網站可訪問性還擴展到您網站上的其他交互元素,例如多媒體。 確保沒有任何多媒體(如視頻、音頻、滑塊或輪播)具有默認的自動播放選項,因為它對殘疾用戶來說是一個重大障礙。 相反,所有多媒體內容都應該在用戶交互之後才開始播放。
除了視頻腳本、音頻描述和字幕外,請確保使用可訪問的媒體播放器。 您可以使用像 Able Player 這樣的插件,它允許您在 WordPress 網站的任何頁面上添加包含在可訪問媒體播放器中的視頻和音頻。
使您的 WordPress 網站可訪問將需要您更改其設計和開發流程,並且可以通過顧問的手動過程來完成。 自動網絡可訪問性解決方案需要少量的時間和資源投資,這將帶來許多好處,包括積極的品牌形象、更廣泛的市場範圍、更好的搜索排名,更不用說增加銷售額了。
如果您仍然對如何使您的 WordPress 網站易於訪問有疑問,請隨時將您的查詢放在評論中。
