如何開始使用屏幕閱讀器測試您的網站
已發表: 2022-04-19毫無疑問，建立可訪問網站的重要性。 這是網頁設計社區中不斷討論的話題。 而且，在我看來，大多數設計師都想把它做好。
可訪問性以一種或另一種方式影響著我們所有人。 無論是在博客文章中使用的特定詞語還是在頁面之間導航的能力——這都很重要。
但是，如果您不是依賴屏幕閱讀器等輔助技術的人，則可能會出現脫節。 很容易忽略給定功能如何影響用戶。 這可能是因為我們還沒有在這種情況下對其進行測試。
我承認我在這方面很掙扎。 我敢打賭，還有很多其他設計師也有。 作為一個通過鼠標導航的視力正常的用戶，我的特權並不總是讓我考慮可訪問性的一些重要方面。
沒錯，我使用自動化工具進行測試。 我確保字體清晰易讀，顏色對比度符合 WCAG 標準，並且圖像使用 ALT 屬性。 這些都是好事。 然而，它們並不代表使用網站的完整體驗。
那麼，我們如何將事情提升到一個新的水平呢？ 使用屏幕閱讀器測試您的網站是一個很好的開始方式。 讓我們以初學者的眼光來看看所涉及的內容。 從那裡，我將分享我在實驗過程中發現的東西。
查找屏幕閱讀器應用程序
該過程的第一步是找到合適的屏幕閱讀器應用程序。 您可能不必走得太遠，因為某些操作系統默認包含一個。
Mac 用戶可以使用 VoiceOver，而 Windows 用戶可以使用講述人。 此外，幾乎每個操作系統都有其他幾個選項可用。 就我而言，我將使用開源應用程序 NVDA。 它可以免費使用（由捐款支持），並且是更受歡迎的選擇之一。
無論您選擇哪種應用程序，對它的工作原理有一個基本的了解都很重要。 此外，可能需要事先進行一些調整。 例如，您需要確保您能夠理解正在閱讀的內容。 您可能還希望軟件在閱讀內容時突出顯示內容，使其更易於閱讀。
WebAIM 整理了一些方便的指南，用於設置各種屏幕閱讀器以進行測試。 他們將使您處於有利位置，以了解您的網站的可訪問性。
四處走走
現在您已經準備好可靠的屏幕閱讀器，是時候進行測試了！ 要體驗用戶體驗，請嘗試通過啟用屏幕閱讀器的鍵盤瀏覽網站的各個部分。
一些鍵盤命令比其他鍵盤命令更通用。 例如， TAB鍵將帶您到各種鏈接和表單控件，而ENTER將帶您到鏈接的目的地。 大多數似乎使用箭頭鍵從一行移動到另一行。
但是，可能有一些特定於屏幕閱讀器應用程序的特殊命令。 它們允許在標題、地標（例如頁眉和頁腳等）之間導航。為此，您需要查看其文檔。
還值得注意的是，以這種方式有效地瀏覽網站需要練習。 前幾次嘗試可能有點尷尬。 但是一旦你掌握了各種命令的竅門，事情就會變得更加直觀。
我的屏幕閱讀器體驗
只是為了澄清一下——我不是專業的屏幕閱讀器用戶。 我的知識充其量是初級的。 但我在 NVDA 上的經歷很有啟發性。
我用我的商業網站的幾頁作為試驗場。 我發現的不一定是重大缺陷。 可以閱讀文本並且可以導航站點。
相反，我發現了一些煩惱——這些事情會讓用戶感到沮喪，這是可以理解的。 讓我們回顧幾個例子：
中斷的滑塊
在接受可訪問性專家 Taylor Arndt 的採訪時，她提到輪播/幻燈片是會損害可訪問性的功能。 使用屏幕閱讀器進行測試將其帶到了最前沿。
我使用的自動輪播是可以導航的，但有個討厭的習慣，就是每次看到下一張幻燈片時都會宣布自己。 這使得屏幕閱讀器在被打斷之前很難深入到頁面的其他部分。
我找到了一個足夠簡單的解決方法。 我使用的 WordPress 滑塊插件 (Soliloquy) 有一個選項可以將 ARIA 實時區域更改為不那麼激進的設置。 再加上使用輪播的手動導航，擺脫了麻煩。
重複的文字
對圖像使用ALT屬性是一種常見的可訪問性建議。 但是對於純裝飾性的圖像，提供描述性文本可能是多餘的。 我在幾個不同的場合遇到過這個問題。
博客文章列表是罪魁禍首。 帖子標題和特色圖片的ALT屬性都是相同的——這意味著屏幕閱讀器會閱讀它們兩次。 結果是，即使是相對較短的帖子列表也會造成痛苦的用戶體驗。
癥結在於，我使用的 WordPress 帖子列表塊沒有保留空 ALT 屬性的選項。 因此，可能需要解決方法。
了解網站可訪問性如何在實踐中發揮作用
建立符合 WCAG 標準的網站讓人感到滿足——這也是我們作為網頁設計師應該做的事情。 但勾選待辦事項清單上的複選框並不能說明全部情況。
更好地了解其他人將如何體驗您的工作需要一些額外的努力。 使用屏幕閱讀器進行測試提供了獲得更多洞察力的途徑。 雖然這絕不是一個完整的指南，但我希望它有助於激發您的興趣和實驗。
正如我發現的那樣，即使一個項目被認為可以通過標準的字母來訪問，這並不意味著它很容易使用。 這就是為什麼深入挖掘是值得的。 這可能是僅可用的站點或提供最佳體驗的站點之間的區別。
注意：如上所述，我是這項技術的新手。 如果您有屏幕閱讀器提示要分享，請隨時通過 Twitter 與我聯繫。