iT邦幫忙

第 11 屆 iThome 鐵人賽

DAY 29
1
Modern Web

實踐無障礙網頁設計(Web Accessibility)系列 第 29

真實世界:使用 Android 輔助功能 TalkBack 來瀏覽行動版網頁

  • 分享至 

  • xImage
  •  

(圖片來源:Google

維基百科:
Google Talkback was an accessibility service for Android that helped blind and visually impaired users to interact with their devices. It made use of spoken words, vibration and other audible feedback to allow the user to know what is happening on the screen allowing the user to better interact with their device.

TalkBack 是 Android 裝置內建的 Google 螢幕閱讀器,跟 VoiceOver 一樣都是透過手勢來操作手機,互動朗讀功能讓你可以不用看手機螢幕就能完成操作,開發者也許會頭疼,啊我要支援這麼多種裝置、工具有可能嗎?其實,如果先從工具下手,瞭解它們的原理,再找出行為重疊的部分,我們就能針對重疊的部分,做最有效的努力。

今天想介紹手機中經常使用的手勢,大部分是從黃帝瑋老師的整理的簡報中學習來的,還要謝謝臺南市視覺障礙生活重建服務中心的專員及老師熱心協助。

Android Talkback - 開啟設定

(圖片來源:談談行動裝置的Accessibility - 黃帝瑋老師

  • 設定 > 協助工具 > Talkback > 開啟
  • 根據 Android 版本不同有流程上的差異,可以查看 Android 官方文件
  • 建議開啟快捷鍵的設定,比較方便。
  • 我自己的 Samsung Tab 中的輔助工具,語音輔助工具的名稱是 Voice Assistant,啟用之後,它提供非常詳細的中文語音引導,只要跟著語音講解的手勢就能快速學會操作了,喜歡!

基礎手勢整理

調整數值(與 VoiceOver 相同)

  • 手勢:上下滑動
  • 常用指數:OOOOO
  • 備註:當使用者需要調整 slider 時,就能透過上下滑動的手勢操作數值的高低,什麼是 slider?舉例來說就是跟上圖的圖三「朗讀速度」一樣,提供滑軸作為調整與控制的元件。

選擇焦點(與 VoiceOver 相同)

  • 手勢:左右滑動
  • 常用指數:OOOOO

點選(與 VoiceOver 相同)

  • 手勢:點一下
  • 常用指數:OOOOO
  • 備註:比如說點選某個連結,則會將焦點放在該連結上,適合尚有視覺但看不清楚的人。

點擊(與 VoiceOver 相同)

  • 手勢:點兩下
  • 常用指數:OOOOO

捲動

  • 手勢:雙指向或是向滑,會有聽到像電話按鍵般的指示聲,上滑與下滑的聲音不同。
  • 常用指數:OOOOO

翻頁

  • 手勢:三指向或向

語音輔助工具的手勢真的跟平常使用習慣差異太大,學習之後還是不太熟悉,如果想真的知道更多的常用手勢,都需要自己操作看看才會比較清楚,希望大家要親自操作看看,完整的手勢整理可以參考 Reference 的簡報。這系列文章中,其中以兩篇內容簡單介紹手機的輔助工具,不只是因為我認為開發者需要知道,更是因為我在寫文的過程中,找時間去拜訪臺南市視覺障礙生活重建服務中心,和一位教學盲用電腦的老師聊聊,才知道使用輔助工具來瀏覽網頁來說,在載體:「手機」與「電腦」的使用情境完全不同,而使用需求與對網頁的想像也超出了我的理解。

  • 手機:大部分的操作情境都是以使用 App 取得生活資訊居多,比如說天氣、line 訊息回覆,瀏覽網頁需求真的較少,主要也是因為要能使用手勢操作的手機版網頁少之又少,比如說今晚我只是想簡單測試一下 Talkback 瀏覽 Yahoo! 奇摩行動版,我是有看畫面的(不是單靠聽覺),還是非常快就放棄瀏覽了。
  • 電腦:會以大學生居多,透過網頁查詢資料,盲用電腦是裝載了 NVDA,它是一套免費的語音報讀軟體,專門給 Windows 作業系統使用,國內盲用電腦最常見的組合就是 NVDA + Firefox 瀏覽器(這篇文章是 WebAIM 針對螢幕閱讀器的最新數據調查,可以發現 Chrome 現在超越 Firefox)。
  • 使用輔助科技的使用者們,最關心的是如何馬上獲取關鍵資訊,不管畫面上有多漂亮,很多時候他們是無法想像的,比如說:
    • 「導覽列是在左邊?中間還是右邊?」
    • 「導覽列中的超連結是垂直排列還是水平排列?」
    • 先天盲胞更是無法想像「顏色的呈現」。
    • 也因此,貼心的資訊設計與流程設計是有其必要性(比如跳過連結功能、網站地圖、正確標題級別、填寫貼近功能的替代文字、焦點管理),工程師也許不能決定最終產品要包含哪些功能,可是若對 Web Accessibility 有全面的認識,就能在開發之初與開發之時給出專業且吻合需求的建議,畢竟,我們是關鍵人物啊。

最後,很推薦去上 Google A11ycasts: Assistive Tech: TalkBack,從上完這一系列的課程後,Rob Dodson 自此就是我的神 ^___^。


Reference


上一篇
真實世界:使用 iOS 輔助功能 VoiceOver 來瀏覽行動版網頁
下一篇
Web Accessibility:這 30 天的遺珠之憾與補充
系列文
實踐無障礙網頁設計(Web Accessibility)30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言