写点什么

与你同行,才能无障碍 (二)

  • 2019-12-18
  • 本文字数:1296 字

    阅读完需:约 4 分钟

与你同行,才能无障碍(二)

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


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


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


1.图片可以“听到”


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


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


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


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


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

淘宝的无障碍设计规范


手机淘宝无障碍设计准则


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


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


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


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


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


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


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


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


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


5.辅助机制的一致性


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


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



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


与你同行才能无障碍


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


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


本文转载自淘系技术公众号。


原文链接:https://mp.weixin.qq.com/s/BpOKNVMVATANRJv2dTrMcQ


2019-12-18 16:06804

评论

发布
暂无评论
发现更多内容

大专学历通过大数据培训好找工作吗?

小谷哥

学历通过大数据培训学习合适吗?

小谷哥

Etcd API 未授权访问漏洞修复

TiDB 社区干货传送门

监控 实践案例 故障排查/诊断

文盘Rust -- 把程序作为守护进程启动

TiDB 社区干货传送门

开发语言

4步消除漏洞积压

SEAL安全

漏洞修复 软件供应链安全 漏洞管理 11月月更

COSCon'22 第七届中国开源年会圆满落幕

腾源会

开源

软件测试 | 测试开发 | 工作多年,技术认知不足,个人成长慢,职业发展迷茫,该怎么办?

测吧(北京)科技有限公司

测试

java培训学习后怎么样

小谷哥

TiDB上云之TiDB Operator

TiDB 社区干货传送门

集群管理 TiDB 底层架构 管理与运维 数据库架构设计

使用Online unsafe recovery恢复v6.2同城应急集群

TiDB 社区干货传送门

实践案例 集群管理 管理与运维 数据库架构设计 6.x 实践

GPU服务器到底有什么作用?

Finovy Cloud

云渲染 GPU渲染 云渲染平台

Vue.nextTick核心原理

yyds2026

Vue

解读Vue3模板编译优化

yyds2026

Vue

聊聊Vuex原理

yyds2026

Vue

深度解读Webpack中的loader原理

Geek_02d948

webpack

用低代码平台搭建低代码平台

iofod jude

我偷偷学了这5个命令,打印Linux环境变量那叫一个“丝滑”!

wljslmz

Linux 运维 环境变量 11月月更

手写一个webpack插件

Geek_02d948

webpack

武汉web前端培训学习前景如何

小谷哥

对比四大智能合约语言:Solidity 、Rust 、 Vyper 和 Move

One Block Community

区块链 程序员 编程语言 Solidity Move

文盘Rust -- 起手式,CLI程序

TiDB 社区干货传送门

开发语言

如何通过机器学习赋能智能研发协作?

LigaAI

人工智能 智能化 LigaAI 研发协作平台 亚马逊云科技

Spark+ignite实现海量数据低成本高性能OLAP

张磊

大数据 spark 分布式数据库 Ignite 内存计算

干啥啥都行,这次又拿了第一名!

青藤云安全

网络安全 主机安全 青藤云安全

看直播,领报告 |《勒索软件的认识与防御指南》最新发布!

青藤云安全

网络安全 勒索病毒 主机安全 勒索 青藤云安全

基于OpenHarmony L2设备,如何用IoTDeviceSDKTiny对接华为云

华为云开发者联盟

云计算 华为云 企业号十月 PK 榜

在web前端学习中如何学习知识点

小谷哥

破局 NFT 困境:实用型 NFT 是什么?

TinTinLand

区块链 NFT 元宇宙 web3

记一次TiDB数据库报错的处理过程

TiDB 社区干货传送门

管理与运维

佛萨奇1.0 2.0矩阵公排项目系统开发详情

开发微hkkf5566

固定QPS异步任务功能再探

FunTester

与你同行,才能无障碍(二)_文化 & 方法_淘系技术_InfoQ精选文章