方格精選

讓任何人,在任何時間,任何地點都能成為一份子:無障礙網站,與科技產品

更新於 發佈於 閱讀時間約 10 分鐘
我們同期進公司的人之中,有一個聽覺障礙者的女孩,是個進巨粉。我們現在的新人研修改為全線上聽講,人事在為了能夠順利讓她參加研修,採用了許多工具,其中一個是AI的自動文字化的服務。只要講者對著其講話就會自動生成文字內容。精確程度蠻高的,但是仍然還有許多地方會識別成奇怪的文字,需要手動修改。而且可能是現在還沒有很完善,所以講者只有在開著該服務的網頁才能被識別,導致許多使用簡報檔的講者無法自己操作簡報,需要兩個人協力來完成授課。
「哇,為了一個聽覺障礙者我們公司真的花了很多功夫耶!」記得這是我最初的想法。
直到後來,我才理解到我這個想法是多麼的無知。


raw-image

聽到無障礙,你第一個反應是什麼?
是地鐵站裡面的導盲磚?還是輪椅?是博愛座?還是殘障廁所?
對於上述的物理上的無障礙空間,我們似乎都略有耳聞,也時常在生活中看到。我們時常把無障礙跟身心上的機能衰弱連結在一起,認為這些設施是為了社會弱勢群體所設計的。
那麼網站(或是廣泛上地說,科技產品上的)無障礙又是怎麼一回事呢?


從一個搖桿和按鈕到⋯⋯很多搖桿和按鈕



raw-image

這是atari公司在1977年推出的遊戲控制器。只有一個按鈕和一根搖桿。
再舉一個大家更廣為熟知的例子:任天堂。從1983年到2017年的三十年間,遊戲搖桿發生了明顯的變化:不是只有顏色變多了,更是變得更多按鈕又更複雜了。


raw-image


raw-image

你說:「這樣不是能夠操縱更精細的遊戲內容了嗎?塞爾達傳說曠野之息用1983年那個版本能玩嗎?這樣不好嗎?」
確實可能不行。但是搖桿變得更重,更大,更複雜的操縱介面意味著對於某些無法順利使用雙手操作的人來說,變得越來越難以遊戲了。這些搖桿是虛擬世界的入口,在這些世界裡面,玩家可以做在現實世界中做不了的英雄,可以與原本無法成為朋友的人一起探險。然而,對於某些人來說,這樣的世界會因為操作介面的不友善而只能成為遊戲的旁觀者。
這也許可以成為我們開始探討無障礙的一個引子。


什麼是無障礙網站?

引用另一篇medium上面作者的定義:

什麼是無障礙網頁:無障礙網頁主要是要讓「視覺障礙者」或「聽覺障礙者」可以使用其他替代方式獲得網頁的資訊內容,


用科技產品來舉一個大家可能比較熟悉的例子,最近很紅的podcast。
一般人(至少我)可能在享受聲音經濟起飛的紅利之餘沒有想到過,聽覺障礙者是很難參與這個新流行起來的媒體的。


另外像是我自己很常誤觸iphone,至今不知道是哪個鍵,會突然地把畫面上的內容唸出來。即便不是在大庭廣眾之下仍然常常讓我嚇一跳,甚至有時還感到非常不悅。但是對於很多視覺障礙者來說,這並不僅是一個機能,而是他們與這個網路世界交流的唯一管道。

對於某些人來說,某些事情得越過重重困難才能做到。他們得花上比別人高出數倍的學習成本,或是自己去找一些替代方法來彌補之間的鴻溝。而他們想要做到的,僅僅是這些我們日常生活中覺得理所當然在使用的服務或是機能。

一個好的無障礙網站或服務,應該能夠做到什麼呢?
延續上面的兩個例子,例如當我們在製作podcast的時候,可以把文稿放在能夠觸及的地方供需要的人點擊,或是使用可以有自動生成字幕的工具。
而視覺障礙者在使用的螢幕閱讀機,並不是理所當然就能閱讀網頁或內容,更別提操作互動了。

現在我們大家所習慣使用的滑鼠操作,其實是一種GUI式的介面設計,簡單來說就是使用者看到螢幕上的圖標,藉由與之互動來操作電腦。但是包括許多工程師或是擅長使用電腦的人應該都知道,僅使用鍵盤來操作電腦是可行的(不如說,純用鍵盤操作可能比較像是以前使用電腦的方法。輸入指令,電腦執行。)

假設我們隨便打開一個網頁,網頁有標題,內文,複雜一點的可能會有需要輸入的內容。如果只是按照大家想像的全部一股腦念出來,我想應該既浪費時間,又不知道這些攪在一起的資訊想表達什麼吧?

所以網站設計者可以在設計(編程)的時候加入一些元素,例如html中的標題用heading來命名區分,這樣視障者在操作時就可以使用鍵盤快捷鍵來快速找到網頁的標題,從而更有效率地操作。

或是當有插入圖像時,可以簡短一行來說明這個圖像想要表示什麼,不然即便使用螢幕閱讀機,它也只會傻傻地唸出「圖片」之類的而已。如果這是一個你想表達的關鍵訊息,那就有人接收不到了。
推特插入圖片的時候也有可以編輯「圖片內容」的區域,有玩推特的人下次不妨試試看!


raw-image


可能僅僅是加上這樣一小行字就能讓你的內容被更多人理解。


「所以,無障礙是為了少數人設計的?」


你看到這裡會說:「啊,我懂了!我知道這些功能對於障礙者來說很重要了!所以無障礙就是為了少數人的使用對吧?」
大錯特錯。

我們先回到日常生活中的無障礙空間吧!想像你走在台北街頭想要搭捷運。捷運的入口未必有斜坡,像現在眼前這個,但你也不以為意ーー不過就是五階台階嘛,是連心率都不會上升的程度。

然後,你再試著想像當你想要搭捷運出國一個月,拖著三十公斤行李爬台階的樣子。
這就是為什麼我一開始想要引入那篇medium文章的定義。我不認為無障礙是為了少數人(甚至只是特定功能的障礙者)所設計的。儘管那也很重要,但絕對不是全部。
每個人,在人生的某個階段,或多或少,或長期或短期,或偶然或必然,都會需要經歷需要使用無障礙功能的時刻。

短期或偶然如生病或受傷,長期或必然如變老。

甚至並不只是我們身體上的變化,而僅是外在環境的變化。上面說的提行李是一個例子,又或者是出國在人生地不熟的地方,又或是在荒郊野外連不上網。
在有些時候,我們過去或平常視為理所當然能夠使用的東西,會突然變得遙不可及。你只是想要找間公共廁所,卻看不懂任何一個異國文字的標語;當你急於在高山上的農場傳送重要表單,卻因為網站特效設計得太過精巧而無法順利載入。
每個人,在人生的某個階段,或多或少,或長期或短期,或偶然或必然,都會成為障礙者。


我的「障礙者」經驗


我們同期進公司的人之中,有一個聽覺障礙者的女孩,是個進巨粉,結局出的前一個晚上直接關閉推特以免被劇透。因為我們現在的新人研修改為全線上聽講,所以人事在為了能夠順利讓她參加研修,採用了許多工具:其中一個是AI的自動文字化的服務,只要講者對著其講話就會自動生成文字內容。精確程度蠻高的,但是仍然還有許多地方會識別成奇怪的文字,需要手動修改。而且可能是現在還沒有很完善,所以講者只有在開著該服務的網頁才能被識別,導致許多使用簡報檔的講者無法自己操作簡報,需要兩個人協力來完成授課。

「哇,為了一個聽覺障礙者我們公司真的花了很多功夫耶!」記得這是我最初的想法。

直到我們設計團隊主導無障礙小組的小組長來給我們講課,我才理解到我這個想法是多麼的無知。

他提到了我們使用這個服務,其實並不只是為了「一個聽覺障礙者」所使用的。我這才驚覺,作為外國人的自己偶爾因為恍神或是單純語言不通時,也會登入上這個服務來查看文字內容,不懂的單字還能直接用文字查看與紀錄。
同期的大家也紛紛提供自己的經驗:即便作為母語者,例如有時候網路突然斷線,或者是想要把剛剛講者的話抄錄成筆記,抑或者只是單純恍神的時候,這個服務都幫了他們很大的忙。

我這時是第一次領略到了什麼叫做「這是一種為所有人做的設計」。我作為一個在日外國人,其實在某種意義上也是「障礙者」,並沒法跟母語者的同事一樣不用思考就能表現出想說的話,或是完全理解對方話語裡的意圖。那一種即便你想要參與某個群體,或者只是想要跟別人一樣好好完成分內的工作,卻因為自己的能力而無法做到的感覺,至今還是深深影響我。

我們今天當然可以把這些歸咎於個人。沒辦法,你自己選擇去國外的,比在自己的國家多吃點苦也是理所應當的。但是我們能夠對障礙者說,這個人沒辦法,天生就是得多花點精力,多吃點苦才能夠做到一般人輕鬆做到的事嗎?或更甚者,你能對著未來的自己說,沒辦法,你會變老就是活該,活該爬不動梯子,看不了太小的字嗎?
其實我並不喜歡無障礙這個翻譯,「障礙」這個說法總讓人聯想到障礙者。不論是accessibility或是inclusive design,我都喜歡這些英文字裡面包含的原意:讓所有人都能夠使用,讓所有人都能成為群體的一份子。

當然,螢幕閱讀器也好,聲音識別也罷,都是無障礙網站的一個重要的機能指標,但是這並不能完全概括無障礙網站的功能與精神。
我覺得更好的解釋是:「期許任何人,在任何時候,在任何地點,都能順利的使用這個產品,服務或網站。」
我覺得這比做出一個漂亮的視覺重要,也有挑戰的許多。

今天這篇文章只是寫出來讓自己感動的(誤)
今天這篇文章大約整理近期自己對accessibility的一些認識刷新與感想,之後希望能夠產出一些更細節的內容(具體來說,要怎麼做到無障礙?包括方法論與一些實際的案例等等)
感覺寫著中文都有種被日文影響句法構成的感覺⋯⋯



留言
avatar-img
留言分享你的想法!
avatar-img
山姆的沙龍
25會員
18內容數
分享一些在日本做UX或是產品設計的事。在科技公司的雜草堆角落做田野調查。現學現賣專家。 關注人的心理健康,認知心理學。希望能夠用設計的力量讓世界更好。 使用者設計/無障礙設計/包容性設計/Mental wellbeing/Vulnerability
山姆的沙龍的其他內容
2021/10/07
包容與排除並不存在先天的好與壞 但是在一個憲法中明文規定平等權利與機會的社會,在達成實質平等的目標之前存在的障礙是每個人必須面對的問題 我作為個體與一名設計師,包容性設計是一種對於平等與反對歧視的追求 消極意義上,我不希望因為自己無意識的偏見,進而使自己設計出來的產品或是解決方案有無意識的排他或歧視
Thumbnail
2021/10/07
包容與排除並不存在先天的好與壞 但是在一個憲法中明文規定平等權利與機會的社會,在達成實質平等的目標之前存在的障礙是每個人必須面對的問題 我作為個體與一名設計師,包容性設計是一種對於平等與反對歧視的追求 消極意義上,我不希望因為自己無意識的偏見,進而使自己設計出來的產品或是解決方案有無意識的排他或歧視
Thumbnail
2021/09/20
規則無處不在地存在在我們的日常生活中,從每天微小的買東西、坐車,到工作中與人合作,直至人生大事中的婚姻。人們每天遵循著不管是如法律一樣的明文規則,或是因為人際關係、文化或是歷史形成的潛規則,這些規則是怎麼形成的?有沒有其他的可能性?這次主策展人之一的水野祐,作為律師的他試圖從設計的角度去重新觀察與思
Thumbnail
2021/09/20
規則無處不在地存在在我們的日常生活中,從每天微小的買東西、坐車,到工作中與人合作,直至人生大事中的婚姻。人們每天遵循著不管是如法律一樣的明文規則,或是因為人際關係、文化或是歷史形成的潛規則,這些規則是怎麼形成的?有沒有其他的可能性?這次主策展人之一的水野祐,作為律師的他試圖從設計的角度去重新觀察與思
Thumbnail
2021/09/18
我們並不先天擅長與我們不同的人相處 「排外」也許只是一種我們不知道怎麼與不同的人相處所產生的反應 因為有作為族群少數的經驗,使我更容易對被長期排除在社會之外的人產生共情,進而想要在鑽研這個領域
Thumbnail
2021/09/18
我們並不先天擅長與我們不同的人相處 「排外」也許只是一種我們不知道怎麼與不同的人相處所產生的反應 因為有作為族群少數的經驗,使我更容易對被長期排除在社會之外的人產生共情,進而想要在鑽研這個領域
Thumbnail
看更多
你可能也想看
Thumbnail
2025 vocus 推出最受矚目的活動之一——《開箱你的美好生活》,我們跟著創作者一起「開箱」各種故事、景點、餐廳、超值好物⋯⋯甚至那些讓人會心一笑的生活小廢物;這次活動不僅送出了許多獎勵,也反映了「內容有價」——創作不只是分享、紀錄,也能用各種不同形式變現、帶來實際收入。
Thumbnail
2025 vocus 推出最受矚目的活動之一——《開箱你的美好生活》,我們跟著創作者一起「開箱」各種故事、景點、餐廳、超值好物⋯⋯甚至那些讓人會心一笑的生活小廢物;這次活動不僅送出了許多獎勵,也反映了「內容有價」——創作不只是分享、紀錄,也能用各種不同形式變現、帶來實際收入。
Thumbnail
嗨!歡迎來到 vocus vocus 方格子是台灣最大的內容創作與知識變現平台,並且計畫持續拓展東南亞等等國際市場。我們致力於打造讓創作者能夠自由發表、累積影響力並獲得實質收益的創作生態圈!「創作至上」是我們的核心價值,我們致力於透過平台功能與服務,賦予創作者更多的可能。 vocus 平台匯聚了
Thumbnail
嗨!歡迎來到 vocus vocus 方格子是台灣最大的內容創作與知識變現平台,並且計畫持續拓展東南亞等等國際市場。我們致力於打造讓創作者能夠自由發表、累積影響力並獲得實質收益的創作生態圈!「創作至上」是我們的核心價值,我們致力於透過平台功能與服務,賦予創作者更多的可能。 vocus 平台匯聚了
Thumbnail
近期,Neuralink於其官方網站發布了首位Neuralink受試者安裝腦機介面後的100日使用報告。該受試者是一個四肢癱瘓患者,在手術前僅能使用面部肌肉或嘴巴來咬著控制筆來觸控電腦表面,這種生活長達八年。因此在手術後,使用了腦機介面後,已經大幅改善生活情況。本文摘錄報告重點。 該受試
Thumbnail
近期,Neuralink於其官方網站發布了首位Neuralink受試者安裝腦機介面後的100日使用報告。該受試者是一個四肢癱瘓患者,在手術前僅能使用面部肌肉或嘴巴來咬著控制筆來觸控電腦表面,這種生活長達八年。因此在手術後,使用了腦機介面後,已經大幅改善生活情況。本文摘錄報告重點。 該受試
Thumbnail
口述影像(Audio Description, AD)是透過口述影像協助視障人士理解視覺內容的技術,並且是體驗文化來重新修正框架認知的重要管道
Thumbnail
口述影像(Audio Description, AD)是透過口述影像協助視障人士理解視覺內容的技術,並且是體驗文化來重新修正框架認知的重要管道
Thumbnail
ADA,對於3C產品愛用者的你們、各位,應該是一個比較陌生的名詞,在筆記型電腦、桌上型電台、手機、Tablet、Server、...等等的產業別來說,似乎不會ADA的規範所限制,但是Wall mount 的觸控Panel PC、Kiosk,例如點餐機、停車場收銀機、票券販賣機....等等的Kiosk
Thumbnail
ADA,對於3C產品愛用者的你們、各位,應該是一個比較陌生的名詞,在筆記型電腦、桌上型電台、手機、Tablet、Server、...等等的產業別來說,似乎不會ADA的規範所限制,但是Wall mount 的觸控Panel PC、Kiosk,例如點餐機、停車場收銀機、票券販賣機....等等的Kiosk
Thumbnail
以有限聽覺與口語方式與外界互動、從小沒有學過手語的聽障者,手語翻譯可以說完全派不上用場,他們需要的是即時文字的提供、聽覺輔助系統例如藍芽傳輸等,甚至需要搭配清楚可辨的唇形來讓他們能更完整、充分的了解到現在,誰說了些什麼。
Thumbnail
以有限聽覺與口語方式與外界互動、從小沒有學過手語的聽障者,手語翻譯可以說完全派不上用場,他們需要的是即時文字的提供、聽覺輔助系統例如藍芽傳輸等,甚至需要搭配清楚可辨的唇形來讓他們能更完整、充分的了解到現在,誰說了些什麼。
Thumbnail
為所有人打造產品:無障礙Accessibility是什麼? 你有想過你日常習以為常使用的產品與服務,舉凡金融、醫療、交通、教育等領域,世界上有另一群人無法使用嗎?在網路開始變成了新的基礎設施,提供許多人前所未有的便利時,有一群人仍然被排除在這樣的浪潮之外。
Thumbnail
為所有人打造產品:無障礙Accessibility是什麼? 你有想過你日常習以為常使用的產品與服務,舉凡金融、醫療、交通、教育等領域,世界上有另一群人無法使用嗎?在網路開始變成了新的基礎設施,提供許多人前所未有的便利時,有一群人仍然被排除在這樣的浪潮之外。
Thumbnail
"無障礙" 主要是形容一些建築物或一些讓公眾使用的地方﹐是否設有方便身體有殘障的人士使用的設施。例如: 輪椅使用者的斜坡、失明人士的導盲徑...等等。除此之外﹐在虛擬的互聯網世界裡同樣有 "無障礙" 的概念。 當我們製作網頁時﹐加入以下的技巧﹐網頁就能夠方便視障、聽障人士使用:
Thumbnail
"無障礙" 主要是形容一些建築物或一些讓公眾使用的地方﹐是否設有方便身體有殘障的人士使用的設施。例如: 輪椅使用者的斜坡、失明人士的導盲徑...等等。除此之外﹐在虛擬的互聯網世界裡同樣有 "無障礙" 的概念。 當我們製作網頁時﹐加入以下的技巧﹐網頁就能夠方便視障、聽障人士使用:
Thumbnail
前陣子在將阻礙化為烏有這一篇談到單側聽損學生所遭遇到的困難, 我想這種狀況會一直發生,就是大家對這樣子的事情還不夠了解。
Thumbnail
前陣子在將阻礙化為烏有這一篇談到單側聽損學生所遭遇到的困難, 我想這種狀況會一直發生,就是大家對這樣子的事情還不夠了解。
Thumbnail
最近因為疫情,爸媽使用手機的習慣,從只發早安圖到頻繁的上網看新聞、學上網購物等,頻頻遇上各種麻煩,兩人透過視訊向我求救,經過耐心教一陣子,發現根本還是雞同鴨講,對牛彈琴!
Thumbnail
最近因為疫情,爸媽使用手機的習慣,從只發早安圖到頻繁的上網看新聞、學上網購物等,頻頻遇上各種麻煩,兩人透過視訊向我求救,經過耐心教一陣子,發現根本還是雞同鴨講,對牛彈琴!
Thumbnail
雖視障朋友可用螢幕報讀軟體、點字顯示器、擴視機這類資訊輔具上網,但如網站及手機應用程式設計不完善,就沒辦法操作,因此台灣官方跟民間社福團體合作,積極推動「無障礙網路」政策,讓視障、聽障、肢障及其他類型身心障礙朋友,甚至一般民眾方便上網。 因此設計網站及手機應用程式時,需注意這些原則:
Thumbnail
雖視障朋友可用螢幕報讀軟體、點字顯示器、擴視機這類資訊輔具上網,但如網站及手機應用程式設計不完善,就沒辦法操作,因此台灣官方跟民間社福團體合作,積極推動「無障礙網路」政策,讓視障、聽障、肢障及其他類型身心障礙朋友,甚至一般民眾方便上網。 因此設計網站及手機應用程式時,需注意這些原則:
追蹤感興趣的內容從 Google News 追蹤更多 vocus 的最新精選內容追蹤 Google News