搜尋目錄
語言目錄
流動式目錄
政府資訊科技總監辦公室
Webforall 電子報圖片

2015年6月1日

開發無障礙流動應用程式的重要提示

屏幕圖片

互聯網和流動科技為大多數人帶來方便。然而,有些人可能有一種誤解,以為殘疾人士(特別是視障人士)不能使用流動裝置和流動應用程式。很多流動應用程式開發者甚至不知道殘疾人士在使用流動裝置方面的特別需求。事實上,現時愈來愈多殘疾人使用屏幕觸控設備。流動裝置和流動應用程式使他們能夠隨時隨地更有效運用資訊及通訊科技(ICT),更獨立地生活和全面融入社會。以下提供六種於流動應用程式最常見的錯誤及應對的提示,以便開發無障礙流動應用程式 –

#1 在非文字內容提供有意義的文字描述

圖像及按鈕等非文字內容,必須在流動應用程式提供有意義及簡明的文字描述,以便可通過讀屏軟件讀出。文字描述也應盡量簡短(長約4個字),方便視障人士使用文本轉語音軟件及/或文本轉點字硬件。其他實用提示包括 -

  • 為裝飾性的圖片提供無或空值
  • 確保在文字描述後加上“按鈕”,作為功能按鈕。(如屬iOS標準用戶界面(Standard UIKit)的按鈕,其特質(traits)屬性已自動設定為“按鈕”。你可使用輔助檢查(Accessibility Inspector),以檢查標準控件的特質設定)
  • 文字描述與用戶界面應使用相同的語言
  • 注意日期的格式,例如“2015年2月14日”較“2015.2.14”更有意義

Android

在布局設定(layout xml)中為內容說明 (Content Description) 添加文字描述:

Android 添加文字描述範例圖片 1
 Android 添加文字描述範例圖片 2

iOS

建立標籤(Labels)以添加文字描述。如標籤未能清楚顯示用戶執行控件(control)或視圖(view)的結果,可建立提示(Hints)簡述執行控件或視圖的結果。

iOS 添加文字描述範例圖片

#2 色彩對比度

選擇適當的文字和背景顏色,確保對比度有至少 4.5:1,使文本易於閱讀。我們應該確保色盲人士能夠察覺連結的底線(或其他區別)和顏色。

色彩對比度範例圖片

#3 有意義的閱讀次序

對於必須依靠屏幕閱讀器讀取應用程序內容的用戶,有意義的閱讀次序是很重要的。如果內容需要以某種順序讀取,請確保流動應用程式配合邏輯順序讀取的方式設計和編寫,以免用戶混淆。

開發者應留意特殊的格式,如樹形狀控件(control)、數據網格(data grid)及文本區域(text area)。我們建議開發者和用戶驗收團隊學習如何使用及控制屏幕閱讀器。應該在開發過程中使用屏幕閱讀器進行測試,而不是安排到最後才進行。

閱讀次列範例圖片

#4 彈出視窗

彈出或飛出的內容會為視障人士帶來不良的瀏覽經驗。彈出的商業廣告是其中一種會對失明人士造成滋擾的常見內容。請提供關閉彈出視窗的方法。

彈出視窗範例圖片

#5 可點擊物件的尺寸

在手機和平板電腦上點擊並非對每個人都是輕而易舉的事,特別是視障人士、長者,以及上肢或手部活動能力欠佳的人士。如文字和圖片有足夠大小及/或可以放大,則可方便視力較差的用戶閱讀和理解當中的內容。加大流動應用程式的按鈕,能讓用戶輕鬆地點擊和操作流動應用程式的功能。為提供理想的瀏覽和使用體驗,可點擊物件的尺寸應不小於裝置的設定圖標尺寸或作業系統的標準:

Android
9mm
iOS
44 x 44 點

#6 調整文字大小

提供調整文字大小的功能,方便視力較差的用戶。這亦有助輕微視障人士閱讀內容時無須使用屏幕放大鏡手勢。

調整文字大小範例圖片