原文 | https://betterprogramming.pub/10-ways-to-make-your-ui-designs-more-accessible-5544c1e8d663
原譯 | 小愛
UI（使用者界面）設計師的主要目标是為所有使用者創造良好的使用者體驗，無論其能力如何。當我們考慮到大約 2.85 億人有視力障礙、1.1 億至 1.9 億成年人有嚴重的行動不便以及全球 3.6 億人患有緻殘性聽力損失時，這一點就變得更加重要。
作為開發人員，你應該希望你的網站易于通路、易于浏覽、易于了解和可供所有人使用。網際網路的創始人蒂姆·伯納斯·李 (Tim Berners Lee) 也重申了這一點，他說：
“網絡的力量在于它的普遍性。無論是否殘疾，每個人都可以通路是一個重要方面。”
是以，這裡有10種方法可以幫助你的使用者界面設計更易于通路和更具包容性，并確定你為所有人設計。
1、使用顔色和對比度來差別
色彩是設計的主要方面之一。確定背景和前景之間有适當的對比，使用适當的陰影來區分，并突出重要資訊是使你的網站更易于通路的一些最簡單的方法。
畢竟，為色盲使用者或戴眼鏡的人設計與為沒有這些障礙的人設計一樣重要。
你可以使用工具 WebAIM 顔色對比度檢查器來實作平衡的顔色對比度。該工具允許你輸入特定的十六進制代碼或從色輪中進行選擇，然後進行增量調整以達到元素之間的 AA（最低對比度）或 AAA（增強對比度）對比度标準。
2、 使用清晰一緻的導航選項
- 在确定網站的可通路性時，導航設計也是最重要的元素設計之一。
- 確定網站内跨頁面的導航具有一緻的命名、樣式和定位。
- 為使用者提供站點搜尋或站點地圖。
- 通過提供方向提示（例如面包屑和清晰的标題）幫助使用者了解他們在網站或頁面上的位置。
3、不僅僅使用顔色來訓示狀态變化
雖然顔色對于傳達資訊很有用，但它不應該是傳達資訊的唯一方式。在使用顔色來區分元素時，請確定始終提供不依賴于顔色感覺的額外辨別，以使你的設計易于通路。
你可以通過以下方式執行此操作：
- 除了顔色之外，還使用星号來訓示所需的表單字段。
- 使用标簽來區分圖形上的區域。
- 添加說明文字。
4、為鍵盤使用者提供視覺焦點訓示
一些使用者使用 Tab 鍵在可聚焦元素（即連結、表單字段和已添加到帶有 HTML tabindex 屬性的 Tab 鍵順序的任何其他内容）之間跳轉。
但是，鍵盤使用者通常很難分辨他們在頁面上的位置。是以，設計人員必須始終提供清晰可見的訓示，訓示使用者目前所在頁面的哪個元素。
雖然網絡浏覽器确實有預設的焦點訓示器，但它們并不是那麼好。是以，修改 CSS 懸停是個好主意：對于可聚焦元素，例如連結、按鈕、表單字段、菜單項、小部件、月曆選擇器等。（可聚焦元素幾乎總是互動式的。）
一個有效的焦點名額：
- 有很好的對比度
- 具有與元素互補的形狀和大小
- 使用互補但引人注目的配色方案
- 動畫以幫助使用者跟蹤焦點移動
- 優雅降級（在舊浏覽器上可見）
- 跨浏覽器相同
5、提供圖檔/媒體選擇
您網頁上的所有媒體類型，無論是音頻、視訊還是圖像，都必須具有描述它們所代表的資訊或功能的文本替代項（除非圖像純粹是裝飾性的）。
開發人員最佳實踐
所有圖像都必須具有描述性的 alt 屬性：當圖像沒有 alt 文本時，提供空 alt 屬性而不是根本不使用 alt 屬性。這表明圖像對它沒有功能意義。
<img alt="" ... />
将 <fig> 和 <figcaption> 用于圖像組和更具表現力的标題。
從輔助技術中隐藏純粹的裝飾性圖像：沒有任何功能或資訊内容的圖像是裝飾性圖像。這些可以通過多種方式對螢幕閱讀器隐藏：
- 使用空 alt 屬性
- 使用 ARIA role="presentation"
- 使用 CSS 背景圖檔
6、設計可通路的表單
沒有人喜歡填寫令人困惑的輸入、不明确的預期格式、神秘的錯誤消息或缺乏鍵盤可通路性的表單。現在将此與障礙或殘疾配對，你将面臨令人沮喪的經曆。
為了確定你頁面的使用者不必經曆這些，在設計可通路的表單時，你必須牢記以下幾點。
- 所有輸入字段都應該有明确關聯的标簽。始終為此使用實際的标簽 HTML 元素，而不是簡單的 span 或 div 元素。
- 使用占位符文本讓使用者了解輸入的格式和性質。但是，切勿将其用作标簽的替代品，因為一旦使用者輸入某些資訊，占位符文本就會消失。
- 始終確定清楚地确定必填和可選字段。
- 驗證表單時，應盡快顯示錯誤消息，最好在用戶端顯示，而不是等到整個表單送出。錯誤消息應盡可能有意義和清晰。
- 鍵盤使用者應該可以通過 Tab 鍵通路表單的所有元素。Tab 鍵順序應該是連續的，并且應該對使用者有意義。
7、確定互動元素易于識别
為互動元素（例如連結和按鈕）提供不同的樣式，使其易于識别。例如，更改滑鼠懸停、鍵盤焦點和觸摸屏激活時連結的外觀。確定在整個網站中一緻地使用互動元素的樣式和命名。
8、用視覺層次組織内容
建立視覺層次結構涉及密切關注 UI 元素在你的網頁設計中的定位方式，并在這些相應元素之間建立連貫性以驅動意義。
- 不要擠滿你的螢幕，否則你最終會吓到使用者。
- 視力受損的人可能需要放大螢幕上的項目，是以請使你的内容具有可擴充性。
- 号召性用語按鈕應該清晰而獨特。
- 将重要資訊放在視線水準附近。
- 使用合适的标題将相關内容分組。
- 使用空格和鄰近度使内容之間的關系更加明顯。
9、進行使用者測試
即使在你盡最大努力使你的網站盡可能易于通路後，使用輔助技術的人可能會發現某些領域可能不像你預期的那樣友好。
識别和糾正此類問題區域的最佳和最有效的方法是通過使用者測試。在整個産品開發項目中進行非正式評估比在項目結束時進行正式的可用性測試更有效。
使用者測試有很多好處。至關重要的是，你将能夠了解設計的功能限制範圍，然後針對這些限制提供解決方案。
測試讓你有機會探索、調查和了解真實的人如何處理你的設計。
10、知道無障礙不是創新的障礙
建立無障礙設計最重要的部分之一在于知道它絕不是創新的障礙。設計限制不會讓你的産品變得乏味，而是讓你有新的想法去探索如何為你的所有使用者打造更好的産品。
像對待任何設計限制一樣接受可通路性指南。它們是為不同的閱聽人創造令人驚歎的産品的挑戰的一部分。