（圖片來源：Inclusive Design - Microsoft）

設計雖不是我的專業，不過網站的製作可不是僅靠工程師的力量而已啊啊，所以也將找到的相關資源稍微整理一下。

講到設計應該可以拜讀一下 Google Material Design 針對無障礙的設計實踐，有很好的圖像說明，蠻完整的。

目前有很多公司針對自己的網站或是軟體提供可訪問性指南，更多是一開始便以通用設計 Universal Design、包容性設計 Inclusive Design 來作為產品設計的出發點。

• 無障礙一定會知道的組織：The Paciello Group
• Google
• Apple
• Mozilla
• Microsoft
• IBM
• Opera
• Adobe
• Facebook

... 等等。

可讀性

資訊的設計

在做資訊（甚至不止於資訊領域）設計時，需要預先思考其前提。—— Bobby Tung

指示性的超連結 （WCAG2.1 - 2.4.4: Link Purpose (In Context)）

• 連結文字以有意義的文字為主，如以「前往購票」取代「進入頁面」、以「閱讀書籍簡介」取代「更多介紹」。

彈性的設計

「當使用者將螢幕或字型放大時，是否仍保有良好的閱讀性？ 」

「關鍵的元素是否消失？」

「功能是否可正常使用？在畫面上會不會重疊？」

—— 參考至卡斯伯翻譯的 Google Material Design 正體中文版

• 文字的大小：
  • 看卡斯伯的鐵人：你的網頁文字是否足夠清楚呢？，我第一次知道開發者工具可以這樣選色！！！
  • 設計師要知道：標題 18px 以上，內文 16px 以上。
  • 工程師要知道：字級大不代表標題級別大，如 CSS 設定 font-size: 18px 不等於它的 HTML 標籤就一定該是 <h2> ，而是要以資訊重要程度來安排 HTML 結構；並且裝置開放螢幕可縮放，文字要可以放大至 200% 還可以正常閱讀。

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

導航的一致性（WCAG 2.1 - 3.2.3: Consistent Navigation）

導航以相同的順序出現在網站的每一頁，幫助認知障礙及視力低下的使用者，更容易預測。

替代文字的設計

• 圖片的替代文字，或是說明文字都要以符合上下文為主，可以練習看看，用講的整個頁面的內容，講到圖片時，你會如何介紹呢？

顏色的無障礙

顏色對比度 AA級（WCAG2.1 - 1.4.1: Use of Color）

• 根據字的級距 [W3C]
  • 3：1 標題 18pt 以上 或是 14pt 的粗體（CSS 1pt = 1.333px，因此 14pt 和 18pt 大約等於 18.5px 和 24px）。
  • 4.5：1 一般內文。
• 提供幾個顏色工具：colorsafe、colorable、contrast-ratio。

不要使用顏色作為唯一傳遞重要訊息的方法

（圖片來源：We are colorblind）

那麼可以怎麼做呢？

• 以形狀代替顏色識別
• 在色彩上面加上文字說明
• 透過字體大小、粗體、斜體等區分訊息的重要程度
• 為色彩加入材質，像是 trello

可操作性

• 元素的被點擊面積至少 48x48 px
• 元素之間的距離 8 dp

為狀態設計

• 按鈕點擊的狀態，也分為點擊前、點擊時、點擊後、以及「成為焦點時（focus）」的狀態。
• 使用 ARIA 對狀態進行樣式化：將在 ARIA 狀態與元素外觀之間同時建立邏輯關係和語義關係、縮減額外程式碼。

    /* 工程師，你可以這樣做 */
    .toggle[aria-pressed="true"] { ... }

其他議題：為焦慮設計（參考文章）

• 為焦慮症和恐慌症患者思考，少一點黑暗模式...。
• 不要給使用者限時的完成任務。
• WCAG 沒有太多針對焦慮的原則，不過現在正在努力規劃中。

其實文章內文對於規範的連結沒有完善，請各位設計師，或是想了解如何做出更多人使用的工程師，看看這兩篇文章：Designing for accessibility is not that hard、Accessibility guidelines for UX Designers。

如果你現在也開始重視起所有人從網頁上獲得資訊的權利，那麼吸收完概念起，不要覺得可怕，就從你已經知道的技術開始下手就好，我們也不是天才，每個閱讀文章的人，就從現在開始，一天一天改善網站的可訪問性吧！

（圖片來源：Hsiaoming Yang）

Reference

• 成為一流的前端工程師：打造專業的 UX 網站 - 彭其捷
• Google Material Design 正體中文版 - 卡斯伯
• We are colorblind
• WCAG21 - W3C
• 可訪問的樣式 - Google Developers
• 不被重視的 HTML：Accessibility - Hsiaoming Yang