许多人使用移动应用程序来完成他们的日常数字任务和交易。Statista的数据显示,4 预计到2025年,全球移动用户数量将达到74.9亿。世界卫生组织和世界银行的另一项估计显示,全球有10亿人,即世界人口的15%,患有残疾,这可能会限制他们获取信息或参与各种活动。13 尽管包括移动应用程序在内的数字技术有可能减少障碍,但在应用程序设计和实现中,可访问性并未得到始终如一的强调。当不考虑可访问性时,残疾用户可能难以甚至无法完成任务。移动用户体验天生就包含诸如屏幕空间减少、环境变化和注意力不集中等挑战。对于残疾人士来说,这些挑战可能会更加突出。
无论移动应用程序的目的是什么,考虑可访问性都能确保产品可以被尽可能广泛的受众使用。彭博Connects 是一款免费的移动应用程序,提供超过600家博物馆、美术馆、雕塑公园、花园和文化场所的数字指南,可在iOS和Android平台上使用。1 该应用程序迄今已拥有超过400万终身用户。通过优先考虑可访问性,彭博Connects支持文化组织为世界各地的用户提供包容、信息丰富且愉悦的数字体验。
在数字体验的可访问性方面,《Web内容可访问性指南》(WCAG)规范了设计和实施过程。5 该指南定义了三个级别的符合性:A、AA和AAA。虽然A级是最低级别,但AA级包含所有A级和AA级要求,是大多数组织的目标级别。这也是彭博Connects应用程序项目团队的目标。虽然这些指南是为Web内容定义的,但它们扩展到所有数字体验,包括原生移动应用程序。当在构建可访问的应用程序时应用这些指南时,移动体验的某些方面可能需要独特的考虑。
本文探讨了移动应用程序的一些关键可访问性考虑因素,并重点介绍了彭博Connects应用程序在产品和流程中支持可访问性的几种方式。图1显示了彭博Connects应用程序“探索”屏幕的设计和实施考虑因素。
当为iOS和Android创建移动产品时,使用React Native或Flutter等跨平台应用程序框架可以加快开发时间和效率,但可能会带来额外的挑战,例如框架如何与原生操作系统层交互,或者开源环境中缺乏全面的可访问性支持。
彭博Connects应用程序是使用React Native框架构建的。开发人员在尝试使用屏幕阅读器或键盘在嵌套文本元素上实现焦点时遇到了问题。在该应用程序中,滚动视图中的某些文本块包含需要单独聚焦和交互的超链接。React Native中的默认行为是忽略嵌套文本。为了绕过这个问题,一种可行的解决方法是使用WebView。但这会带来问题,因为它会影响性能,并使控制与屏幕相关的UI渲染变得更加困难。另一种方法是分隔嵌套文本,并在“视图”中设置单独的链接,但这会损害文本UI。解决方案是临时使用全屏WebView。虽然这确实解决了用户集中注意力和处理文本的需求,但团队计划在可以使用React Native的未来增强功能时找到更无缝的解决方案。3
方向支持是AA级可访问性标准。11 不幸的是,当今市场上的许多应用程序都将使用限制为单一显示方向。虽然应用程序的主要功能和设计可能表明最好以特定的显示方向查看,但限制应用程序方向是有问题的。一些用户可能会将他们的设备以固定的方向安装在轮椅上,而另一些用户可能会发现使用特定的方向更容易导航,因为他们的灵活性有限。因此,至关重要的是设计支持每屏纵向和横向方向的移动应用程序。在某些情况下,这可能需要响应式设计,以避免将关键内容推到“折叠下方”,在那里可能不容易被发现和访问。
彭博Connects应用程序中的“查找号码”输入屏幕已经过重新设计,以便用户可以在横向方向访问键盘。尽管此功能在移动设备上的键盘上并不常见,但它被认为是必不可少的可访问性功能和有价值的增强功能。图2显示了彭博Connects应用程序的数字输入屏幕在纵向和横向方向上的显示。
触摸手势是移动应用程序的主要交互模式。然而,高级、隐藏和不一致的手势使用可能会给所有用户带来挑战,特别是那些灵活性或认知能力受损的用户。同样,诸如按住等多动作手势可能会给某些残疾用户带来更大的障碍,应避免将其用于主要功能。手势应简单且一致,以确保易于导航8 和最大程度的可操作性。9
某些手势交互可能会干扰关键的可访问性功能。例如,如果使用水平滑动来显示或对列表项执行操作,请记住屏幕阅读器的用户依赖于这些手势来垂直导航屏幕。考虑模态交互,或者,如果可能,在向下钻取到详细视图时使这些操作可访问。
iOS和Android中的内置屏幕阅读器功能包括用于加速常用功能和设置的手势快捷方式。许多依赖屏幕阅读器的人都是这些快捷方式的高级用户。例如,在iOS VoiceOver中,四指轻击会将用户的焦点跳转到页面上的第一个项目。在应用程序中重新调整此手势的用途可能会导致摩擦、混乱或任务放弃。平台差异也可能在这里发挥作用:在Android设备上进行相同的四指轻击会调用教程菜单。如果物理运动(如倾斜或摇动)是与应用程序交互的一部分,请提供替代方案,以便用户可以使用屏幕菜单或键盘控制来模拟此操作。
最后,请记住,手势对于某些用户来说不可行或不受欢迎。其他导航方式包括蓝牙键盘或切换设备,后者允许用户通过操纵杆等替代控件进行导航。使用连接的蓝牙键盘测试应用程序的导航将有助于发现常见的可访问性问题,例如无法聚焦的元素或键盘陷阱。如果没有切换设备,使用键盘进行测试也可以作为使用切换设备进行导航的一般代理。
尽管移动应用程序和桌面应用程序之间的导航输入可能有所不同,但WCAG关于焦点顺序的指南仍然适用。不仅要提供逻辑且一致的焦点顺序至关重要,而且还要确保焦点指示器始终可见。6 在移动设备上,考虑到移动用户不断变化的环境和不断变化的光照条件,这一点尤其值得关注。
一般建议是避免修改视觉焦点指示器的默认外观。相反,最好确保所有屏幕和屏幕状态都具有适当的对比度,并且焦点指示器在其中清晰可见。在某些情况下,更改屏幕颜色可以改善感知,尤其是在可能导致屏幕眩光的明亮环境中。
移动设计通常利用旨在优化有限空间中内容和功能显示的做法和模式。然而,其中一些可能会给辅助技术的用户带来问题。
轮播图或“水平列表”是移动界面中常见的模式。(请注意,在本文中,轮播图指的是可以手动分页的内容,而不是自动前进的内容,后者通常被认为是一种糟糕的用户体验。2)使用屏幕阅读器的视障人士或盲人会线性地体验内容,并依赖于通过语义清晰地传达内容的结构。因此,告知用户他们正在查看一组项目,而不是不确定的、可能不相关的对象列表,这很有帮助。在可能的情况下,标识标签应该是轮播图正上方的视觉标题,描述其包含的内容。这也将为使用屏幕阅读器的人提供一种方法,通过导航到屏幕上的下一个标题来跳过轮播图内容。当轮播图包含许多项目时,这尤其有用。如果视觉标题不可行或不希望使用,请考虑在后端使用不可见的“可访问名称”字段标记轮播图,该字段可以在轮播图中的第一个项目之前聚焦。
同样重要的是,用户要意识到轮播图包含多个内容项。诸如下一个项目的“偷窥”或轮播图组下方的分页点等常见提示,虽然对于有视力的用户来说是熟悉的信号,但可能不容易被屏幕阅读器的视障人士或盲人用户感知到。10 为了让使用屏幕阅读器的人更容易了解轮播图中项目的数量以及他们当前位于哪个项目上,请将项目的索引号和项目总数附加到每个可聚焦对象的可访问名称中。
另一种熟悉的移动模式是所谓的“浮动”UI元素。这方面的一个例子是主操作按钮,它在z轴上向前定位,以允许底层内容在其下方滚动。这种方法允许轻松发现重要操作,而无需使用菜单或其他边框来容纳它们。然而,设计人员和开发人员应意识到屏幕阅读器用户的体验。虽然有视力的用户可能很容易注意到分层在当前内容视图顶部的操作按钮,但盲人或低视力用户必须一次使用一个图层的屏幕内容。这意味着屏幕阅读器首先需要导航浏览主内容层的全部内容,然后才能“向前”跳转以聚焦在浮动操作按钮上。这会造成非常繁琐的交互。
虽然加速器(如iOS上的转子设置)可以减少所需的工作量(通过允许用户选择性地聚焦于一种UI元素,例如控件),但不应依赖它们来有效地发现主要功能。覆盖层和透明层往往会“混淆”屏幕阅读器;强制围绕它们形成逻辑焦点顺序在技术上可能具有挑战性。在选择此模式之前,设计人员和开发人员应考虑由此产生的屏幕阅读器体验,以及另一种更友好的屏幕阅读器设计是否可以实现相同的目标。
本文的一些读者可能还记得早期版本的移动用户界面,这些界面严重依赖笨重、“拟物化”的视觉隐喻,并且包含的视觉信息层次结构相对较少。在这些界面中,屏幕上的元素似乎在争夺用户的注意力。从那时起,移动界面的视觉语言逐渐转向更扁平、更细致的方法,旨在优先考虑关键信息,减少屏幕混乱,并提高屏幕上一次显示的元素的所谓信噪比。
虽然简洁明了的界面对于良好的设计至关重要,但不应以牺牲清晰度和易用性为代价来应用它。缺乏足够明确的提示和标签以至于难以区分的用户界面可能会给所有用户带来挑战,但对于患有一种或多种残疾的用户来说,这可能尤其困难。7 例如,患有某些残疾的人可能会发现很难发现和交互太小、缺乏足够对比度或放置得太靠近其他交互元素的控件。因此,至关重要的是使用易于理解的标签,确保明确提示交互元素,并使用标题和适当的内容缩放来传达清晰的信息层次结构并提高可理解性。彭博Connects应用程序的UI设计使用一致的布局、明确的标签和控件以及适当的颜色对比度,以确保用户友好且可访问的体验。
提供系统反馈对于帮助用户了解其流程和操作的状态,以及他们是否成功至关重要。12 由于移动用户更可能遇到缓慢或间歇性连接,甚至完全没有连接,因此必须考虑具有可访问性的反馈机制。
进度指示器,无论是确定的还是不确定的,都是视觉提示。这意味着低视力或盲人用户可能会错过有视力用户一目了然地接收到的一些细节。为了解决这个问题,至关重要的是为指示器分配正确的可访问性角色和标签,并提供定期更新,让用户了解流程的状态。指示流程何时完成也很重要。在可能的情况下,应在用户无需将屏幕阅读器的焦点移动到指示器的情况下向用户提供进度信息,以便他们可以继续使用应用程序(如果适用)。考虑使用额外的感官提示,例如声音或触觉振动,以帮助传达状态。
如果您在使用彭博Connects应用程序时选择数字指南,则指南的内容将在后台下载,以防连接丢失。在指南的主屏幕上,下载状态以进度条直观地指示。为了确保屏幕阅读器的用户可以访问相同的信息,该应用程序会定期宣布下载进度,并在下载完成时发出通知,而无需将焦点放在进度模块中。图3显示了数字指南主屏幕的下载模块,提供了有关其进度的状态通知。
可访问性不是一项有明确开始和结束的一次性任务。相反,它是一个持续的过程,应集成到平台、应用程序或功能的生命周期的每个方面。这种方法确保可访问性始终是首要任务,并且对其的责任不限于团队的单个部分或成员。
无论是实时讨论设计规范还是在单独的可交付成果中记录设计规范,指定功能的可访问性详细信息都将有助于推动共同理解并支持工程。彭博Connects的设计团队在Figma中交付设计规范,其中包含屏幕阅读器/键盘行为、文本缩放、方向和对比度的可访问性详细信息。例如,在设计屏幕阅读器体验时,设计规范包括以下行为
一旦构建了可访问的组件,其可访问属性就可以应用于使用它的任何地方,但详细的规范支持随着应用程序的不断增长而实现新功能的可访问性。图4显示了用于阐明屏幕阅读器行为的设计规范,图5显示了用于可伸缩性的设计规范。
与用户进行测试是创建成功产品的必要组成部分。在确保可访问性方面尤其如此。目前,有几种自动化工具可以检查代码,以确保元素已正确标记、具有合适的对比度并包含媒体替代方案,例如图像的替代文本、文字记录和字幕。然而,必须强调的是,验证产品可访问性的唯一方法是实际与各种残疾人士和使用辅助技术的用户一起测试其功能。“符合”可访问性指南并不一定保证良好的用户体验。与残疾用户进行研究可以揭示产品可访问性中可能被忽视的差距。
彭博Connects团队对15位具有各种残疾和辅助技术需求的用户进行了可用性测试。尽管调查结果总体上是积极的,但测试揭示了几个在技术上合规的流程仍然给残疾参与者带来可用性问题的地方。
其中一个例子是应用程序的音频播放器组件。此组件以内联方式显示在内容视图上,并允许应用程序的用户播放或暂停嵌入在屏幕中的音轨。当音频模块被聚焦时,使用屏幕阅读器的人首先听到音频的标题和时长,然后是角色和标签,宣布为“播放音频。按钮。”正如所实现的那样,所有控件都具有正确的角色和标签,可操作元素可以单独聚焦,并且按钮的状态(“播放”或“暂停”)已宣布。然而,几位测试该应用程序的屏幕阅读器用户指出,在音频剪辑内容信息之前加载其角色掩盖了其目的,使其很容易忽略它是一个按钮。这个问题通过在可访问名称之前宣布角色来简单地解决。这为使用屏幕阅读器的人带来了更好的体验。图6显示了更新后的屏幕阅读器公告的音频按钮:“播放音频。策展人杰西卡·巴里谈论詹姆斯·格思里爵士在1号展厅的这幅画作。”
在创建移动应用程序时,考虑可访问性至关重要,以确保它们对尽可能广泛的受众来说都是可用且愉悦的。与桌面体验相比,移动可访问性具有独特的考虑因素,但它为那些在日常活动中依赖移动设备的用户提供了巨大的价值。通过牢记这些考虑因素,移动产品开发团队可以更好地支持和改善所有用户的生活。
1. 彭博Connects; https://www.bloombergconnects.org。
2. Nielsen, J. 2013。自动前进的轮播图和手风琴会惹恼用户并降低可见性。尼尔森·诺曼集团; https://www.nngroup.com/articles/auto-forwarding/。
3. React Native。GitHub:[a11y] 嵌套文本组件的可访问性; https://github.com/facebook/react-native/issues/32004。
4. Statista。2024年。2020年至2025年全球移动用户数量预测; https://www.statista.com/statistics/218984/number-of-global-mobile-users-since-2010/。
5. WCAG(Web内容可访问性指南)2.2。2023年。W3C建议; https://www.w3.org/TR/WCAG22/#abstract。
6. WCAG(Web内容可访问性指南)2.2。2023年。W3C建议。焦点顺序(A级); https://www.w3.org/WAI/WCAG22/Understanding/focus-order.html。
7. WCAG(Web内容可访问性指南)2.2。2023年。W3C建议。指南1.4 可区分; https://www.w3.org/TR/WCAG22/#distinguishable。
8. WCAG(Web内容可访问性指南)2.2。2023年。W3C建议。指南2.4 可导航; https://www.w3.org/TR/WCAG22/#navigable。
9. WCAG(Web内容可访问性指南)2.2。2023年。W3C建议。2. 可操作; https://www.w3.org/TR/WCAG22/#operable。
10. WCAG(Web内容可访问性指南)2.2。2023年。W3C建议。1. 可感知; https://www.w3.org/TR/WCAG22/#perceivable。
11. WCAG(Web内容可访问性指南)2.2。2023年。W3C建议。成功标准1.3.4 方向; https://www.w3.org/TR/WCAG22/#orientation。
12. WCAG(Web内容可访问性指南)2.2。2023年。W3C建议。成功标准4.1.3 状态消息; https://www.w3.org/TR/WCAG22/#status-messages。
13. 世界卫生组织和世界银行。2011年。《2011年世界残疾报告》; https://iris.who.int/handle/10665/44575。
胡安米·斯宾塞(她/她的)是一位在UX设计领域拥有超过15年经验的UX设计师。在彭博,她专注于移动设计和可访问性,并热衷于与艺术和文化组织合作。她与家人和他们的两只猫住在纽约皇后区。
版权所有© 2024,所有者/作者持有。出版权已授权给。
最初发表于Queue vol. 22, no. 5—
在 数字图书馆 中评论本文
维尼·多纳蒂 - 推动组织可访问性
在本文中,我们将探讨微软如何在整个组织中推动可访问性,并将仔细研究促进包容性文化的基本框架和实践。通过检查诸如意识建设、战略发展、可访问性成熟度建模等方面,我们旨在为开始可访问性之旅的组织提供指南。我们的想法是分享我们所学到的知识,希望您可以借鉴它,进行调整以适应您公司的宗旨,并以一种不仅仅是打勾活动的方式来培养可访问性,而是真正融入到您的文化中。
沙塔卜·瓦希德 - 设计系统是可访问性交付工具
设计系统是为消费者(应用程序的设计师和开发人员)构建的基础设施。一个成功的设计系统允许组织中的消费者快速扩展跨应用程序的设计和开发,提高生产力并建立一致性。然而,许多消费者没有准备好为可访问性而构建。组织是否可以使应用程序的可访问性支持构建具有可扩展性、生产力和一致性?本文探讨了设计系统如何成为支持可访问性的重要工具。
克里斯·弗莱扎克,杰弗里·P·比格姆 - 系统级可访问性
本文通过我们使iPhone能够使用VoiceOver屏幕阅读器进行非视觉使用的工作来说明系统级可访问性。我们为非视觉使用重新构想了触摸屏输入,引入了适用于控制屏幕阅读器的新手势,对于输出,我们增加了对合成语音和可刷新盲文显示器(输出触觉盲文字符的硬件设备)的支持。我们添加了新的可访问性API,应用程序可以采用这些API,并使我们的用户界面框架默认包含它们。最后,我们添加了一个可访问性服务,以桥接这些新的输入和输出与应用程序之间。
斯泰西·M·布兰纳姆,沙塔卜·瓦希德,谢里·伯恩-哈伯,贾马尔·马祖里,卡洛斯·蒙查拉兹,卡尔·迈希尔 - 数字可访问性的现状
如果您是数字可访问性的新手,即使您不是,也很难掌握全局,而科技行业发展迅速。因此,我们请一组专家为我们介绍最新情况。他们不仅有涉及数字可访问性的日常工作,而且还具有残疾的生活经验。我们向他们提出了以下问题:可访问性的现状如何?主要挑战是什么?为什么我们需要可访问的软件?我们如何为可访问性辩护?谁在引领潮流?我们接下来该往哪里去?