与你同行,才能无障碍

简介: 手淘技术团队——科技有温度,我们一直在路上。

image.png

作者|隐钰、渡冲
出品|阿里巴巴新零售淘宝设计部&淘系技术部

先给大家分享一个笔者的真实故事。前阵子她被诊断得了急性结膜炎,医生切切叮嘱 72 小时里多闭目养神不能目视任何自光源体,“尤其是电脑和手机!”医生特地关照了一句。

她好不容易挪回家,想起一整天未能进食,作为淘宝无障碍小组的一员,她知道可以用苹果 iOS 系统自带旁白功能来读屏(通用-辅助功能-“旁白”)。结果第一次作为“视障用户”的她,一进「饿了么」,就被大波优惠券浮层淹没,只听得此起彼伏的“优惠券优惠券…”但不知是什么优惠,更找不到“关闭”入口。划拉半天,连「首页」也没能进去。

image.png

饿了么的优惠券弹层

无障碍是互联网的“基础建设”

我们的生活越来越依赖互联网。出门不带钱包、打电话用微信、要打车用滴滴…信息集中流通的同时也限制了多样化的信息传达渠道。而现有互联网的信息传达中, 80% 是依赖于视觉化语言。当我们失去视觉,缺乏“基础设施”的互联网都会成为正常生活的黑洞。

在中国约有 2 亿的障碍人群,其中视障人群约有 1400 万,包括 500 万视盲人群以及大部分的后天视力受损人群。在老龄化趋势日益显现的大城市中每年有约 50 万老年人成为视力障碍者。而在视力正常人群(20~40岁)的日常生活中,患上损伤视力的眼科疾病的几率约为 4-5% ,也就意味着,在 20-40 岁间即使你先天视力完好,也会遭遇至少1次这样的“黑洞”。

image.png

国内视障群体状况分布

「网购」是视障人群的硬需求

视障人群,无论是暂时还是长期的视觉能力缺失,在身体机能和认知能力的其他各方面都和常人无异。在 2018 年中国视障协会发布的报告里网络购物在上网的视障人群中需求占比 78% 。视障用户由于生理以及国内公共场所的无障碍设施不完备等原因,出行自由度受限,而网上购物可以提供更多自由选择的空间和时间容忍度,更应该成为解决视障者核心诉求的渠道。

image.png

网购视障用户的特征模型

视障用户和普通人一样会“心情不好就逛淘宝”,一样也有“刷刷刷+买买买”爽快剁手体验的期待,想要拥有一样的选择自由度,一样的多快好省。视障用户网购体验对标正常用户仍处在基线水准以下:普通视障者独立完成网购仍是件艰难的事,更妄论网购的多快好省,享受逛买信息浏览愉悦度等体验。体验可提升的空间巨大。

多角度技术解决方案完善手淘无碍化

image.png

淘宝技术工程师闭着眼睛做无障碍测试

在过去的一年中,手淘技术团队在以下三个方面不断完善了手机淘宝的无障碍建设:

1.图片可以“听到”

手淘详情页面接入 OCR 能力,也就是提取商品图片中的文字,帮助视障人群能够“听”到图片内容。该能力由“图像和美”团队提供后端算法支持。旨在解决商品详情中“图文”详情区域,“纯图片”控件无障碍文本缺失的问题。

2.增加“无障碍小助手”

无障碍小助手在手机淘宝中提供无障碍快速通道,帮助视障用户快速到达常用页面(充话费、领淘金币等)。旨在解决视障用户的一大痛点:多次切换焦点寻找常用功能入口。

3.信息无障碍纳入常态化

“手机淘宝”是中国第一个将信息无障碍纳入更新维护常态化流程的产品。在集团已有的无障碍工作基础上,我们与深圳无障碍协会保持高度合作。做到无障碍检查与修复的日常化。同时,针对目前广泛使用的 DinamicX 开发体系。我们在 DinamicX 模板编辑阶段就加入了无障碍检查。让无障碍能力成为了模板能力的一部分。

淘宝的无障碍设计规范

image.png

手机淘宝无障碍设计准则

手机淘宝从 2017 年开展全链路无碍化设计迭代以来,经历了多个版本多种类型的无碍化尝试,包括基础链路无碍化、双11双12会场设计无碍化以及智能小助手的淘内无碍化产品孵化。总结了以下五点对网络购物最为基础的设计准则:

1.用户记忆认知负担最小化

视障用户依赖记忆以及对大量手势的掌握来与手机或触屏产品交互,这本身就占用了大量的认知资源。设计师应该努力帮助读屏软件的用户来降低他们的对工具本身和界面的认知负担。

2.结构性导航体验的一致性

一致的结构性导航能够帮助视障用户快速建立对各类新进入页面的熟悉度和寻找信息的方式,从而降低学习成本和搜索有用信息的认知以及效率成本,并建立任务信心。

3.避免同一点多方向和维度的信息分布

按照我们之前讨论的视障用户的认知模型,多维度的信息关联方式对于视障用户是巨大的学习成本并且通常伴随信息理解的不确定性和不安全感,尤其是无法在脑中建立方位地图的先天视盲者。

4.页面内容结构的一致性

这是指页面内信息表达方式和顺序的一致性,这是对用户浏览信息舒适度、阅读连贯性和操作信心的保障。

5.辅助机制的一致性

指的是帮助用户操作、阅读以及完成页面的互动方式的一致性,例如:通过唤起菜单来提醒用户选择服饰的尺码,那么在各类物品详情页都最好使用类似表达的辅助菜单,来提升用户确认操作的可靠性。

在上述基本准则的基础上,淘宝的设计师也给出了手淘框架下每个可复用的功能性控件的无碍化设计规范-从点到面、以点带面地来持续推动和优化基础链路的无碍化。欢迎关注「淘宝设计」公众号,查看更多无碍化设计相关内容。

image.png

手机淘宝无障碍设计_基础控件设计样本

与你同行才能无障碍

“人生百年,试想谁能一生无障碍?”

淘宝的无碍化建设不是为了某个业务的 KPI ,而是为了每一位“特殊”的TA们,搭建最基本的、有安全感的信息化生活。期待更多的同学能够加入到「信息无障碍」,也希望这篇短文能帮助感兴趣的同学找到「无障碍」之路。期待与你同行,一起「无障碍」。

更多技术干货,关注「淘宝技术」微信公众号~
屏幕快照 2019-06-21 上午10.23.52.png

相关文章
|
2月前
|
SQL 关系型数据库 MySQL
《深入浅出:图解淘宝分布式数据库TDDL(及开源替代方案)》
本文图解+源码深度剖析淘宝TDDL分布式数据库中间件,揭秘其分库分表、读写分离与柔性事务原理,并横向对比ShardingSphere、MyCAT、Vitess、TiDB等主流开源方案,助你掌握分布式数据库演进脉络与选型策略。(239字)
|
2月前
|
SQL 弹性计算 供应链
年增50%门店,资源降本35%:「收钱吧·全来店」如何基于阿里云SelectDB重构餐饮数据底座?
全来店是收钱吧旗下数字化门店服务商,专注连锁餐饮SaaS。面对年增50%的万店规模挑战,其通过阿里云SelectDB Serverless重构数据底座,实现负载隔离与弹性伸缩,查询性能提升80%,成本降低35%,支撑全域实时经营监控与供应链精准核算。
274 2
年增50%门店,资源降本35%:「收钱吧·全来店」如何基于阿里云SelectDB重构餐饮数据底座?
|
4月前
|
人工智能 运维 安全
2026年阿里云GPU云服务器全解析:GPU卡规格、收费价格及使用场景指南
阿里云GPU云服务器(EGS)提供高性能、弹性可扩展的算力支持,覆盖模型训练、智能驾驶、图形渲染等全场景AI应用。2026年全新升级,涵盖T4、A10、V100、L20等多元GPU卡型,匹配不同算力需求。支持包年包月、按量付费、抢占式实例等多种计费模式,结合节省计划与智能调度,助力企业降本增效。广泛应用于大模型推理、计算机视觉、科学计算等领域,具备安全合规、高可用、易用性强、生态完善等核心优势,是企业数字化转型与AI创新的坚实底座。
|
消息中间件 Kafka
【赵渝强老师】Kafka生产者的消息发送方式
Kafka生产者支持三种消息发送方式:1. **fire-and-forget**:发送后不关心结果,适用于允许消息丢失的场景;2. **同步发送**:通过Future对象确保消息成功送达,适用于高可靠性需求场景;3. **异步发送**:使用回调函数处理结果,吞吐量较高但牺牲部分可靠性。视频和代码示例详细讲解了这三种方式的具体实现。
466 5
|
存储 算法 C语言
【C++入门到精通】C++的IO流(输入输出流) [ C++入门 ]
【C++入门到精通】C++的IO流(输入输出流) [ C++入门 ]
401 0
|
弹性计算 固态存储 NoSQL
阿里云服务器系统盘ESSD AutoPL、ESSD和ESSD Entry云盘有什么区别?如何选择?
阿里云服务器系统盘提供ESSD Entry、ESSD云盘和ESSD AutoPL三种类型,性能与适用场景各不相同。ESSD Entry云盘性价比高,适合开发测试;ESSD云盘分为PL0-PL3四个级别,适用于时延敏感或I/O密集型业务;ESSD AutoPL云盘实现容量与性能解耦,支持自定义预配置性能及突发性能,最高可达100万IOPS。选择时可根据实际需求与预算决定,经济型实例推荐ESSD Entry,高性能场景建议ESSD云盘或ESSD AutoPL。具体价格与参数可参考阿里云官方文档。
|
存储 搜索推荐 关系型数据库
ElasticSearch 详解
ElasticSearch 是一款优秀的开源搜索引擎,适用于大数据场景下的高效检索与分析。其分布式架构、实时搜索和灵活的数据分析功能使其能处理 PB 级数据量。相比 Solr,ES 在实时性、分布式架构和文档处理上更具优势。核心概念包括索引、文档、分片和副本等。ES 使用倒排索引实现快速搜索,区别于正向索引。与关系型数据库相比,ES 更适合非结构化数据和全文搜索。总结来说,ES 在电商搜索、日志分析等领域有广泛应用,未来有望带来更多创新。
729 19
一篇文章概括!状态码分别是什么意思?
一篇文章概括!状态码分别是什么意思?
1280 1
一文讲明白什么是市场调研
一文讲明白什么是市场调研
752 0
一文讲明白什么是市场调研
|
存储 边缘计算 安全
边缘计算在离线环境下如何保证数据安全性?
【7月更文挑战第13天】边缘计算在离线环境下如何保证数据安全性?
372 0