Go Wiki:WebAccessibilityResourcesAndTips
無障礙或「a11y」是網頁開發中日益重要的主題。這對 Go 來說很重要,因為許多 Go 工具和資源都使用網頁技術,例如 godoc。確保這些工具具有無障礙性,可確保更多人可以使用它們,也讓更多人可以使用 Go。
無障礙是一個廣泛的主題,範圍從僅僅深奧到極其難懂。
不過,有許多簡單的經驗法則可以遵循,大幅降低意外建立無法存取的網頁機率
- 優先使用語意標記。原生 html 元素有許多內建的無障礙功能,無需開啟或關閉任何功能。如果您有一串清單,請使用
ul
或ol
,即使您不希望它顯示為清單。額外的 CSS 是值得的。 - 使用標題 (
h1
-h6
) 時,切勿跳過層級,並確保它們在邏輯上嵌套,例如,h4
是前一個h3
的邏輯子區段。螢幕閱讀器會將這些標題用作導覽地標,類似於目錄。 - 避免使用與文件原始順序相反的版面。使用彈性盒狀模型和格線重新排列元素非常容易,但這樣做時,焦點順序並不會改變。透過鍵盤瀏覽網站的人會看似隨機地從一個地方跳到另一個地方,這會讓他們很難了解正在發生什麼事。
- 確保足夠的色彩對比。並非每個人都有完美視力或高品質顯示器。這兩者都可能讓人難以分辨低對比度內容的開始和結束。 https://leaverou.github.io/contrast-ratio/
- 確保網頁在沒有色彩的情況下仍可使用。有許多種類的色覺缺陷。有些像紅綠色盲是常見的。其他則可能相當罕見。確保每個人都能獲得相同資訊的最佳方式,是將資訊編碼在形狀和色彩中。例如,如果您正在為測試執行器製作儀表板,請不要只使用綠色圓圈表示通過,紅色圓圈表示失敗:通過使用綠色勾號表示通過,紅色 X 表示失敗。
- 要有明確的滑鼠移入和焦點樣式,讓使用者知道某個元素「可按一下」。如同上述,即使沒有色彩,這也應該很清楚。
- 確保在將網頁縮放至 200% 時,不會有任何中斷。瀏覽器在處理這方面非常出色,但並非總是完美。視力不佳的使用者會感謝這項努力。
- 確保網頁完全可以用鍵盤使用。某些醫療狀況會讓使用者難以使用滑鼠或觸控板,而且許多特殊輔助軟體和硬體會透過建立合成按鍵事件來運作。對於隱藏在頁面外的元素要非常小心,因為它們會保留在焦點順序中,除非特別處理。
- 確保所有非文字元素都有適當的替代文字。(如果非文字項目純粹是裝飾性的,適當的替代文字是空字串。)
- 避免使用全大寫寫作。螢幕閱讀器會永遠將其讀成縮寫並拼出每個字母(不過,
text-transform: uppercase
很好,只會為語音增加重點)。 - 有許多工具可協助找出無障礙問題(下方列出一些),但請記住,這些只是程式碼檢查器,靜態分析有其限制。它們有時會有誤報,而且通常會有漏報。另外請記住,它們檢查的是您執行工具時網頁顯示的樣子。
有用的瀏覽器擴充功能
Firefox
- Fangs 是一個螢幕閱讀器模擬器。它會一次傾倒螢幕閱讀器會宣布的所有資訊作為註解文字,讓使用者可以非常快速地檢閱。
Chrome
Chrome 內建了一些相當有用的 a11y 工具,但您需要前往開發人員工具中的設定 > 實驗,並勾選「無障礙檢查」才能啟用這些工具。
- Google 的無障礙開發人員工具 大致整合在 Chrome 開發人員工具中,但仍有一些尚未包含的功能,例如存取完整的無障礙樹狀結構。
- aXe 優良的靜態分析器。它是 Chrome 開發人員工具中無障礙稽核的基礎,但這個擴充功能包含更多資訊,並執行更多測試。(也適用於 Firefox,但在 Chrome 中有更好的整合性)。
- ChromeVox 一個完整的瀏覽器內螢幕朗讀程式。(您需要設定鍵盤快速鍵,才能在不使用時關閉它,而且您可能還需要在不使用時完全停用這個擴充功能,因為它即使在不作用時也會做一些惱人的事情)。
- 高對比 這個擴充功能供有特殊對比需求的人使用。建議您使用每個濾鏡執行頁面(並測試任何游標移入/焦點狀態),以確保所有內容仍然可見。
- Siteimprove 無障礙檢查器 這是最好的靜態稽核程式。這個擴充功能會在您第一次使用時要求您註冊電子報,但您不必註冊,只要略過即可。
- Spectrum 模擬各種色盲,以確保頁面上的任何內容在有特定疾病的使用者閱讀時不會變得不可見或難以區分。(由於某些原因,這個擴充功能似乎在安裝後無法立即運作,但經過幾次重試後就會運作)。
- Funkify 一個易於使用的障礙模擬器。
延伸閱讀
- http://a11yproject.com/
- https://inclusive-components.design/
- https://accessibility.blog.gov.uk/
- https://www.youtube.com/playlist?list=PLNYkxOF6rcICWx0C9LVWWVqvHlYJyqw7g
此內容為 Go Wiki 的一部分。