設計符合 ADA 標準的 WordPress 網站的技巧

[ad_1]

如果你的目標是 創建一個 WordPress 網站 這既成功又對用戶友好,您可能已經知道您需要關注網站的載入速度、適當的頁面布局、導航和 SEO 元素等方面。 但是,您可能不知道的是,您還需要使您的網站符合 ADA 標準。

不確定什麼是 ADA 合規性或為什麼在構建網站時需要優先考慮它? 那你來對地方了。 讓我們分解什麼是 ADA 合規性,為什麼需要關注它,以及如何將 WordPress 網站設計為符合 ADA 標準。

定義 ADA 合規性

在定義 ADA 合規性之前,讓我們快速討論一下網站的可訪問性。 網站可訪問性的核心是改善殘障用戶訪問網站的做法。 重要的是,網站的設計和開發方式應能為殘疾用戶或非殘疾用戶提供對其功能和數據的完整訪問許可權。

ADA——也被稱為 美國殘疾人法案 – 是一項聯邦法律,其標準要求任何美國殘障公民都能輕鬆訪問信息和數字技術。 儘管與第 508 節標準類似,ADA 的不同之處在於它廣泛適用於公共和私人(以及非營利)組織。 相比之下,第 508 節專門適用於聯邦信息通信技術。

符合 ADA 標準的 WordPress 網站的簡單提示

現在您已經熟悉 ADA 合規性及其對用戶的重要性,您需要了解如何設計符合 ADA 標準的 WordPress 網站。 以下是您應該遵循的一些最重要的步驟。

從您的初始設計和構建開始

在創建 WordPress 網站的整個過程中,您都需要牢記可訪問性標準。 即使您會在構建後測試期間發現與可訪問性相關的問題,您仍然希望創建一個儘可能乾淨的網站。

Chrome 檢查顏色對比度

建議您從注意顏色對比開始。 根據 WCAG 2.1,網站必須保持顏色對比度 至少 4.5:1 如果他們在背景和前景上使用 18pt 以下的文本。 對於使用 18pt 或更大文本的網站背景和前景上的任意兩種顏色,對比度必須為 3:1。 這很容易通過使用瀏覽器的開發人員工具檢查您的網站設計來輕鬆測試。 在上面的屏幕截圖中,您可以看到 WPExplorer 段落的對比度為 14.66——遠高於最低值 4.5。

古騰堡阻止更多設置:背景

後備顏色對於您網站的 ADA 合規性也很重要。 現代網站充滿了有趣的圖像,但許多用戶禁用樣式和圖像以更快地訪問網站上的信息。 當用戶通過他們的瀏覽器禁用圖像時,他們正在訪問的站點的背景顯示為白色。 為此,請確保 添加後備顏色 在您的 WordPress 網站的面板上,一定要添加替代文本(當圖像無法顯示時瀏覽器會使用它)並考慮在圖像頂部包含描述性文本。

如果您使用的是頁面構建器,則只需為構建時要放置圖像的塊、列或行背景選擇一種顏色。 您可以在上面看到塊背景顏色的古騰堡示例。 但是對於帶有硬編碼模板的主題,您可能需要創建一個子主題來添加自定義回退,或者如果您對代碼不滿意,請諮詢主題開發人員。

WordPress 菜單前端顯示

作為初始設計和構建的一部分,嘗試製作具有多個直觀導航選項的菜單設計。 當你 在 WordPress 中創建菜單 它需要分配給菜單位置,但根據您的主題,您可能有多個甚至許多位置。 請務必檢查所有菜單在桌面和移動設備上的可訪問性和可用性。 您還可以考慮在您網站的頁腳中鏈接站點地圖,讓您的訪問者從一個地方訪問您網站的所有頁面。

搜索展示位置示例 - 總主題

此外,您還需要包括搜索功能,以允許用戶使用特定的短語和關鍵字來搜索您的網站。 大多數主題的標題設計中都包含一個搜索圖標。 但如果您的主題沒有,那麼您可能希望將搜索小部件添加到您網站的側邊欄或頁腳。

總聯繫頁面

最後,為了確保您從可訪問性的角度來看做得很好,請在您網站的頁腳中包含一個反饋表。 有很多易於使用和 可訪問的網路表單 對於 WordPress,您可以使用它來接受輔助功能反饋,以及為您的站點創建其他表單(例如聯繫表單、博客提交、用戶註冊等)。

培養可讀的內容

當談到 ADA 合規性時,您需要克服的一個大障礙是可讀性。 可讀內容只是指易於閱讀和理解的內容。

一般來說,每個內容行的目標應該是七到十個單詞。 您應該可以隨意調整字體大小和列寬,以及使用媒體查詢調整移動設備上的文本。 您網站內容的可讀性越高,您的訪問者就越有可能在您的網站上停留更長時間並導航到您的其他頁面。

如果您想使用標準化設計來幫助提高內容的可讀性,沒有比 Google 的「Material Design」更好的工具了。 材料設計重點 嚴重依賴可讀性 並為網站建設者提供推薦的圖標、布局、顏色等。

重要的是要防止站點的文本位於任何使用 alpha 透明度的背景顏色之上。 如果不這樣做,您將在測試站點時遇到錯誤。 在處理針對 alpha 透明度放置的顏色時,您應該使用十六進位的數字代碼。

alpha 透明度中的「alpha」指的是顏色的透明度或不透明度; 它影響對比度並表示為零(完全透明)或一(完全不透明)。 在 ADA 合規性的背景下,重要的是要記住,降低元素的 alpha 反過來會降低其對比度並允許底層顏色滲出。 始終設計一個 WordPress 網站,強調文本與其背景顏色之間的對比,以優化內容的可讀性。

採用可靠的最佳實踐

如果您不首先熟悉經過驗證的可訪問性最佳實踐,就不會想要創建您認為符合 ADA 標準的網站。 如果您在 ADA 合規性方面不接受一些經過驗證的、可靠的最佳實踐,您將面臨處理與 ADA 相關的訴訟的風險。

盡最大努力測試可訪問性級別後,您將想要解決遇到的每個問題。 盤點 WordPress 網站上的內容,並決定是否可以創建替代輸出來替換現有的媒體內容,例如圖像和視頻。

事實上,如果你想改善視障用戶的體驗(你應該儘可能這樣做),你需要確保你的文本保持 4.5:1 或更高的對比度,並且可以調整大小200%。 這些用戶還將受益於當您的網站輸出聲音時活躍的微妙視覺指示器或伴隨您的視覺媒體的字幕。

對於您網站的身體殘障訪問者和使用屏幕閱讀器的訪問者,重要的是要確保您的網站具有邏輯標籤路徑和清晰的標籤焦點樣式,以便用戶可以輕鬆地通過標籤瀏覽您網站的元素。 遇到暫時性和永久性運動障礙的用戶嚴重依賴鍵盤來輕鬆導航 – 邏輯選項卡順序可以為您網站的任何運動障礙訪問者提供無縫導航。

儘管這可能很棘手,但通過執行可用性測試在提高可訪問性與不影響網站功能之間取得適當的平衡非常重要。 這些方面之間的合理平衡不僅可以為您的訪問者提供直觀的體驗,減少您遭受與 ADA 相關訴訟的可能性,而且還可以增加您的網站的機會 贏得更多正面評價 在線的。

創建一個 符合 ADA 標準的 WordPress 網站 對您的品牌來說無疑是一件大事。 也就是說,創建和維護一個遵守 ADA 的網站是一項公認的艱巨任務。

如果您擔心投資於 ADA 合規性會佔用您太多寶貴的資源和時間,請記住,符合 ADA 合規性可以提高您的網站在 Google 結果頁面中的可見度。 它還可以防止您受到耗時且代價高昂的 ADA 相關訴訟的打擊,並增加您培養更廣泛客戶群的可能性。 讓您的訪問者與殘障人士打交道,並通過投資 ADA 合規性來長期投資您的品牌。

相關文章