a11y

有點好奇當大家看到這個標題時,知道我今天想要說的是什麼嗎?假如你知道這是什麼,恭喜你,這篇的內容你大概已經有所知曉,假如你不知道什麼是 ally,沒關係,點個 read more ,讓我慢慢的告訴你。

在我解釋這是什麼之前,我來說一下為什麼我想要來寫這個。今年,我們公司發生了一件事,我之前一個project,被一位老太太告上 human rights committee,因為她沒辦法使用我們的線上系統,經過深入了解以後,這位老太太是位盲人,我想大部分的人一定會想,盲人用什麼網站,盲人連螢幕都看不見,他們能用電腦嗎?(話說,我三年前就是這種想法),但是事實是,盲人是可以用的,假如你網站做得好的話。

我們再回到所謂的a11y,現在大家有猜到這到底是什麼了嗎?這就是所謂accessibility的縮寫,我一直想找個很好的中文來解釋這個詞,不過我一直想不到一個很簡單的詞來表示這個英文的意義,PS4翻譯成『補助工具』,或許有點相近,但是『補助工具』只能算是一部分的 accessibility (不過這篇文章還是以補助工具為主)。話說為什麼叫 a11y,很簡單,就是 accessibility是一個『a』開頭,後面接了11個字母,再加上結尾『y』,大家一定在想,這算哪門子的縮寫,一點都沒辦法代表這個字的意思,嘿,不曉得大家在現實生活中,不知道有沒有遇過這種事,在開會時,常常有人就會說:『我們要先ABC,然後做 DEF,這樣才能GHI,老闆看到才會QWE。』,我記得我剛進我們公司時,每次開會最討厭就是這個,『拜託,能說點人話嗎?什麼是ABC,什麼是DEF,能先解釋一下嗎?』,這時候假如有個『補助工具』,能夠及時告訴你,ABC代表什麼,是不是能讓你了解開會的內容。大家現在有沒有發現 a11y這個詞取得很妙嗎?在那一瞬間,它讓你進入所謂的盲人領域,一個良好的補助工具是非常需要的。

話說,大家有沒有想過,『盲人是怎麼用網頁的?』,很簡單,用讀的,text to speech 的技術已經很成熟了,現世上有很多 screen reader 可以使用,windows上有 JAWS, NVDA,OS X自帶 Voice Over,盲人可以經過鍵盤的使用,讀出目前螢幕上所顯示的內容。不過對我們這種寫前台的,所謂的『鍵盤的使用』,可是關鍵中的關鍵,screen reader雖然會很努力的讀出螢幕上所看見的字,但是很不幸的,它不是萬能的,怎麼做才能讓screen reader更自然的讀網站,下面是我這幾年來的小小心得:

  1. Semantic 的寫html (templates):雖然近年來 javascript framework的流行,大家寫 javascript 寫得比 html還要多,但是大家不要忘記,javascript寫得再複雜,最後出現的也是 html,所謂的semantic就是用有意義的 tag來做其應該做的事,簡單的說,我想放一個按鈕在網頁上,我可以用button 也可以用 div ,都一樣可以做成按鈕,經過css修飾,一般人從螢幕上是看不出來任何區別,但是在screen reader上可不同,假如是 button,screen reader會讀成 按鈕,div 可不會讀出任何東西,對盲人來說,一個按鈕的提醒,可以告訴他們,這是可以按的,讓他們更能使用網頁上的功能。
  2. 任何縮寫符號都需要解釋:這個有點像我之前舉的例子,當你網頁上放上ABC時,記得要解釋ABC是什麼,screen reader沒有這麼聰明,他不懂什麼是縮寫,他只會盡量的把這個字念出來,最常見的就是金錢的單位,screen reader會把 USD, JPY唸成一個沒人聽得懂的字,對一個看得見的人,這些是很明顯的字,但是對盲人來說,經過screen reader『洗禮』,反而是更糟的體驗,這時,我們最常的做法,就是放上full text在裡面 (可以經過aria label 或是 hidden text),這樣screen reader就會念出全名(像 USD就會放 United State Dollars)。還有一種常見的就是,我們常常會用icon表示一些意象,最常見的就是 + – ,像是點+就會打開一些隱藏的選項,這些icon,screen reader也是辨別不出來的,這時,我們也都會放 hidden text 或是 title ,告訴screen reader這些icon 代表了什麼。
  3. 每家screen reader會對某種瀏覽器最佳化:有寫過網站的人都知道,cross browser相容簡直是寫前台程式的噩夢(我常常笑說,假如不支持IE,我們的project預算至少可以砍一半),假如加上screen reader,這簡直是噩夢中的噩夢。不過後來我們的做法就是,我們支持各家screen reader,但是對其最佳化的瀏覽器做測試,像是voice over支持 Safari,NVDA支持 Firefox,我們也就對其支持的分別測試(相信我,這樣已經非常困難了)。
  4. UE的設計才是關鍵:一般我們project的流程是這樣的,business analyst給出各種需求,User experience (就是我們常說介面設計)給出設計,我們照著設計和需求把他們想要的做出來,但是假如他們的設計不符合 accessibility的需求,我們怎麼做都無法達成,我講一個我最近才發生的例子,我們有一個頁面,根據UE的設計,有可能會出現兩個error messages在兩個不同的地方,但是根據accessibility的要求,當有error message時,我們得focus在那個message上,所以screen reader才會讀出來,現在問題來了,現在有兩個,到底那個才需要focus,而且這個UE也沒辦法決定,因為他們只管介面,不能決定哪個message的重要,大家可能無法想像,為了這個小小問題,我們好幾個部門開了好幾個禮拜的會,最後決定,我們把所有的message放在同一個地方,所以screen reader可以一次念出所有的messages。

說真的,有關accessibility,可以寫得東西實在太多(也可以看出來,我這幾年在這裡吃盡苦頭),我在這裡只是很簡易的說了一些常發生的問題,而且我只是用盲人當對象,其實accessibility包括所有用網站有障礙的人。雖然我不知道accessibility在台灣的重要性,但是在我們這,就像我一開始的例子,假如我們不限期改善的話,我們就是millions的罰款。

 

喜歡這篇文章嗎? 分享出去給作者一點鼓勵吧!