iT邦幫忙

第 11 屆 iT 邦幫忙鐵人賽

DAY 30
2

(圖片來源: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 的焦點管理
    • 主題:WebGL 之於網頁訪問性的挑戰
    • 輔助工具:NVDA 與 ChromeVox
    • 關心訪問性的數位產品
  • 關於網站可訪問性的面試題目,拿來問問自己吧!
  • 補充與感謝

最終複習

(圖片來源:deque

開發時,請記住以下幾點:

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

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

法律相關

數據

  • 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 去管理焦點。

主題:WebGL 之於網頁訪問性的挑戰

文章資源:Handling common accessibility problems

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

輔助工具:NVDA 與 ChromeVox

  • NVDA(全名為 NonVisual Desktop Access)

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

一款免費的螢幕閱讀器,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

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

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


上一篇
真實世界:使用 Android 輔助功能 TalkBack 來瀏覽行動版網頁
系列文
實踐無障礙網頁設計(Web Accessibility)30
0
Dez
iT邦新手 5 級 ‧ 2019-10-15 20:17:27

恭喜完賽!這主題真的很棒,改天也要來拜讀這個系列 /images/emoticon/emoticon42.gif

謝謝 Dez!你的記帳程式也很精彩~恭喜你也完賽~

0
Chris
iT邦新手 5 級 ‧ 2019-10-15 21:13:50

恭喜你!!! 這系列真的很有愛,鐵人寫到親自察無障礙的單位,也真的超強。

這都是因爲受到於 Chris 的啟發!謝謝 Chris

0
JinWen
iT邦新手 5 級 ‧ 2019-10-15 21:29:47

恭喜完賽,很棒的主題,部落格拜讀過幾篇覺得親切好懂,謝謝你的分享,之後一定要好好讀這個系列~

一起完賽好開心 ^_^b

0
RURU Tseng
iT邦新手 5 級 ‧ 2019-10-15 21:51:40

恭喜完賽~~~~~感謝 Askie 的佛心分享,之後絕對要找時間好好拜讀

RU 大師,CSS Spec 整理出來才超佛...... ^_^b

0
letter liu
iT邦新手 5 級 ‧ 2019-10-15 22:30:36

真的滿滿的愛!! 超棒。

/images/emoticon/emoticon24.gif

0
yachen
iT邦新手 5 級 ‧ 2019-10-15 22:52:26

這系列真的大推!!恭喜完賽!!
以後看不到冨樫了(誤)

欸欸欸欸欸怎麼這樣 >____<

0
Titangene
iT邦新手 5 級 ‧ 2019-10-15 23:16:19

恭喜完賽!之後一定要來拜讀!

/images/emoticon/emoticon07.gif

哈哈哈哈哈好啊,一起來互讀

0
Penghua
iT邦新手 5 級 ‧ 2019-10-16 09:42:12

恭喜完賽~~/images/emoticon/emoticon01.gif

謝謝鵬/images/emoticon/emoticon07.gif

0
tsuifei
iT邦新手 5 級 ‧ 2019-10-16 11:50:12

無疑 這是最有愛的鐵人賽系列! 謝謝你的用心與努力,要存下來細細讀!
感謝 Askie 你一直是我認為的勇敢女子!

喔不翠霏,就說妳是暖暖的人,謝謝妳

0
huli
iT邦新手 5 級 ‧ 2019-10-16 17:30:17

恭喜完賽~這主題真的很棒

謝謝立哥!!!!!!!!

0
Howard
iT邦新手 5 級 ‧ 2019-10-16 21:52:25

賀完賽/images/emoticon/emoticon64.gif

謝謝我大 Howard

0
ShawnL
iT邦新手 5 級 ‧ 2019-10-17 10:03:49

恭喜完賽 /images/emoticon/emoticon62.gif

哇,謝謝大大,秒追「小白也能輕鬆瞭解的 Vue.js 與 D3.js 」,你寫超過 30 天耶,好讚!

0
Charles Wang
iT邦新手 5 級 ‧ 2019-10-18 09:51:49

恭喜完賽
沒想過還能從這角度切入網站設計
而且從規範、規劃到設計、實踐要注意的地方都點出來了
感謝系列好文

感謝,表示你真的有看過耶,超感人,謝謝你!!

我要留言

立即登入留言