风清扬

1-手淘线下信息无障碍讲解文案-ios

1楼 风清扬


1-手淘线下信息无障碍讲解文案-ios

作者:顾伶磊

微博自媒体:无障碍的那些事负责人,专注于无障碍产品测试。

 

如何做无障碍:

1,认清无障碍是一个bug而非爱心工程,做无障碍是修复bug

首先我们要来明确一个概念,我们知道,产品在开发的时候,由于种种原因,会产生一些bug。这些bug有可能会影响到用户的使用,例如闪退,卡顿等。而不兼容无障碍其实就是这样一个bug,只不过更严重一些。它影响的是一群规模不小的视障人。由于这样的bug的出现,原本可以和普通人一样使用产品的视障人被隔离了起来。而作为产品和开发,需要做的其实就是解决掉这些bug,让视障者也可以和普通用户一样享受同等的体验。

2,iOS上的辅助功能VoiceOver以及如何使用VoiceOver来测试你的应用是否无障碍

apple全系列产品都自带了非常完善的辅助功能,能满足各种有特殊需求的人群包括残障人士使用。自iOS3.0起,系统中就集成了一个可以让视障人方便使用设备的辅助程序VoiceOver。它能将明眼人看到的内容通过语音合成的方式,朗读给视障人听。我们可以通过任何一个iOS设备的设置,通用,辅助功能找到并打开它。然后我们就可以使用它来操作系统的功能,以及第三方APP。按照设计要求,明眼人可以看见的内容视障者都应该能顺利且方便的听到并且可以无障碍的操作。然而现实的情况是,除了iOS自带应用和大部分国外应用外,在国内能完全实现这一目标的应用很少。举例:

经过优化的支付宝

优化不好的手机淘宝的首页

想要测试你的产品是否支持无障碍其实很简单,除了通过iOS开发工具自带的无障碍检测器和模拟器对基本的无障碍兼容性进行测试外,很直观且简单的方法,就是自己打开VoiceOver亲自体验你的产品是否可以方便操作。对于刚接触你的产品的用户,它们并不了解你的产品界面中都有一些什么控件。所以大家刚才可能看到了,当我打开一个应用后,我一般会使用单只向右或者向左滑动的手势按页面中的控件顺序来进行浏览,而很少直接触摸某一个控件然后双击打开。对于大多数完全失明的视障者来说,遇到一款陌生应用,直接触摸的话,是会大大降低操作效率,甚至有可能无法发现需要操作的元素的。而正常情况下,采用滑动浏览的手势,不容易遗漏掉界面上的内容。因此,想要测试你的产品是否可以无障碍操作,你可以打开VoiceOver,然后从屏幕顶部开始,采用一个手指向右或者向左滑动来听听,页面上所有的可以被交互的元素是否都能被正常的读出。

3,如何做无障碍:

我们首先来看一段iOS无障碍兼容性开发指南中的描述,翻译成中文大概是这样的:"一个程序是不是无障碍的,取决于用户可以交互的所有界面元素是否是无障碍的。一个界面元素是否是无障碍的取决于它是否在恰当的时候告知用户它是一个无障碍的元素。一个无障碍的界面元素必须准确提供关于它的信息才能被使用。这些信息包括它在屏幕的位置、名称、行为、值和类型等。"如果你使用的是标准控件和试图,那么这些信息默认就已经存在了,我们所需要做的仅仅是核对并完善它们,可以使用SDK中的Interface Builder来修改这些信息。但问题是,现在很多程序都是非标准控件和试图,也就是自定义的。那么我们就需要使用苹果官方提供的工具以及通过编程实现对这些信息的完善。具体方法,开发文档中已经讲的很清楚,并且有例子加以说明,作为一个普通用户,我就不再专业人士面前班门弄斧了。我今天着重想讲讲的就是这些需要完善的属性信息,因为目前包括手机淘宝在内,大部分应用在进行了基本的无障碍兼容后,所遇到的都是这样的问题。

3.1,label:首先我们来说说label,也就是标签,这是一个必须要使用的属性。应用在实现了框架的基本无障碍兼容后,首先要做的就是给每一个可以交互的元素加上准确的label,注意,是每一个都要加。视障者使用VoiceOver操作你的产品的时候,就是依靠听取label信息来判断控件的作用的,因此,如果控件信息缺失或者不准确将大大影响视障者的使用效率,甚至导致无法使用的情况。通常来说,如何给控件加label遵循以下两个原则:

1,对于那些本身就显示了文案的控件,例如一个商品的商品名称、价格或者一个播放列表中的歌曲名称等,视觉可见有可读的文字信息,label只要和它保持一致即可,不需要加入额外的内容。这样,视障者和普通人就可以读取到同样的信息。

2,对于那些通过图形和图标来展示的控件,需要用最简单准确的词语来描述它们。例如,对于一个加号的图标,通常可以用添加来表示。类似的还有播放、收藏、删除等等。确实无法用一个词说清楚的可以使用一个短剧来描述,例如加入购物车等。

需要重点注意的是,label中不能包含动作和提示信息,更不能包括控件类型。类似于双击打开,点击收藏这种是完全错误的用法,将大大增加视障者的收听负担。试想如果你用视觉看到一个图标上显示了"双击打开"这几个字是什么心情?如果加入了控件类型视障者听到的就有可能是这样的效果:"添加按钮"按钮,"收藏按钮"按钮。因为大部分时候VoiceOver可以识别当前控件的类型,也包括了一部分自定义控件。下面我们来具体看几个手机淘宝上的例子:

微淘页面:冗余提示"当前是一段文本,内含链接,向右以选择链接"

淘宝商品页:选择套餐页面的查看大图按钮提示为"双击查看大图"

天猫商品页的评价页面:评价后面有"评价按钮当前评价人评价,点赞按钮当前点暂人点赞"这样的错误提示

这些都是非常冗余的提示,是完全违反无障碍开发指南中的规范的做法。

3.2,hint:这是一个可以选用的属性,并非一定要使用。所谓hint,顾名思义就是提示。既然是提示,它的作用就是当我们的界面元素使用了label后,仍无法将含义完全传达给用户,或者元素存在某种特殊交互,需要提示用户执行后的结果。此时,我们就可以给它加上一个hint来提示用户。千万不要再hint中重复label中的内容,或者在里面加上了控件的类型。例如上面我们提到的淘宝商品选择套餐页面那个图片按钮,正确的做法就是在label中写上"宝贝图片",然后在hint中写上"点击进入大图浏览",这样当VoiceOver用户听到宝贝图片这个按钮时,稍等一会儿,就能听到点击进入大图浏览这个提示。而对于操作熟练的视障者来说,它们完全可以忽略这个提示而直接点击或者去操作别的东西。视障者甚至可以通过VoiceOver的设置来关闭hint的朗读。不要为了加hint而加hint。我们再来看两个加的恰到好处的hint的例子:

网易云音乐的歌单或专辑的播放器页:触摸专辑图会提示"三个手指滑动切换上下手"

知乎回答页的点赞数字按钮:触摸后会提示"点击这里可以打开投票面板",我们点击后就可以选择赞同或者反对了。

3.3,traits:traits是用来描述控件的类型的,例如按钮、链接、图片、搜索框等等,当我们使用了自定义控件而又无法让VoiceOver识别到控件类型的时候,就可以用这个属性来告诉VoiceOver当前控件的类型。因此,千万不要因为偷懒,而将控件的类型直接写在label里。那样真的很low。即使你不愿意使用traits,宁可让控件不提示类型,也不要在label里画蛇添足。

其它更多属性的用法和注意事项我就不展开说了,其实开发文档中都已经说的非常清楚,大家只要认真阅读,都可以理解。希望大家通过这部分的分享内容可以对无障碍兼容性以及如何做无障碍有一个初步认识。

 

如何做好无障碍:

做好了基本无障碍支持后,你的产品已经可以让视障者使用了,但未必好用,我们可以通过以下三方面来提升无障碍体验:

1,用视障者的视角亲身体验:

打开VoiceOver按照视障用户的操作习惯,使用滑动和触摸的手势浏览一下页面,看看有没有操作不爽的地方,必要的时候可以与视障用户讨论。举例:

:购物车页面滑动的时候的空焦点

宝贝详情页头部的焦点顺序问题

在上面的例子中我们看到:购物车页面使用VoiceOver滑动的时候,可以听到多个没有声音的空焦点,其实,整个淘宝客户端大量页面都有这样的问题。这些空焦点让视障者浏览的时候听着非常难受,这种感觉就好像视觉上让你看到页面某个位置留出了一片空白一样。而宝贝详情页,如果我们使用VoiceOver的两个手指上推手势,让它从页面顶部开始按顺序自动朗读控件的话,可以发现,原本第一个读出的焦点应该是左上角的返回按钮,而现在变成了宝贝图片,然后才是返回按钮。这种焦点的顺序混乱问题,会一定程度影响视障者对控件位置的判断。

2,通过一些特色功能增强用户体验:

我们都知道,类似于微淘这样的信息流界面,每一条内容上有很多个控件,比如头像、文字、商品链接等等。这样视障者在这个页面每听一条内容就需要滑动很多次,而有时候我们紧紧想快速浏览一下关注的店铺都有什么新动态。事实上苹果在这方面考虑的非常周全,同样有完善的方案来加以解决。VoiceOver有一个手势双指双击,可以在系统中实现一些强大功能。例如来电话的时候可以快速的接听和挂断电话,平时可以使用这个手势快速播放和暂停后台的音乐等等。这样,视障者就不用受到控件交互的限制,可以快速的实现一些快捷功能。苹果把这个手势称为magic tap,魔法轻拍。很久之前,苹果就已经把这个手势的API开放给了开发者,在辅助功能的视图控制器编程指南中就可以查看到相关内容。后面我会把相关的技术文档也提供给大家。国外的facebook和国内的微博很早就对这个手势进行了很好的利用。掩饰:

微博

我们可以看到,开发者把信息流里面的每条内容中的所有控件按照一定的顺序组合成了一个连续读出的焦点,这样视障者滑动一次就能听到一条微博,浏览效率大大提高。那么,如何解决跟每一条微博中的控件(例如头像、链接、评论、转发甚至视频音频)的交互问题呢?这里就用到了magic tap。当我们滑动选中一条微薄的时候,只要双指双击,就会弹出一个菜单,里面就包括了这条微博包含的所有可交互的控件。视障用户只要点击对应的图标,就能与对应的控件进行交互。这样,效率提高了,交互问题也解决了,两全其美。

3,做好无障碍兼容性的善后工作:

在对应用进行无障碍兼容后,一方面需要跟踪无障碍兼容性特性的应用情况,通过测试来发现是否有遗漏的地方,及时补漏,举例:

淘宝店铺首页优化丢失,点全部宝贝后才能看到优化

部分天猫店铺首页甚至无焦点

需要注意的是,上述问题举例仅用于说明典型问题和处理方式。实际上手机淘宝目前上存在非常多的无障碍兼容性问题,后续需要重新梳理。

另一方面,建议在实现无障碍特性的代码中添加注释,说明这是无障碍方面的改进,以避免后续升级或者开发工作调动后被当作冗余代码清理。当然,最根本的还是应该尽早将无障碍兼容性纳入开发和自测流程,这样开发和产品同学就不用反复把时间浪费在同一件事情上了,而视障者也能获得有持续性的无障碍体验。

 

通过以上的讲解,相信大家对如何做好无障碍也都有了自己的理解。实际上,做无障碍,并没有一些同学想象的那么困难。所需要的就是细心和一点点耐心。刚开始做的时候,或许的确需要占用一些时间,但一旦做好,能为产品带来的用户增量也是巨大的。更重要的是,你解决了产品的一个重要bug,一个影响到1691万视障人使用的bug

乔布斯说过:“技术其实啥都不是,重要的是你相信人类的善意和智慧,还有如果你给予它们工具,它们会用它来做出极其美妙的东西。”这几年,各种各样的生活出行累应用的出现,大大方便了我们这些特殊人群的生活。也许对于一般的人来说,淘宝支付宝这些应用只是锦上添花,但对于我们来说却是雪中送炭。我一直相信技术存在的最大意愿,就是帮助需要它的人跨月障碍。

 

iOS无障碍编程指南:https://developer.apple.com/library/ios/documentation/UserExperience/Conceptual/iPhoneAccessibility/Introduction/Introduction.html

视图控制器编程指南:https://developer.apple.com/library/ios/featuredarticles/ViewControllerPGforiPhoneOS/SupportingAccessibility.html


1楼 发布于:2016-6-15   |   查看数:0   |   回复数:3
Alpha
2楼 Alpha
支持一下
2楼 发布于:2016-6-15
天马
3楼 天马
支持
3楼 发布于:2016-6-15
云海泛舟
4楼 云海泛舟
好!
4楼 发布于:2016-6-16
初出江湖