搜寻目录
语言目录
流动式目录
政府资讯科技总监办公室
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 调整文字大小

提供调整文字大小的功能,方便视力较差的用户。这亦有助轻微视障人士阅读内容时无须使用屏幕放大镜手势。

调整文字大小范例图片