【無障礙網頁祕技】介面設計大補丸
無障礙網站的廣義目的是希望對於所有身障者、所有大眾，能有一個好操作無虞的網路環境；身障者的障別分成很多，其中視障者還分全盲、弱視、色盲，所以並不是視障者等同於看不到。
因此網站設計也要顧及更多面向，想了解更多簡介可以觀看先前的【無障礙網頁祕技】基本介紹與分級。這篇我們會專注在「介面設計」上，希望不管是對於需要設計無障礙網頁的設計師、產品經理，或是單純對無障礙網頁有興趣的朋友，都能讓大家在設計上有所幫助💪🏻。
四項原則
以國外 WCAG (Web Content Accessibility Guidelines) 為參考基準，我們的國家通訊傳播委員會列出無障礙網站須具備的四項原則，表示一個好的無障礙網站需具備的條件與設計方向，以下為這四原則：
- 可感知 (Perceivable)：
網頁資訊的內容對於任何形式的操作都必須為容易感知的，例如：影片必須要具有字幕，以利聽障者能夠了解影片的資訊。 - 可操作 (Operable)：
在閱讀網站的方式必須多元化，例如：讓視障者能夠只用鍵盤就能順利操作網頁。 - 可理解 (Understandable)：
任何形式的資運內容都需簡單明瞭，假如有專有名詞等較為艱澀的詞彙，必須以其他容易理解的方式呈現，讓身心障礙者能輕鬆理解。 - 穩健性 (Robust)：
無論網站操作方式還是內容都必須具有長遠性，不會因為網頁繼續發展造成使用的困難。
而政府的所列出的各項無障礙網頁規範，也是依據以上四項原則架構出來的，當我們設計介面時必須把這四項原則放心上。
接下來，我們要再更進一步了解有哪些細節需要著墨，以下列出一些常見的注意事項：
1. 讓元件能輕易被點擊
可點擊的元件，包含按鈕或 icon，必須確保有一定的大小，不管是用電腦瀏覽、或是手機螢幕觸碰點擊，都能夠方便點選及辨識。
2. 精簡的按鈕字數
視障朋友操作時會用報讀軟體把介面上的文字報讀出來，當按鈕過長時不僅會讓聽的人恐慌，另外，也容易造成用雙眼閱讀的使用者負擔。在設計時盡量用最精練清楚的文字傳達意義。
3. 保持按鈕間的間距
可點擊的元件像是 icon、按鈕，建議彼此之間至少留 8px 的間距，除了能夠讓使用者不會誤點到錯的選項外，適當的間距也能讓使用者清楚分辨知它們是兩個不同的元件，而不是同一塊東西。
4. 適當的文字與背景對比度
如果文字跟背景的顏色太雷同，會增加閱讀難度，文字與文字後的背景至少有 4.5:1 的對比值。
推薦一個檢測對比值的工具(見下圖)，只要在頁面左邊的輸入框打上背景色碼，右邊輸入框打上文字色碼，就能計算出對比值。
如果是大尺寸文字，與後面的背景至少要有 3:1 的對比值＊大尺寸文字定義：
一般字尺寸大於24px
粗體字尺寸大於19px
（這裡的px是肉眼所見的尺寸，寫CSS時不可以用px唷，詳情可見前一篇文章）
要注意的是對比值也不能太高，有網路文章指出「過高的對比度會引起一些誦讀困難症患者的不適，他們會感覺文字在旋轉、模糊」。
補充：對應的政府規範可參照確認文字（及影像文字）與文字後面的背景間，至少有4.5:1的對比值、確認大尺寸文字（及影像文字）與文字後面的背景間，至少有3:1的對比值
5. 給予文字內容行高與段落間距
為求更舒適的閱讀，文字行高跟段落間距至少介於 1.5 至 2.0 倍之間，如果覺得太難記的話，目前無障礙網站最常套用的行高為 1.5 倍，可以記 1.5 這個數值（但仍要依設計的內容而定）。
補充：對應的政府規範可參照在CSS當中指定行距，且行距應介於1.5倍行高至2倍行高之間
6. 文字不能過小及過細
介面上的字級不能太小，一般內文建議使用的字級為16px，再小就會較難閱讀了，另外，有些字體雖然好看但字型本身特別細，就不適合套用在無障礙網頁。
7. 賦予元件強調樣式
無障礙網頁的使用者在使用電腦瀏覽時，有時後是只用鍵盤操作，所以任何可以點擊的元件，無論是Tab、按鈕、連結，在點擊時應該要有強調的樣式，才能知道自己是否有正確的選到該元件。
再來，也應該要讓使用者能知道自己現在所處的位置，這時候就可以在 Tab上用強調樣式輔助，或是在頁面上方套用麵包屑的設計。
8. 更友善的表單設計
現在有越來越多的輸入框設計，會直接省略輸入框的標頭，把提示資訊放在輸入框 Placeholder 中，例如上圖右方的「電話」、「電子郵件」就直接擺在 Placeholder 裡，一但在輸入框裡面打字，標頭資訊就不見了，造成填寫表單時容易迷失。
另外一點是，現在也有一些表單會設計成上圖右方一樣，沒有明顯的外框，假如今天是視力較不好的使用者操作，會看不清楚可輸入的範圍在哪，造成點選錯地方，所以最好像上圖左方，有一個明顯的外框圈住它。
9. 避免單靠顏色傳遞資訊
色盲或視障人士可能無法分辨顏色，除了用顏色，可用不同形狀、標記、或是文字提示顯示資訊。
再舉一個例子，我們在設計表單或是問卷時，會怎麼表示必填的選項呢？
這時候不要只改必填項目的文字顏色，我們可以做的是：在必填的項目旁加上*符號，例如「電話號碼*：」，並且加上「以下有*標記者為必填選項」的提示文字，就可以讓介面更友善。
10. 提供網站導覽頁
為了協助使用者能更快速上手，以及了解整體的架構，無障礙網頁會另外設計「網站導覽」頁，並包含以下兩部分：
- 快速鍵設定
- 網站地圖
1. 快速鍵設定：
舉故宮博物院網站為例（見下圖），主要會說明鍵盤快速鍵的操作，故宮比較特別的是還把網頁版面用圖像化方式呈現，可以清楚知道網站主要版面長怎樣。
2. 網站地圖：
一樣舉故宮博物院的例子，在導覽頁還會列出網站上所有功能與功能分類，不僅能夠清楚網站有哪些服務，也能更能掌握網站整體架構。
不同網站的導覽呈現方式稍有不同，
以下列出其他無障礙網頁的導覽頁，可作為設計上的參考。永豐銀行、華南金控、台北市立美術館、國家衛生研究院
補充：對應的政府規範可參照提供網站導覽、導覽工具或機制、搜尋功能、網頁清單鏈結等功能，協助使用者尋找內容
最後再來複習一下內容 🙌🏻
1. 讓元件能輕易被點擊
2. 精簡的按鈕字數
3. 保持按鈕間的間距
4. 適當的文字與背景對比度
5. 給予文字內容行高與段落間距
6. 文字不能過小及過細
7. 賦予元件強調樣式
8. 更友善的表單設計
9. 避免單靠顏色傳遞資訊
10. 提供網站導覽頁
結語
很謝謝你的觀看！這篇文章只列出一些常見的注意事項，完整的規範可至無障礙網路空間服務網查看。
我們可以發現有些設計建議不只能讓身心障礙者更方便，其實也是對大家都有利的（譬如：更精簡的文字、更容易點擊的元件），所以期許自己就算設計非無障礙的介面時，也要把這些建議放在心裡。而在設計前，我們還得依目標對象是誰，以及了解他們的需要再去做設計，例如：有研究指出黃色對於自閉症患者太刺激，所以如果我們介面是要給自閉症患者使用，就要特別注意這點。
了解如何設計無障礙網頁後，要怎麼檢測網頁是不是真的符合規範呢？在下一篇文章會介紹如何檢測，以及檢測軟體的操作方式。
最後，非常感謝看完這篇文章的你🙇🏻♀️，如果有任何想要交流，或有任何經驗想分享的，也非常歡迎唷！
【無障礙網頁祕技】系列文章
【無障礙網頁祕技】基本介紹與分級
【無障礙網頁祕技】前端切版前要注意什麼細節呢？
【無障礙網頁祕技】介面設計大補丸
【無障礙網頁祕技】檢測工具Freego操作方式 (即將推出✨)
謝謝您的閱讀：）
若您如果喜歡我的文章的話，歡迎按下「拍手」給我支持 👏👏👏30個拍手：還滿喜歡這篇文章的
30個以上的拍手：很喜歡這篇文章，或希望能多看到相關類型的分享也歡迎追蹤我的 Medium 或加 LinkedIn(連結請點我）
