（圖片來源：Unsplash）

My idea of society is that while we are born equal, meaning that we have a right to equal opportunities, all have not the same capacity. - 甘地
（分享自回歸初心，一探Web Accessibility - Wendell Liu）

網站的訪問性是一個很有使命感的題目，隨著寫到後段，越寫越懂得前段的缺失。

這次主題是為了喚起大家對數位產品訪問性的重視，一個不熟的主題，當天吸收資訊，整理思考脈絡而產出文章，肯定細節有失，之後也會將這一系列文章整理到我的部落格「Askie's Coding Life」，歡迎大家之後在我的部落格提任何的 Issues 指正與建議還能更好的地方（任何文章都可以喔）。

以前我不懂，矇矇懂懂地，做得出來不就好了嗎？現在，隨著對訪問性的思考，更理解網頁工程師的本質，讓大眾都能公平使用我們創造的產品，跟追求效能、Clean Code 一樣重要。

今天的內文將包含以下內容：

TL;DR

• 最終複習
• 30 天以來，世界上的無障礙又更新了哪些重要訊息呢？
  • 法律相關
  • 數據
• 遺珠之憾
  • 主題：SVG
  • 主題：CSS Grid
  • 主題：JavaScript 的焦點管理
  • 主題：ＷebGL 之於網頁訪問性的挑戰
  • 輔助工具：NVDA 與 ChromeVox
  • 關心訪問性的數位產品
• 關於網站可訪問性的面試題目，拿來問問自己吧！
• 補充與感謝

最終複習

（圖片來源：deque）

開發時，請記住以下幾點：

• 如果頁面／視圖更新，請正確管理頁面標題
• 盡可能使用正確的語義 HTML
• 沒有語義 HTML，就要使用 ARIA 正確地標記內容
• 嘗試限制自定義 HTML 標籤的使用
• 當內容是非同步時，確保正確管理焦點
• 在編寫組件程式碼時，使用可訪問性測試工具（例如 axe）來測試您的內容是否存在可訪問性問題

30 天以來，世界上的無障礙又更新了哪些重要訊息呢？

法律相關

• 美國最高法院駁回了達美樂的訪問性訴訟案，看這裡：U.S. Supreme Court Favors Digital Accessibility in Domino’s Case。

數據

• WebAIM 在 2019 年 8 月 ~ 2019 年 9 月對於螢幕閱讀器進行了調查，包含了瀏覽器的使用數據與遇到的最大困擾等等，最新數據看這裡：Screen Reader User Survey #8 Results。

遺珠之憾

主題：SVG

文章資源：Creating Accessible SVGs

圖片的可訪問性，一直漏掉了 SVG 的部分，該文中整理了：為 SVG 補充語義的多元方式，並將其透過不同輔助裝置瀏覽會讀出的內容！到底哪些組合是訪問性最佳解呢？

主題：CSS Grid

文章資源：The Dark Side of the Grid (Part 1)

CSS Grid 網格佈局由於其靈活性而成為最近最令人興奮的 CSS 規範之一，它使我們的生活變得更加輕鬆，但同時也給使用者體驗和可訪問性帶來了新的危險，想了解的人來讀一下吧。

主題：JavaScript 的焦點管理

文章資源：Notes On Client-Rendered Accessibility

透過 aria-live 去管理即時更新的介面，透過 dataset，巧妙運用 data-focus-id 去管理焦點。

主題：ＷebGL 之於網頁訪問性的挑戰

文章資源：Handling common accessibility problems

文章只有提到了一句 WebGL，在講我們使用 WebGL 去建立盲人可訪問的遊戲未免太強人所難，但若可以實現支援鍵盤操作的話，就已大幅度的提升無障礙了。關於遊戲的訪問性可以看這篇文章：Accessibility at the W3C Workshop on Web Games。

輔助工具：NVDA 與 ChromeVox

• NVDA（全名為 NonVisual Desktop Access）

一款是用於 Microsoft Windows 作業系統的免費開源軟體，念出來的內容會和 VoiceOver 有點不同，如果有需要的朋友可以安裝看看。

• ChromeVox

一款免費的螢幕閱讀器，ChromeVox 已預裝在 Chromebook 上，是購買 Chromebook 的朋友可以使用的輔助功能。

關心訪問性的數位產品

文章資源：Accessibility Insights

這些都是有思考訪問性的數位產品，連電視都有？

關於無障礙的面試題目，拿來問問自己吧！

面試題目 repo：accessibility_interview_questions

題目一共分為三類別：通用（General）、技術（Technical）、設計（Design），透過這些題目，剛好可以拿來反思，自己對於網站訪問性的理解，遇到這些問題，自己的解答、處理方式會是？

補充與感謝

WAI-ARIA 角色關係圖

TeachAccess：

2015 年由 Adobe、Facebook、Google、HP、Intuit、LinkedIn、Microsoft、Paciello Group、Verizon Media（最初為 Yahoo）以及其他大學共同創立。

這是一個教開發者開發可訪問技術的網站，很簡短卻很有力，適合快速了解 Web Accessibility 技術的人，資源也提及 VoiceOver 該如何操作。

感謝好想工作室

耶～超級感謝好想工作室的全部夥伴，一起完成了挑戰！

• Howard 總是鼓勵我們使用部落格紀錄心得與生活，整理脈絡與經營自己是很重要的；
• Chris 手把手教我們使用 Hexo 建立部落格，還分享「通用設計」的概念，是因爲這個緣起，發現了自己視野的狹隘，想瞭解通用設計與網頁無障礙設計的差異；
• Ray 用最堅定的態度寫文章，也常常和我一起討論要怎麼能更好；
• Sarah 義不容辭地陪我拜訪台南無障礙的單位，她一直用她的方式愛這個世界；
• 翠霏一直用最溫暖的話語關心這段期間的挫折；
• 企鵝分享了胡立的 mentorship-program 引路人計畫，他也是我的引路人之一；
• Kai 建議我時間的分配方式，寫文的策略。

感謝 Huli

胡立！陪我調整了最一開始的文章大綱，最一開始對無障礙的整體概念很零散，支離破碎的關鍵字，加上亂七八糟的文章結構，後來他給了我實際的建議，還親自調整給我看（好有愛），看到什麼相關資源就會貼給我，幫助超級大啦，謝謝。

想知道獲取無障礙最新資訊可以訂閱哪些東西嗎？因為太有幫助了，之後再分享到我的部落格，歡迎踏踏！！！