• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com专业计算机教程网站
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure
您的位置:首页 > 网页设计 >心得技巧 > 为了让残障人士方便使用产品,腾讯设计师总结了这7个设计方法

为了让残障人士方便使用产品,腾讯设计师总结了这7个设计方法

作者:腾讯CDC 字体:[增加 减小] 来源:互联网 时间:2018-08-23

本文主要包含Accessibility,无障碍设计,腾讯CDC等相关知识,腾讯CDC希望在学习及工作中可以帮助到您

「信息无障碍」译自「Accessibility」,指的是任何人在任何情况下都能平等、方便、无障碍地获取信息并利用信息。以互联网环境为例,互联网产品可以被老年人、视障者、听障者、读写障碍人士等用户顺利使用。

近年来,随着互联网的快速发展,很多人已经开始广泛使用电子政务,政府也越来越多地以在线方式向大家提供信息和服务。据国家统计局和残疾人联合会数据显示,我国65岁及以上的老年人1.4亿,残疾人士有8502万,分别人数为:视力残疾1263万人;听力残疾2054万人;言语残疾130万人;肢体残疾2472万人;智力残疾568万人;精神残疾629万人;多重残疾1386万人。目前我国31个省、276个地市、1197个县级的残联都开通了网站,积极推动残疾人证智能化工作,发展「互联网+残疾人服务」。为了让残障人士能无障碍地使用电子政务,给他们提供更便捷、高效的服务,政务网站的无障碍建设尤其重要。网站构建的所有内容都应该尽可能具有包容性,易读性和可读性,为每一个人设计,为每一个人服务。

一、残障人士分析

信息无障碍涉及广泛的残疾类别,包括视觉、听觉、身体、语言、认知、语言、学习以及神经残疾。我们可能无法满足所有类型、程度和多重残疾人群的需要,但可以对占比基数较多的特殊人群开始分析研究。

1. 视障人士

  • 低视力,由于各种原因导致双眼视力障碍或视野缩小,难做到一般人所能从事的工作、学习或活动;
  • 色盲,分为全色盲和部分色盲(红色盲、绿色盲、蓝黄色盲等),不能分辨各种颜色或某种颜色;
  • 色弱,包括全色弱和部分色弱(红色弱、绿色弱、蓝黄色弱等),能看到颜色,但辨认颜色的能力迟缓或很差;
  • 失明人士,眼睛患有疾病或受到意外伤害而导致双目失明。

2. 听障人士

双耳听力丧失或听觉障碍,听不到或听不清周围环境的声音,包括全聋、重听、听力弱化等人士。

3. 运动障碍人士

这里主要指手部不灵活或需要使用辅助设施的人士,也包括在某些环境下,不能正常通过手部操作的人士。

4. 读写障碍人士

一种最常见的特殊学习困难,阅读方面会跳字漏行、增字、替换字、倒反念,或无法理解阅读内容混淆相似字。

5. 老年人

会出现身体机能下降、记忆力减退、视力下降等特征。

一个网站如果全站做到信息无障碍需要花费很多时间,进行很多研究和用户测试才可以完成,但我们可以分阶段逐步去推进改造,例如先从整个网站的颜色对比度开始入手,解决低视力人士的问题。

二、为低视力人士设计

使用良好的颜色对比度

确保颜色对比度符合 WCAG 2.0(内容无障碍指南)标准,是信息无障碍中非常重要的一步。如果我们在设计当中做到这一点,也可以保障低视力人士能更好地获取信息。

根据 WCAG 2.0 的标准:

  • 对比度(AA 级): 文本的视觉呈现以及文本图像至少要有4.5:1的对比度;
  • 大文本: 大号文本(字重为 Bold 时大于18px,字重为 Regular 时大于24px )以及大文本图像至少有3:1的对比度;
  • 对比度(AAA 级): 文本视觉呈现以及文本图像至少有7:1的对比度;
  • 大文本: 大号文本(字重为 Bold 时大于18px,字重为 Regular 时大于24px )以及大文本图像至少有4.5:1的对比度。

在附属内容中,未激活的界面组件、纯粹的装饰、文本作为标志或品牌名称的一部分,这些情况都没有最低对比度限制。

WebAIM 可以帮助我们测试对比度,并且可以在线调整符合标准的颜色

Contrast Grid 可以测试多个颜色组合是否符合 WCAG 2.0 的对比度标准

使用 Contrast Grid 测试了两个国内省级政务服务网站的颜色,发现基本上只有主要文字和次要文字的颜色能达到标准,用于网站上大面积的品牌蓝色(链接色)在大于18px字号下才符合对比度要求。

英国政府网是目前全球数字政府中做的最好的政务网站,在英国,政务服务是所有服务里面使用时间最久、提供量最大的服务。他们网站设计也很注重信息无障碍,在这方面付出了很大的努力。

检测后发现英国政府网使用的颜色都有足够高的对比度,满足了 WCAG 2.0 的标准,而且整体颜色都使用了偏低饱和度和明度的颜色。加强颜色的对比度,不只是为了让低视力人士能更好地使用我们的产品,同时也可以让使用较差显示设备的用户、老年人有更好的产品体验。

三、为色盲色弱人士设计

避免仅使用颜色传递信息

颜色在设计中起着重要作用,能唤起情感,感受和想法,并且可以帮助增强品牌的信息和感知。然而,当用户无法看到它们或以不同方式感知它们时,颜色的作用就会消失。对于无法辨别颜色的色盲色弱人士,如果只用颜色作为传达信息,提示信息重要性或区分视觉元素的唯一途径,他们是很难感知的。

Stark(Sketch插件)可以模拟不同类型的色盲色弱人士所看到的效果,来帮助我们设计。

某个政务网站上的注册表单,在没有填写任何信息的情况下点击注册按钮,必填项出现的错误提示是在下方用了红色的文字,这种方式对于普通用户来说是可以感知的。右侧图则是模拟红绿色盲人士看到的效果,这种情况下,错误提示的引导性就会降低很多。

英国政府网的错误提示对于色盲色弱人士就友好很多,除了红色的提示文字外,输入框的边框还会加粗处理,并且加上竖线提示对应没填写的表单项,提醒用户注意。除此之外,其实还有很多视觉处理的方法来达到传递信息的目的,例如在输入框内或者提示文字前加上感叹号的图标,这种方式对于普通用户来说,也会有更明确的提示。

四、为失明人士设计

1. 支持键盘导航

网站支持键盘导航是无障碍很最关键的一个方面,无障碍指南中提到要使所有功能都能通过键盘来操作,对于依赖于屏幕阅读器的失明人士和没有精确肌肉控制的人士,都需要使用键盘来导航内容。

当你浏览网站时,整个页面导航顺序应该是有逻辑,可预测和直观的。选项的顺序应该遵循规则:从左到右,从上到下,由顶部导航到内容区,最后是页脚。

我们可以尝试只用键盘操作来测试网站,使用 Tab 键移动焦点,用 Enter 键选择元素。测试所有的交互元素是否可预测且有序。如果可以在没有鼠标的情况下浏览整个网站的所有内容,证明这个网站已经满足了支持键盘导航的基本要求。

下图是国内某个政务网站首页的导航区,标注的数字是获取焦点的顺序,在用键盘导航的过程中,整个页面导航顺序都比较混乱,某些元素也无法通过键盘来获取。

相反,英国政府网和澳大利亚政府网首页的导航逻辑就会比较清晰,整个网站遵循从左到右,从上到下的原则,每个交互元素都可以通过键盘来获取,让用户感知到整个网站的布局,确定每个内容的位置。

用户通过 Tab 键导航网站交互元素时,焦点就是提供了当前所选组件的可视化指示,焦点可帮助用户了解界面上哪些元素有键盘焦点,并帮助他们了解导航网站时的位置。很多网站都是用了浏览器默认的焦点样式,但我们也可以根据内容设计出符合网站风格,与品牌相呼应的焦点样式。

英国政府网就是重新设计了焦点样式,使用黄色来突出焦点,让用户更明确当前焦点所在位置。根据不同的元素,样式也会有所变化。

苹果官网的焦点样式也进行了重新设计,在圆角输入框上焦点也做了相应的调整,使焦点和页面元素更为融合。

2. 为非文本内容添加替代文本

视障人士经常会利用屏幕阅读器来「聆听」我们的网站,网站上的文字、图片、组件等信息都是通过屏幕阅读器说出来。这时候如何为这些非文本内容添加描述准确的辅助替代文本就非常重要。

以下图为例,左图搜索框按钮的替代文本为「按钮」,这种描述就会很抽象,增加了视障人士的理解门槛,容易让他们产生一个疑

您可能想查找下面的文章:

  • 为了让残障人士方便使用产品,腾讯设计师总结了这7个设计方法

相关文章

  • 2017-08-060.1秒的价值!浅谈Web前端页面提速问题
  • 2018-08-23设计水平没有大的进步,原来是这9个方面做得不好…
  • 2018-08-23Adobe 出了一个超厉害的人工智能黑科技,美工可能要失业!
  • 2017-08-06form表单中的Input使用disabled不能提交的解决方法
  • 2017-08-06你知道url中的特殊符号含义么(比看篇)
  • 2018-08-23「区块链」和秃顶的设计师们
  • 2017-08-06让你了解HTML及资源是如何加载的
  • 2018-08-23Google对话式交互规范指南(六):用户对话中的自然惯例
  • 2018-08-23成功入职谷歌后,说说我是如何通过2次面试并收到 Offer 的
  • 2018-08-23饿了么高级设计师:界面视觉设计 5 要素

文章分类

  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure

最近更新的内容

    • 如何设计令人“上瘾”的产品? 从这3个方面出发!
    • 为了让 iPhone X 更好浏览网页,我给网页加了个导航按钮
    • 在这个火热的8月,正在流行这3种网页设计趋势
    • 4000块的薪水已经三年没涨了,我现在慌的一批…
    • HTTP返回码大全(中英解释)
    • 我们请了9个顶尖设计师,询问他们是如何开始创作的
    • 这篇分析iPhone X 转角细节设计的文章,收获了15000+个赞
    • 从景观到 AI 产品,这个设计师自己开发了一个「招行版鲁班」!
    • 网页制作常用英文字体
    • html 左中右自适应布局(使用calc css表达式)

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有