赞助商
立即赞助

掌握这7个原则,帮你快速提高产品的可访问性

产品经验3年前 (2021)发布 流光
1.8K 0 0

周日的时候看了徐峥的电影《我是药神》,电影很走心,很现实,反正我是看哭了。现在的人,全感缺失,有一分原因可就是看起病。现如今,很多人还没享受到该有的社会福利,在阳光照到的角落里,犹如被抛弃,冷的瑟瑟发抖。

还得前段时间看到的一个苹果宣传,《Apple不为数人,也不为少数人》,感动不少人。看完电影,不自的想到苹果的个宣传,总得苹果所帮助的群,跟《我不是药神》中所展现的小众群,很是类似,所以今天的文章也是应吧。篇文章,讲的就是要为所有人设计,让设计也能够照顾到容易被忽视的小众人群。

掌握这7个原则,帮你快速提高产品的可访问性

数字产品可访问性是指构建可供广泛人群使的数字容和应的实践,包括具有视觉,,听觉,语言或认知障碍的个人。

使网站为所有人设计,被人度神,认为样做既困难成也高,但际上并非此。从设计初期就开始考虑产品访问,其并不增加额外的功能或内容,因此也不应该有额外的成和努力。

但是,要修复一个已经无法访问的网站可能就需要费一番力了。 以前在 Carbon Health 工作,使用 AXE 插件来检查了网站的可访问性。 发现仅在主页上就28个违规行为需要解决。 虽然听起来复杂,但发现这些问题并不难以纠正,只是需要花费一些间和成本来研究这些问题,最后差不多功夫就全部解决了。

我想分享些我们曾用过简单步骤,来改善你网站可访问性。这些原则将侧于网站和移动端。

始之,先谈谈什么这些优化很重。

一、为什么设计需要考虑可访问性?

作设师,我们能力责任确保每人都能访问我们设的内,无论其能力,背景或使用场景如何。 好产品可访问性可以每人好的体验。

美国有超过5600万人(五分之一)和全世界超过10亿残疾人。 在2017年,有814起可访问性诉讼在联邦和州法院起。仅这两项数据就可我们相信设计可性的重要性。

访问还有一个很的业案例:研究表明,访问的网站有更的搜索结果,能够覆盖更的受众,对 SEO ,下载时间更快,同时还鼓励使用更的代码结构,他们也总是有更的用。

以下讲的7个方面是容易做,可以帮助你的产品更近足 Web 内容可访问性规范(WCAG 2.0)AA标准。同建议最好也去研究下最常用的辅助功能——包括屏幕阅读器,屏幕放大器和语音识别工。

1. 增加足够的颜色对比度

掌握这7个原则,帮你快速提高产品的可访问性

△ 对 Guadalupe 来说,按钮具有更的彩对比度将更易阅读。

颜色对比是一个经常被忽视的 Web 可访问性问题。 如果对比度低,弱视的人难从背景颜色中读取文本。 在关于视力损伤和失的情况说书中,界卫生组织(WHO)估计有2.17亿人患有中度至重度视力障碍。 因此,考虑文本和背景之间的充对比是至关重要的。

根据 W3C 规定,文本与其背景比度应该至少为4.5比1(符合AA级)。于较大和较体,比率相宽泛些,为它们在较低比度下也能容易阅读。 比如使用体为18pt或14pt粗体,则最小比度将降至3比1。

些具可以帮速检查。 如果使用的 Mac,建议使用对比应用(https://usecontrast.com),使用此具可以使用颜色选择器立即检查对比度。 如果您获得详细的分数,我建议您 WebAIM 颜色对比检查器输入颜色。 此具将算常规较文本,得出级别(A,AA,AAA)的分数。可以改颜色并实时查看结果。

参考资: WCAG Visual Contrast

2. 仅使颜色来区分键信息

掌握这7个原则,帮你快速提高产品的可访问性

△ 对 René ,当图形对色盲患者友好时,他会感到很!

当你在传达重要的事情、响应作或示时,要把颜色作为唯一的视觉线索。弱视或色盲的人可很难解你的容。

尝试使用颜以外的符号,例文标签或图案。 在界面上显示错误时,不要太依赖颜,添加图标或在消息中写上一个标题。 考虑为段落中的链接文添加视提示(字加粗或增加下划),以便链接能突出显示。

如果只使用颜色来数据,那有更复杂息(如柱状图和曲线图)的素就别难阅读。使用其视觉素来传达息,如形状、标签和大。还可以尝将多种模式进行组,以使差异更显。Trello 的色盲模式就是一个好的例。启用后,通过添加纹理标签能让网站变得更容易访问。

个很好技巧是将你设计内容以黑白模打印出来,看看你是否仍然可以理解其所有内容。 你可以使用 Color Oracle 这样应用,它可以实时显示具有常见色觉障碍看到内容。 这些提示可帮助你确保站信息障碍与颜色关。

参考资料:WCAG Visual Contrast Without Color

3. 设可用焦点状态

掌握这7个原则,帮你快速提高产品的可访问性

△ Tyler 假手可以轻松切换按钮焦状态

否注意到时会出链接,输入框按钮周围的蓝色轮廓? 这些蓝色轮廓称焦点指示符。 默认况下,浏览器使用 CSS 伪类元素选中时显示这些轮廓。 可能会发这些默认焦点指示符不很漂亮,然后一门思的隐藏掉它们。 但,如果去掉了这些默认样式,请务必将其替换其他内。

焦点指示符可帮助人们了解哪个元素具有键盘焦点,并帮助他们在浏览点时清楚自己的位置。 这些都是对盲人,需要屏幕阅读器,行,受过腕管损伤及这种导航的级户有的技术。甚至我们中的一些人会使键盘作为他们浏览页的要方式。

应该以聚焦的元素有:链接,表单字段,小部件,按钮和菜单项。 他们需要有一个焦点指示符,使它们看来与周围的元素不同。

你可以计一个符你网站风格的焦点指示符,并你的品牌保持风格一致。 创建一个高度可见的状,并有良好的对比度,使得它从其内容中脱颖而出。

参考资料:W3C Focus Visible

4. 在表单和输入项添加标签和说明

掌握这7个原则,帮你快速提高产品的可访问性

△ Mr. López 不断尝将占位符文本转换为列表项标签

仅使用占位符文本作为标签是设计表单时最大误。 位有限或想让设计更简单和现代时,我们可能会想要应这趋势。 占位符文本常是灰色,比度不高,此很难阅读。 如你像我样,你常会忘记你在写什么,所以旦文本消失,很难知这些段是什么。

使用屏幕阅读器的人通常使用 Tab 键浏览表单以跳过表单控件。 依赖<label>元素读取控件, 通常会跳过任何非标签文本(如占符文本)。

掌握这7个原则,帮你快速提高产品的可访问性

始终帮人们了解他们应该什么,并以一种明确的形式给出。好标签不会消失,即使这人输入信息;人们不应该失去他们的写作背景。当设师他们的表单中隐藏描述时,其实牺牲了可用性追求简洁。

这种做法并意味着你必须必要的信息来混淆你的设计,只是确保供必要的线索。太多的指导性本可和太的问题一样。目标是确认每个人有足够的信息来成他们的任务而没有障碍。

参考资料:WebAIM Creating Accessible Forms

5. 为图和其他非文内容准备有用的替代文

掌握这7个原则,帮你快速提高产品的可访问性

△ Robin 在图片中发现了一个的友

弱视的人经常用屏幕阅读器来「听」网页。工具将文转换成语音,样人们就以在网站上听到单词。

有种方法可以显示替代文本:

  • 在图的属<alt>中;
  • 在图片本身的背景或环中。

尝试描述图中生的情,以及它对故的重要,而不仅仅是说「图」。

如果图片纯粹是装饰性的,或者由于上下文已经解释了内容而变得多余。 尝添加一个空的<alt>属性将使屏幕阅读器跳过它。 如果不写任何替代文字,一些屏幕阅读器将读取文件名,这的用户体验会糟。

谷歌正在研究图像幕工智能,它能以94%准确度描述照片(https://petapixel.com/2016/09/23/googles-image-captioning-ai-can-describe-photos-94-accuracy)。 这个模型是开,仍在研究,希望我们能看到它在不品使用。 与此时,我们应该在我们内容手动添加描述图像含义和功能文本。

参考资料:W3C Using Alt Attributes

6. 内使用确的标记

掌握这7个原则,帮你快速提高产品的可访问性

△ Noah 想成为名筑师

标题,标记内始的方。它们给文本加的标签,用义其风格目的。标题还创建了页面内的层次结构。

大字号的标题有助于读者更好地解容的顺序。 同样,屏幕阅读器使标题标签来阅读容。 这样,弱视的人通过阅读容中的每个标题来获得页面的大致容。

在开站点时使用适当的结构元素很重要。 HTML 元素向浏览器传达它们包含的内容类型,浏览器应何呈现或处理内容。 页面的组件和结构形成内容树。 读取内容树是屏幕阅读器的强大功能,它们被盲人使用,使得他们以「听」页面内容。

不正确使用标记会响可访问性。不要仅将 HTML 标记用于式效果,屏幕阅读器通过标题结构(真正的标题,而不仅仅是大字号和粗体式的文本)按层次结构浏览网页。 使用你网站的用户可以收听所有标题的列表,按标题类型跳转内容,或直导航顶标题<h1>。

(译者注:以前我写构代码时候,困惑个问题,h1-h5标签除了自带样和利于 SEO 等作用,有什么其他用途?看了本文才知,原来有帮助盲听书这么要作用。)

参考资料:WebAIM Semantic Structure

7. 支持键盘导航

掌握这7个原则,帮你快速提高产品的可访问性

△ Gael 在听网站时候使用键盘导航

键盘可访问性 Web 可访问性的关键方面之一。 运动障碍的人,依赖于屏幕阅读器的盲人,精确肌肉控制的人,甚至高级用户都依赖键盘导航内。

如果你像我一样,经使键盘上的 Tab 键来浏览页上的交互元素:链接,按钮或输入项。 我们前面讨论的焦点状态供了当前择的组件的可视指示器。

当你浏览页面时,互元素的顺序很重要,导航必须有逻辑且直观。 选项卡顺序应遵循页面的阅读顺序:从左到右,从上到下—— 标题,主导航,内容按钮和输项,最是页脚。

一个好的做法是仅使用键盘测你的网站。 使用 Tab 键选择链和表。 使用 Enter 键测以选择素。 验证所有交互式组件是否可控且有序。 如果你可以在没有鼠标的情况下浏览所有网站,那你的网站就做的棒了!

最后,并不要。请注意导航大小——括链接数量和文本长度。 于有运动障碍来说,过长菜单进切换可能会很困难。 于使用屏幕阅读来说,听冗长链接可能很麻烦——尽量保持简洁。 提供 ARIA Landmarks 或 HTML5结构元素(如<main>或<nav>)将使导航更容易。

参考资料: W3C Keyboard

二、超越这些准则

这七条准则一很好的始,如果多的事使的产品易访问,我鼓励去以下一些事:

确立一个可访问性审查制,使审查制来确定你的产是否与辅助技术兼容并符合 WCAG 2.0 AA 级别标准。使审查结果修复问题并进行再次测试。

任命审查。 你以任命你司的人做经常的无障碍审查,以是你的 QA 团中的某个人。果找不到有经验的人,你以雇佣一个外部供应来做。

让可访问性成为你计研究的一部。 在做研究,验证你关于可访问性的假是否正确,以及是否存在任何改进的潜在机会。招募残疾人可能需要做更多的工作,请毫不犹豫地系协会和社,人愿提供帮助。

总结

如以上所述,个指导则将帮助你的 web计更近于足 web 内容可访问性指导方针 AA别标准(https://www.w3.org/TR/WCAG21)。

我正在努力改进可访问性设计, 也正在努力练习我讲到东西。 我曾经认为它太难了并也不视。 其实我误解了, 如今我邀请你我起,将可访问性设计加入到设计流程,并继续讨论可访问性要性。

作设师,我们责任倡导无障碍设。了它,我们使技能所人服务,不他们的能力、济状况、龄、教育或域。

做有责任感的设计师。

原者的文章题目是:《Designing for accessibility is not that hard》,意思是《为访问设计没有么难》。其我一开始是有把访问和用混淆的,面查相关资料,才现确是2个不同的概念。所以想在文末释下用和访问的区别。

可用性:产品是否容易上,用户能否完成任,效率如何,以及这过程中用户的主观受可好,是从用户的角度来产品的质量。可用性好味着产品质量高,是企业的核心竞争力。

可访问性:Web 内容于残障用户可阅读和可理解性。

  • 无论用户是否残障,都得通过用户代理(User Agent)来访问 Web 内容。因此要提高可访问性,首先得考虑各种用户代理 :面浏览器、语音浏览器、移动话、车载个人脑等等。在 Google, 专门聘请了一些残障雇员,来帮助提高产品的可访问性。
  • 考虑用户访问 Web 内容时环境限制 。比如:嘈杂环境、过暗或过亮房、或者是免提等各情况。这是更高层可访问性要求,做到了,能造品在特定领域核心竞争力。

想进一步深入了解的话,有篇文章也可以推大家,可用性和可访问性之间的差异是什?→《可用性和可访问性之间的差异是什?》

原文链接:《Designing for accessibility is not that hard》  Pablo Stanley

欢迎关注译者的微信公众:「 彩云译设计

掌握这7个原则,帮你快速提高产品的可访问性

图片素材作者:Anastasia Zhenunk

© 版权声明
您必须登录才能参与评论!
立即登录
暂无评论...

相关文章

今天的文章不长,但是干货还是不少的。对于数据可视化,我觉得在设计原理上其实是相通的,都是为了更好的传达信息。所以,同...
信息可视化
阿里巴巴菜鸟裹裹中的「不打扰式」提醒 菜鸟裹裹APP中的通知设计,我称它为「不打扰式」通知,现在一般的产品为了促进用户活...
交互设计
前一阵收到一位朋友的咨询,题目很简单直接: 产品提案要从哪几个方面准备?怎么样可以在这几个方面有较好的准备? 我理解这...
产品提案
我是一个有8年工作经验的「老」交互设计师,一直想写一些设计类的文章给大家看。今天开始,我准备写一个大型设计类专题,内容...
交互设计
问题:设计师怎么样才能在产品中为用户塑造「惊喜感」呢? 解答:你觉得,人和人交往的行为模式,能够被复刻到人和其他事物...
产品
通过对支付宝的研究与观察后,笔者看到了支付宝推出的一个「笔笔攒」功能,并对其中的用户体验细节进行了研究与分析。 支付...
产品细节
小贴士:下沉市场:三线以下城市、县镇与农村地区的市场 先来了解一个背景:为啥近几年下沉市场这么火,家家户户都在努力争...
下沉市场
Persona,在国内通常被称为「用户画像」,其概念最初由 Alan Cooper 在 1999 年提出[1]。由于用户画像具备帮助人们在设计过程...
产品设计