当前位置: 首页 > 科技观察

DinamicX详解:如何让盲人在线购物?

时间:2023-03-14 18:39:40 科技观察

中国目前有超过1700万视障人士。在互联网发达的今天,他们不能像大多数人一样享受互联网带来的便利,比如用手机上网购物。但是,我们可以通过技术来改善这种情况,最大程度的让他们的生活更加便利。本文分享了手机淘宝在使用DinamicX支持无障碍方面的技术方案,并给出了相关示例,希望对移动开发者有所启发。什么是无障碍?无障碍的范围很广,一般是指发展过程中没有障碍,活动可以顺利进行。比如在火车站、机场、商场等一些公共场所为腿脚残障人士设置无障碍电梯、无障碍厕所,或者为听力障碍人士提供助听器等。换句话说:为残疾人提供与非残疾人相同的机会。这里提到的残疾在形式和严重程度上各不相同,但分为四大类:认知、视觉、听觉和行动能力。当然,残疾也分为永久性残疾和情境性残疾两种。永久性残疾视力障碍、听力障碍、坐轮椅或行动不便等身体障碍。情境障碍驾驶时尝试使用手机:由于汽车晃动导致的情境视觉障碍、身体障碍和注意力缺陷。会议中聊天软件的声音:查看消息发出声音会影响到周围的同事(聊天软件提供的语音转文字功能是一种无障碍)。出国旅行时的语言障碍:情境口头交流障碍。购物时提包:情境性身体损伤。可访问性的新定义:确保理解每个用户意图。从某种程度上说,信息无障碍是智能产品交互设计中针对特殊人群的功能,让人们在硬件和软件上更平等地享受产品的功能。DinamiX对无障碍的支持下面文章中DinamicX对无障碍的支持主要是信息无障碍,一般是针对有视觉障碍的人。通过技术手段,帮助视障人士更好地体验世界的美好,让用户在使用APP时能够顺畅地获取和使用信息。手机淘宝基础核心链接手机淘宝首页、详情、购物车、订单、订单、订单列表、我的淘宝均属于手机淘宝核心链接。目前,上述页面的UI是使用DinamicX作为渲染引擎绘制的。DinamicXSDK是支撑手淘基础核心环节的重要组成部分,支撑无障碍是责无旁贷的。关于DinamicXDinamicX的定位是提供三端统一能力的客户端动态解决方案,为无线基础链路的高性能和高可用性提供基础保障。我们希望通过社区化运营,不断丰富DinamicX的能力和内容,提升渲染性能和稳定性,使DinamicX成为集团内客户端动态系统的标准化解决方案。动态模板解决方案核心技术:包含模板下载、加载、解析、渲染的引擎,帮你动态生成View。DinamicX对无障碍的支持主要分为两部分:SDK本身在无障碍跨平台支持模板开发平台上进行checkpoint验证。业务方(模板开发人员)希望支持可访问性的认知成本。我们团队的所有成员,包括Android开发、iOS开发、测试同学,经过长时间的讨论,确保两端统一,勾勒出一个统一的无障碍行为。技术方案System-nativeaccessibilityiOSsystem-nativeaccessibilitynativeiOS的几种逻辑:View设置isAccessibilityElement=YES,无论是否设置accessibilityLabel,其所有子节点都无法获得焦点。UILabel的isAccessibilityElement属性默认为NO,但只要主动设置该值,即使设置为NO,在父容器下也无法自动读取。如果需要父容器获得焦点后自动读取里面所有UILabel的文本,需要isAccessibilityElement=NO,accessibilityElementsHidden=NO。Label的isAccessibilityElement必须保持原来的默认值,不能设置为任何值。如果父节点是嵌套的,并且所有父节点的accessibilityElement都设置为off,则父节点所有子节点的TextView的accessibilityLabel会自动依次读取,也就是说所有自动读取的文本最终都会被read在根节点上读出。系统辅助功能API:Android系统的原生辅助功能。AndroidView的无障碍状态分为三种:Noaccessibilityinformation,比如ImageView、View等,默认是没有无障碍信息的。有无障碍信息,比如ImageView设置setContentDescription,或者TextView自己的无障碍信息就是自己的文字。带有辅助信息的交互控件,比如ImageView同时设置setContentDescription和setOnClickListener,比如TextView设置setFocusable(true),或者EditText和CheckBox默认是带有辅助信息的交互控件。这三种无障碍状态在其父布局中的关系:SystemAccessibilityAPI:DinamicXSDK定义了无障碍属性,以消除两端的差异并简化无障碍逻辑。DinamicX提供了两个辅助功能属性来支持辅助功能。xml示例如下,表示当控件被触摸时,会被选中,并读出“跳转到详情页”的文案:统一屏障-两端自由行为目前终端的统一行为描述的是Layout和子节点与accessibility属性的各种值发生冲突的情况。End-to-EndProcessing为了实现上图所示两端的一致行为,每一端都有自己的处理。iOS下图是SDK根据模板属性映射到系统API:Android下图是SDK根据模板属性映射到系统API。Android需要区别对待布局视图和非布局视图。HandlingofaccessibilitybyLayoutnodes:Handlingofaccessibilitybynon-Layoutnodes:示例演示模板"@triple{@data{cellType},20,50}"backgroundColor="#f2f2f2"height="match_content"width="match_parent"orientation="vertical"disableFlatten="true"accessibility="auto">TemplateExampleMobileDemo由于Layoutaccessibility设置了auto属性,所以Layout会被选中,里面包含accessibility信息的Text会被朗读出来,但是第二个和第四个TextView不会被朗读出来。第二个配置onTap&accessibility=on,所以此时属于交互控件,需要单独选择,第四个accessibility=off,所以此时禁用,所以不能选择朗读,并且是无障碍checkpoint支持朗读Layout不被选中的一方面,引导开发者编写是另一方面。事实上,现在很多动态解决方案,包括原生本身,都会支持辅助功能,但这种支持是单向的。如果你只支持,而开发者不支持,那么最终还是会缺少这个产品的辅助功能。为什么开发商不支持?一是无障碍宣传不够,优先级不高,开发本身没有这个意识,缺乏无障碍测试用例。其次,辅助功能的支持有一定的成本,没有一套标准和规范来告知何时需要辅助功能以及如何支持辅助功能。第三,过程中没有监督和控制,开发可能会忘记。为了更好地支持和帮助视障用户使用手机淘宝,帮助业务方定位无障碍错误,减少无障碍测试和回归的工作量,我们推出了无障碍验证检查点,智能检测无障碍问题。通过调用无障碍服务来判断模板是否符合条件,从而保证每个模板发布都支持无障碍。添加无障碍验证检查点是无障碍工作中最关键的部分。目前手机淘宝的核心链接使用的是DinamicX,而DinamicX模板都是在组件平台上开发的,所以我们只要加上这个checkpoint,你想支持accessibility就不用支持了,否则你的动态模板不会发表。具有无障碍checkpoint功能的DinamicX开发模式流程图:目前无障碍checkpoint检查相关的规则(也加入了一些检查规则来平滑两端的差异):非交互控件,如ImageView,对于FrameLayout、LinearLayout等,如果设置了onTap属性,会检查是否包含accessibility属性。如果没有,则验证失败,并给出提示:需要设置accessibility=on,开启无障碍焦点,同时设置accessibilityText=xx属性。对于非交互控件,如ImageView、FrameLayout、LinearLayout等,如果设置了accessibility=on,则必须同时设置accessibilityText=xx。在设置子View的onTap属性时,必须保证其父Layout没有设置accessibility=on,否则子View无法获得焦点。如果Layout设置了auto属性,TextView不能只设置onTap,还要设置accessibility=on,否则得不到焦点。无法使用动态表达式设置可访问性属性。假设在Layout节点设置了onTap点击事件,那么验证checkpoint会提示节点需要设置无障碍信息:这个阶段所有核心页面如首页,详情,购物车,我的淘宝,订单详情,和订单清单开发的模板将通过此卡口进行验证。愿景也许我们做的不一定是最好的,但我们会一直努力去做,不为别的,只为让手机淘宝不仅是一个购物APP,更是大众心中好用的APP,尤其是盲人。一个有温度的产品,一个能动盲人的产品。希望有一天我们开发同学开发模板的时候,不再需要弹出卡口的验证,但是在写模板的那一刻,他们已经想到了那些拿着手机听的人。希望有朝一日手购物能成为盲人心目中最喜欢的购物产品。希望有朝一日看到这篇文章的同学们的内心会有所触动。这不是道德绑架,而是盲人在未来的某一天谈论手机购物时,由衷的感激能给他们的心灵带来的安慰。希望哪天看到这篇文章的同学能感受到无障碍是一种公益。做完之后,心里暖暖的。科技除了有价值,还可以有温度。关注无障碍公益,从我们做起!