Go Wiki:WebAccessibilityResourcesAndTips
可訪問性或“a11y”是 Web 開發中日益重要的一個主題。它對 Go 來說很重要,因為許多 Go 工具和資源都使用 Web 技術,例如 godoc。確保這些工具具有可訪問性,可以確保更多人能夠使用它們,從而有更多人能夠使用 Go。
可訪問性是一個宏大的主題,其範圍從僅僅是晦澀難懂到極其晦澀難懂。
然而,有一些簡單的經驗法則可以遵循,它們可以大大降低意外建立不可訪問頁面的機率。
- 優先使用語義標記。原生 HTML 元素內建了大量的可訪問性功能,無需開啟或關閉任何東西。如果您有一系列專案,請使用
ul或ol,即使您不希望它顯示為列表。額外的 CSS 是值得的。 - 使用標題(
h1-h6)時,切勿跳過級別,並確保它們具有邏輯巢狀,例如,h4應是前一個h3的邏輯子部分。螢幕閱讀器將這些用作導航標記,類似於目錄。 - 避免使用與文件源順序相悖的佈局。使用 flexbox 和 grid 重新排列元素非常容易,但這樣做時,焦點順序保持不變。透過鍵盤瀏覽網站的人會看似隨機地在不同位置之間跳轉,導致很難理解發生了什麼。
- 確保足夠的色彩對比度。並非所有人都擁有完美的視力或高質量的顯示器。兩者都可能導致難以區分低對比度內容在哪裡開始和結束。 https://leaverou.github.io/contrast-ratio/
- 確保頁面在沒有顏色的情況下也可用。存在多種型別的色覺缺陷。有些(如紅綠色盲)很常見。其他一些則可能相當罕見。確保每個人都能獲得相同資訊的最佳方法是將資訊編碼到形狀和顏色中。例如,如果您正在為測試執行器製作儀表板,請不要僅僅用綠色圓圈表示成功,用紅色圓圈表示失敗:用綠色勾號表示成功,用紅色叉號表示失敗。
- 提供清晰的懸停和焦點樣式,讓使用者知道某個元素是“可點選的”。與上述一樣,即使沒有顏色,這一點也應該是清晰的。
- 確保將頁面放大到 200% 時不會中斷。瀏覽器在這方面處理得很好,但並不總是完美。視力不佳的使用者會感謝您的努力。
- 確保頁面完全可以透過鍵盤使用。某些醫療狀況使得使用滑鼠或觸控板變得困難,而且許多特殊的輔助軟體和硬體透過建立合成鍵盤事件來工作。要特別注意隱藏在頁面外的元素,因為它們會在焦點順序中保留,而沒有特殊的處理。
- 確保所有非文字元素都有適當的替代文字。(如果非文字項僅用於裝飾,則適當的替代文字為空字串。)
- 避免使用全大寫書寫。螢幕閱讀器將始終將全大寫讀取為縮寫,並逐個字母地拼讀(但 `text-transform: uppercase` 是可以的,它只會為語音增加強調)。
- 有許多工具可以幫助查詢可訪問性問題(下方列出了一些),但請記住,這些僅僅是 linter,並且靜態分析存在侷限性。它們有時會有誤報,也經常會有漏報。同時也要記住,它們檢查的是您執行工具時頁面所呈現的樣子。
有用的瀏覽器擴充套件
Firefox
- Fangs 是一個螢幕閱讀器模擬器。它一次性輸出螢幕閱讀器會播報的所有資訊作為帶註釋的文字,從而可以進行快速審查。
Chrome
Chrome 有一些非常實用的內建 a11y 工具,但您需要透過轉到開發者工具中的“設定”>“實驗”並勾選“可訪問性檢查”來啟用它們。
- Google 的可訪問性開發者工具 大部分已整合到 Chrome 開發者工具中,但仍有一些尚未包含的功能,例如訪問完整的可訪問性樹。
- aXe 一個不錯的靜態分析器。它是 Chrome 開發者工具中可訪問性審計的基礎,但此擴充套件包含更多資訊並執行更多測試。(也可用於 Firefox,但在 Chrome 中整合得更好)。
- ChromeVox 一個完整的瀏覽器內螢幕閱讀器。(您需要配置鍵盤快捷鍵,以便在不使用時能夠將其關閉,並且當不使用時您可能還需要完全停用該擴充套件,因為它即使在不活動時也可能會做一些煩人的事情)。
- High Contrast 此擴充套件由有特殊對比度需求的使用者使用。最好透過每個過濾器執行一個頁面(並測試任何懸停/焦點狀態),以確保所有內容仍然可見。
- Siteimprove Accessibility Checker 這是最好的靜態審計器。該擴充套件首次使用時會要求您註冊新聞通訊,但您不必註冊——只需跳過即可。
- Spectrum 模擬各種型別的色盲,以確保在患有特定疾病的使用者閱讀頁面時,頁面上沒有任何內容變得不可見或難以區分。(出於某種原因,這似乎在安裝後不能立即工作,但在幾次重試後會起作用)。
- Funkify 一個易於使用的殘障模擬器。
延伸閱讀
此內容是 Go Wiki 的一部分。