無障礙網頁有多麻煩？
過去經歷過幾次製作無障礙網頁，都是各種改到崩潰的體驗，有做過大概都知道「FreeGo」這款討人厭的軟體，萬一資料庫龐大真的會跑到你想殺人⋯⋯
無障礙要求的，多半是網頁基本功
從基礎來說，其實無障礙要你做的東西很多是網頁的基本功，比如說 alt, title⋯這些東西。但以一個更深的層次來說，無障礙是要建立更好的網頁瀏覽體驗，而體驗這件事除了一般的操作用戶外，也包含著視障人士、鍵盤使用者、爬蟲各種你意想不到的使用者，他們瀏覽網頁時的操作習慣更是你遠遠想不到的。雖然在 UI Design 的階段，你不一定 Persona 會考量並且做到這些人，但是你無形中直接放棄了這些 TA。
FreeGo 和 CNN 檢測過了，不代表真的能用
或許你可能認為，「我們的網站 FreeGo 和 CNN 無障礙檢測都過了啊？」
這件事恐怕沒有這麼簡單⋯⋯
對於 CNN 來說，他們也不一定是盲胞或是爬蟲專業的人在人工檢測，程式測更是許多看不見的盲區無法辨讀，這些問題都潛藏在其中。開發出來的產品一旦到了真正的使用者手中發現其實根本不好用，而這些人普遍又不太會去反應或是無法反饋，最後也只能放棄這些使用者。
做無障礙電子書時，注意到的八個細節
前些陣子參與了無障礙電子書這樣的專案，要製作一個給盲胞閱讀的電子書專案，我發現其實無障礙要注意的細節遠比想像的多，我覺得可以分享一些細節。
- 對於盲胞來說，文字比圖片更友善，減少用圖片來傳遞關鍵訊息，多利用文字或語意結構來傳達。
- Markdown 是好物，可以用文字的方式表述及其複雜的資訊，舉凡數學符號和文章結構。
- 表格並不是很好的閱讀工具，它是比較視覺化的處理，但內容複雜時，表格仍然會造成開發和閱讀者的困擾。（會造成開發困擾是因為你得宣告表格的報讀規則，否則報讀機很笨，不會理解你的表格閱讀方式）
- H1~H6 的結構化和語意化很重要，盲胞的工具可以快速跳轉每一塊結構的閱讀，對於他們來說，一個 h標籤屬於一個段落，適當定義斷落點有助於閱讀。以及Header、Footer、Aside 的分配也是有意義的，在對應的標籤定義無障礙的錨點，對於工具型的網站更加重要。
- 網頁鍵盤互動中在主流網站最容易被忽略的就是網頁閱讀的鍵盤行為，特別是元件相關的互動，時常會被忽視，時常只考慮視覺和滑鼠的部分。但電腦操作者來說，很多有包含到鍵盤慣用者、肢體障礙朋友、無滑鼠環境等等特殊的場景。這時網頁的移動仰賴 tab, shift+tab, 方向⋯等等操作，這是網站的結構化就起了很大的作用。
- 減少阻斷性的互動行為。比方說大面積的版位改動或互動上的大跳動，盡量仰賴原生html 提供的互動邏輯，這樣瀏覽器會幫助你做引導。如果喜歡自定義客製化的彈窗、下拉選單、日期選單等等，工程師使用的套件不見得會幫你定義互動邏輯，一定要做過全盤的評估和驗證，否則多使用原生的功能（我知道原生很醜，所以你知道為什麼有做無障礙的網頁通常長的特別醜了吧？）
- Focus 是很重要的行為，代表使用者關注的項目，通常在無障礙網頁會用 outline 的手法去強調，這是對於弱視同胞和色盲同胞的友善。或許你會覺得盲胞受眾不多，然而弱視和色盲恐怕比你想像的多上非常多，特別是紅綠色盲和藍綠色盲，這時 Focus 的顏色搭配組合就格外重要了。
- 在現在UI 當道年代，你知道對無障礙做的最好的是誰嗎？不是 Material 也不是 Ant，答案是是歷史悠久的 Bootstrap 。很多人嫌棄它，它實在不比其他網頁 UI 來得漂亮，然而它可以說是在無障礙中做的最為完善的。
當然，我分享遠遠只是冰山一角，而這些經驗都將化為寶貴的養分。你曾經參與製作過無障礙網站嗎？有什麼有趣或崩潰的經歷可以分享留言一下XD