WordPress 的 DIY 可訪問性測試技巧

[ad_1]

在當今世界,遊戲的名稱是包容。 雖然 Web 可訪問性並不是一個新概念,但近年來 Web 可訪問性本身已變得更易於訪問。

從本質上講,Web 可訪問性是設計和構建網站的做法,以便為儘可能多的用戶提供功能。 與視力正常、色盲或運動技能受損的用戶相比,盲人用戶與網站的交互方式不同。

Web 內容可訪問性指南 (WCAG) 最初於 2008 年發布為 2.0 版,由萬維網聯盟 (W3C) 開發,是 Web 可訪問性的黃金標準。 當前版本, WCAG 2.1,概述了 4 個不同類別的 Web 可訪問性領域的最佳實踐:可感知、可操作、可理解和穩健。 預計下一個版本 2.2 將在 2022 年底發布,以進一步定義現有指南並添加一些新指南。

此外,可訪問性在 WordPress 社區中根深蒂固,它們是 致力於納入可訪問性 軟體本身的最佳實踐。 一些 WordPress 開發人員甚至超越了他們的主題和插件。 比如 WPExplorer 自己的 總主題 將可訪問性放在首位,以至於開發人員 AJ 經常自己定期進行可訪問性改進。

WordPress 可訪問性 非常重要,並且不再像以前那樣難以導航。 工作時 網站改版項目,甚至只是為您現有的網站添加新功能,在設計和構建過程中需要考慮以下幾點,這將有助於您的網站符合當前的可訪問性標準。

設計和初始構建

應在 WordPress 項目的整個過程中考慮 Web 可訪問性標準。 儘管構建後的測試過程可能會捕獲初始構建中遺漏的任何錯誤,但最好在第一次構建站點時儘可能「乾淨」。 在您的網站項目的這個階段,請考慮以下事項:

顏色對比

顏色對比

測試可訪問性的最簡單的 Web 元素之一是顏色。 WCAG 2.1 為網站上的任何兩種顏色(前景和背景)指定了特定的顏色對比度。 對於正常大小的文本(18pt 以下),對比度必須至少為 4.5:1,對於較大的文本(18pt 及以上),對比度必須至少為 3:1。

但是你怎麼知道顏色對比度是多少呢? WebAim 是 20 多年來值得信賴的網路可訪問性領導者,已創建 檢查顏色對比度的好工具 你的顏色。 添加前景色十六進位代碼和背景十六進位代碼,該工具將計算對比度。 如果比率不夠高,可以通過滑塊調整每種顏色的值,以幫助確定同一顏色故事中的傳遞組合。

幸運的是,在您的網站上更改和嘗試不同的顏色選項是一個相對簡單的過程。 WordPress的原生 古騰堡建造者 允許您輕鬆更改整個內容塊的顏色或專門針對任意數量的特定單詞。 您還可以在主題面板中進行調整以進行全局顏色編輯。

後備顏色

更改頁面、帖子、小部件的背景顏色

如今,大多數網站都設計有大量圖像。 但是由於各種原因,一些用戶可能會關閉您網站上的圖像或樣式,以更快或更輕鬆地獲取他們需要的信息。

想像一下,您有一個面板,上面有一個大圖像和白色文本。 在 Web 瀏覽器中關閉圖像時,站點的背景默認為白色。 該白色文本現在在白色背景上不可見。 如果那是重要的內容,比如號召性用語或價值主張,該怎麼辦?

要解決這些問題,請務必為您網站上的所有面板添加後備顏色,並在圖像頂部添加文本。 在前面的示例中,將該面板的後備顏色更改為黑色可以解決問題,白色文本將可見。 如果您不確定使用什麼顏色作為備用顏色,Web Aim 顏色對比工具是一個很好的指南。

多個導航選項

WP 站點地圖頁面插件

出色的菜單設計可能是網站上的一項突出功能,但包含多個導航選項也很重要。 如果網站的導航以另一種方式呈現,一些用戶可能能夠更快地找到他們正在尋找的信息。

在網站頁腳鏈接的站點地圖可能是一個很好的解決方案。 這允許用戶在一個區域中查看所有可用頁面,並可以改善他們的用戶體驗。 這 WP站點地圖頁面插件 是輕鬆添加可以列出頁面、博客文章、案例研究、投資組合項目等的簡單站點地圖的可靠選項。

另一種選擇是向您的網站添加搜索功能,以便用戶可以快速搜索您的整個網站以查找特定關鍵字或短語。 默認情況下,WordPress 包含一個 基本搜索小部件 您可以在側邊欄或頁腳中使用它,但在 Gutenberg(以及大多數其他頁面構建器)中也有一個搜索塊,並且主題開發人員通常會在主題標題中構建一個搜索框或圖標。 另外,您可以自定義和 改進 WordPress 搜索功能 帶有各種有用的插件。

可訪問性反饋表

如何為 WordPress 創建可訪問的 Web 表單

理想情況下,您網站的頁腳還應鏈接到可訪問性反饋表。 即使您儘可能多地採取可訪問性步驟,隨著指南和技術的發展以更好地適應用戶,總會有改進的空間。

包含帶有可訪問性反饋表的頁面允許您的用戶在缺少某些內容並限制他們的訪問時提交有關您網站的可訪問性的其他評論或疑慮(請記住使用 可訪問的 WordPress 表單)。 它還讓他們知道您關心他們的網路體驗。 然後,您可以使用此反饋為該用戶和需要類似住宿的未來用戶改進您的網站。 聽取社區意見並在需要時進行調整是該過程的關鍵部分。

構建後測試過程

一旦您的網站的大部分構建完成,就該開始更深入的可訪問性測試了。 這應該包括自動化測試和手動測試。 自動化測試是捕獲某些問題的重要資源和節省時間。 然而,可訪問性是基於人的問題,人工智慧無法識別所有存在的細微差別。 因此,手動測試網站的某些元素同樣重要。

自動化測試

有各種出色的自動測試工具可以促進順暢的可訪問性工作流程。 重要的是要記住,通過自動化測試不足以使網站易於訪問,但它是一個很好的起點。

WAVE 網路可訪問性評估工具

為了快速了解您的網站是否通過了基本的可訪問性標準, 波工具 是一組自動評估工具,基本上掃描網頁並報告 WCAG 失敗和需要額外調查的項目。 在瀏覽器擴展的幫助下,WAVE 工具將以紅色表示明顯的可訪問性失敗。 它們分為誤差和對比度誤差。 錯誤通常與您網站的編碼有關。 當您的配色方案不符合對比度標準時,就會導致對比度錯誤(在本文前面進行了評論)。

通過均衡數字功能的可訪問性檢查器

一旦您準備好解決網站上的任何對比錯誤,就會有插件選項,例如 均衡數字可訪問性檢查器 這可以簡化您網站後端的調整過程。 免費版插件會自動檢查頁面和基本帖子,以報告每個頁面上的常規錯誤和對比錯誤。 升級到專業版允許掃描自定義帖子類型。 該插件可以輕鬆識別代碼中的錯誤並根據需要進行更改。

手動測試

如前所述,當前可用於自動化測試的工具和法律流程存在局限性。 WAVE 工具和均衡檢查器是自動掃描的重要資源,可以節省大量時間。 但是人類創造的人工智慧不需要與真正的殘疾人用戶一樣的適應。

手動查看站點並使用一些禁用用戶可能使用的工具來查看是否可以進行導航和信息收集非常重要。 需要手動檢查的幾個方面包括頁面縮放功能、鍵盤導航、屏幕閱讀器和替代文本。

頁面縮放測試應該檢查頁面是否可以放大到 200% 而不會丟失任何內容或功能。 僅使用瀏覽器的本機縮放功能而不使用其他輔助技術,這應該是可能的。 您還需要確保放大不需要用戶在兩個方向(上下和左右)滾動。

一些用戶無法(或不願)使用滑鼠瀏覽網站。 相反,他們將使用鍵盤進行導航,通常使用 TAB 鍵和其他一些鍵在元素之間移動。 對於鍵盤導航測試,您需要確保您網站上的互動式元素在鍵盤定位該元素時具有可見的焦點輪廓。 還要檢查所有懸停功能以確保 TAB 顯示任何隱藏的內容。 儘管此過程可能令人生畏,但請從您的關鍵頁面開始,並嘗試通過每個關鍵頁面進行 TAB。 您是否能夠正確訪問所有內容和鏈接?

屏幕閱讀器測試可能是最棘手的,因為該技術更小眾。 檢查您的網站對屏幕閱讀器用戶的可訪問性的最佳方法是使用屏幕閱讀器實際運行您的網站。 您的網頁層次結構是否清晰? 您是否正確使用標題並根據屏幕閱讀器的需要表示特定元素?

手動測試可能很耗時,並且很難確保您的站點可以訪問所有可用的輔助工具。 然而,這是非常重要的一步,否則這些住宿將被忽視。

在當今世界,包容性是最好的政策。 一個可訪問的網站意味著更多的訪問者可以獲得有關您公司的信息並有可能與您聯繫。 雖然沒有具體 符合 ADA 的網站 然而,如果某些用戶無法訪問您網站上的信息以採取後續步驟,那麼您將失去潛在客戶或客戶。

使用本文中提供的信息作為您的無障礙之旅的起點。 請記住,Web 可訪問性是一個持續的過程,因為標準和指南會經常更新以更好地為社區服務。 以開放的心態接近這個世界,並理解它可能不是一個開放和封閉的過程。 歸根結底,一切都是為了改善所有用戶的用戶體驗。

相關文章