写点什么

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

  • 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:06981

评论

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

2023我的前端面试小结

loveX001

JavaScript

实现一个简单的Database9(译文)

GreatSQL

sqlite greatsql greatsql社区

被流量和热度裹挟,自媒体行业必须坚守职业道德

石头IT视角

Shell分支语句

圆弧

分支 条件 shell脚本

前端必会面试题

loveX001

JavaScript

Vue.$nextTick的原理是什么-vue面试进阶

bb_xiaxia1998

Vue

一个容器,但是一整个k8s集群

newbe36524

C# Docker Kubernetes

A-Ops性能火焰图——适用于云原生的全栈持续性能监测工具

openEuler

Linux 运维 操作系统 定位 性能监控

产品的可持续发展

ShineScrum

产品 产品负责人 产品的可持续发展

零基础入门AI?先来把机器学习捣鼓明白吧

博文视点Broadview

高级前端二面vue面试题(持续更新中)

bb_xiaxia1998

Vue

vivo 自研Jenkins资源调度系统设计与实践

vivo互联网技术

运维 jenkins 资源调度

KMP算法详解

javaadu

数据结构 字符串 KMP

架构实战营-模块一作业

🐢先生

架构实战营

前端react面试题(边面边更)

beifeng1996

React

老生常谈React的diff算法原理-面试版

beifeng1996

React

FL Studio2023最新版本音乐编曲制作软件

茶色酒

FL Studio2023

为什么用元空间替代永久代?

王磊

java面试

前端react面试题指南

beifeng1996

React

Vue的computed和watch的区别是什么?

bb_xiaxia1998

Vue

焕新启航,「龙蜥大讲堂」2023 年度招募来了!13 场技术分享先睹为快

OpenAnolis小助手

直播 开源社区 龙蜥大讲堂 机密计算 月度主题

2023-02-12:给定正数N,表示用户数量,用户编号从0~N-1, 给定正数M,表示实验数量,实验编号从0~M-1, 给定长度为N的二维数组A, A[i] = { a, b, c }表示,用户i报

福大大架构师每日一题

算法 rust 福大大

问:React的setState为什么是异步的?

beifeng1996

React

1行Python代码去除图片水印,网友:干干净净!

程序员晚枫

Python GitHub 开源 去水印 自动化办公

为什么补码是取反加1?

Dinfan

三次握手与四次挥的问题,怎么回答?

loveX001

JavaScript

promise执行顺序面试题令我头秃,你能作对几道

loveX001

JavaScript

用Docker搭建更酷的本地开发环境

致知Fighting

Java Docker Linux 后端 开发

百度前端常考vue面试题(附答案)

bb_xiaxia1998

Vue

软件测试/测试开发 | Web自动化之显式等待与隐式等待

测试人

软件测试 自动化测试 测试开发 web测试 web自动化

写给go开发者的gRPC教程-拦截器

凉凉的知识库

Go 微服务 gRPC http2

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