14种简单的方法,使您的网站更容易访问

在任何设计项目开始时,提升可访问性应该成为关键考虑因素并不是什么新鲜事。实际上,紧缩的预算和时间尺度通常可以提供使我们的数字产品完全可访问所需的大功能,或者被忽视或者被认为是“稍后要添加的东西”。

最终结果是,虽然广泛的可访问性最佳实践得以实现,但可访问性或包容性设计的许多更精细的元素往往被忽视。幸运的是,正如您将看到的,许多这些疏忽都可以通过最小的努力来解决。

仅考虑少数这些要点可能有助于增加一部分受众群体,使他们能够以他们原本无法做到的方式更好地与您的数字产品互动。

01.记住替代文字

在一个将视觉资产上传到互联网的世界,就像用咖啡开始新的一天一样平常 -仅Instagram估计每天会向其平台添加1亿张图像- 在向我们自己的网站和应用添加内容时,我们可以轻松忽略对图像和视频的替代文字的需求。

考虑可能使用屏幕阅读器消费内容的受众群体百分比;如果你像GOV.UK一样,你可能不适合29%的用户。选择视觉效果时,请务必考虑附带的替代文字,以便提供与页面上其他元素相关的上下文。您将为屏幕阅读器,以纯文本和加载状态失败的用户提供服务。

使用替代文字标签在设计文件中命名图像层将挑战您真正质疑您选择的图像的适用性,因为您将阅读它们的内容。

02.仔细考虑动画

Animation from Arche 68

Arche 68菜单带你旋转

那些华丽的视差网站你设计的GIF网站确实推动了网上讲故事的经历,但是有40%的40岁以上的人患有前庭疾病,你有可能让用户感到恶心和运动。动画过于沉重的疾病。该Arche 68首页菜单在动画排版中是一个惊人的实验,但即使是那些肚子最强的人在一两分钟的滚动后感觉有点晕眩。

要解决此问题,您可以考虑提供禁用滚动动画或提供静态替代方法来查看内容的选项。松弛提供隐藏动画图像和表情符号的选项,演示动作可以是可选的增强,而不是所有用户必备的功能。

03.想想其他语言

English and French text displayed, highlighting how line heights can have a huge impact when translating into different languages

在从英语翻译成法语并且线条高度紧密时,重音是重叠的

并非所有您工作的项目都要求将内容翻译成多种语言,但请记住,可访问性和包容性超出了满足视觉或听觉障碍的需求。

例如,在翻译成法语时,使你的行高过紧会导致各种问题,因为重音符(à,è,ù)等字符重音可能重叠并迷失,呈现完全不同的含义 - 例如一个='到'对比一个='有'。其他语言如阿拉伯语从右向左阅读,因此将对文本块的呈现方式产生重大影响,从而影响页面流的读取方式。

在为全球受众设计时,如果考虑到替代语言在设计过程开始时可以影响类型布局的无数方式,那么模板和设计系统就有更大的扩展机会。尝试用一种或两种替代语言模拟您的设计文件,看看他们是否能够经得起翻译;如果以后添加此要求,它会使事情变得更容易。

04.保持简单明了

鉴于估计大约1%的英国人口处于自闭症谱系,重要的是要考虑面子上的文字。 Emojis和古怪的copylines非常有趣并且有助于赋予品牌个性,但在处理严肃的主题时,用简单的英语写作将有助于消除用户的任何歧义,特别是在帮助他们做出重要决定时。请注意观众的多样性以及您打算阅读副本的语气,以保持您的信息。

05.使用简单的颜色和形状

Screenshot of Yahoo with Spectrum plugin for Chrome in action

适用于Chrome的Spectrum插件使您能够模拟不同级别的色盲

由于各种原因,形状和颜色非常重要,并且会对用户的体验产生巨大影响。当我们考虑自闭症谱,色盲和其他视觉困难时,您对颜色的选择在区分甚至识别时极具挑战性。

人们认为,对于自闭症患者来说,明亮和高对比度的颜色排列可能很难并且难以应对;他们的注意力很容易丢失,所以尽量使用简单的颜色和形状。同样,具有色盲的用户将严重依赖于对比色。全世界约有十分之一的男性和一百多名女性受到色盲的影响。红色和绿色,绿色和蓝色,蓝色和紫色以及绿色和棕色的选择可能很麻烦。

尝试使用像这样的颜色测试工具Chrome插件Spectrum。这使您可以分析网页并模拟色盲场景。你也可以用Userway的对比度检查器测试您的文本和背景颜色,看看它们是否符合WCAG 2.0 AA或AAA标准。

06.赋予用户权力

想象一下数字体验,让您有机会以最适合您需求的方式使用内容。通过哈利波特,你可以阅读这本书,看电影或听有声读物。这三种方法使粉丝能够以适合他们的方式欣赏故事,并包含那些耳聋,阅读障碍或视力受损的故事。

Reveal News通过一系列在线长篇文章,性虐待调查报道,精彩地做到了这一点强奸夜班 就是一个很好的例子。它提供了在同一界面中读取,观看或收听同一故事的选项。

下次你计划你的内容策略时,可能值得考虑它可以提供的多种方式,因为你不仅会使残疾人受益,你实际上会为所有用户提供更灵活的方式来享受你的产品。

07.提供多种选择

对于视力或听力困难的用户来说,沟通可能具有挑战性可能是用户听力障碍或耳聋并且需要选择以书面形式回复请求,或者他们有视觉障碍,在这种情况下,电话呼叫可能是优选的联系方式。提供沟通偏好对于成功应对面临这些挑战的人来说是一个非常重要的考虑因素,因此在设计下一个联系页面时请始终牢记这一点。

08.提供定制服务

我们很容易理解如何在线可视化品牌。有时您的品牌,排版和颜色可能不够或只是阻碍可访问的体验。理想情况下,您应该允许用户自定义其查看首选项,更改主题(亮/暗或颜色变化)和文本大小。

一个通过E-Check学习结论70%的网站可能违法,并且具有重大的潜在商业,公关或法律风险。有许多因素,但为用户提供可定制的体验可以帮助他们更好地可视化内容。

拿走导盲犬网站例如,用户可以在整个网站中更改文本大小,甚至可以更改颜色模式。众所周知,对比度对于具有视觉限制的用户非常重要,因此提供替代主题可能非常有用。

09.想想标签

Screenshot of Pinterest homepage

在尝试使用键盘进行Pinterest导航时,很容易迷失方向

超过50%的互联网流量现在来自移动设备虽然作为设计师,你很可能仍然配备键盘和鼠标,就像剩下的一半人口一样。在那些人口中,有很多人(估计有7%的在职成年人)具有“严重的灵活性难度”,使他们依靠键盘来导航计算机上的菜单和网页。这对设计的影响是双重的。

第一个问题涉及页面布局:用户可以按照您希望阅读内容的顺序通过页面使用键盘选项卡吗?有没有试过穿过Pinterest的砖石网格?由于焦点跳跃,几乎不可能找到你在页面流中的位置。

标签的第二个问题是焦点状态的实际视觉表示。大多数浏览器都具有开箱即用的默认焦点状态,但是像Smashing Magazine这样的网站已经付出了额外的努力来创建自己的风格,采用粗红色虚线而不是Chrome或Safari的通用浅蓝色框,这些都不起作用如果你的背景或按钮本身是浅蓝色那么好。

为了真正满足仅限键盘用户的需求,值得花些时间考虑设计系统或样式指南中的每个组件如何以聚焦状态出现,然后与开发人员一起在浏览器中完善这些组件。

10.别忘了机器人

人类并不是唯一阅读网站的人;机器人也一样。考虑一下语音控制的设备以及那些每个醒着的小时都会抓取网页的聪明的小型Google机器人。网站正在被许多技术扫描和分析,包括辅助软件。屏幕阅读器只是这种辅助软件的众多类型之一90%的人有不同程度的视力障碍

您的网站结构非常重要。内容和替代文本的格式是屏幕阅读器主要阅读的内容。考虑如何排序HTML以及内容流是否与您自己的网页视觉体验相匹配。

11.获取正确的行长度和文本量

需要参与才能吸引观众的兴趣,但在保持用户关注时,很容易忘记这些词语很重要。挑战是写得足以提供信息,同时保持阅读相当轻松的工作。大文本区域可能非常令人生畏。

这不只是关于你有多少文字;这是你展示它的方式,往往使阅读成为一些用户的挑战。文本的行长度可以帮助您。如果一行文字太长,读者的眼睛将很难聚焦,因为线条长度使得难以测量线的开始或结束位置。在大文本块中继续使用正确的行也很困难。

此外,如果一条线太短,眼睛将不得不经常返回,打破了读者的节奏。较短的线条也往往会给读者带来压力,使得他们在完成当前读者之前就开始了。为了解决这个问题,每行50到60个字符可以确保阅读舒适。

看一眼介质对于一个大师班来说,如何阅读是一种乐趣。

12.避免引起焦虑的提示

Screenshot of the Ticketmaster website order page with countdown timer in top right corner

Ticketmaster倒计时全流程

我们都熟悉闪烁的“高要求!”和'最后的机会!' Booking.com上的消息。在Ticketmaster订购门票时,我们也清楚地知道屏幕一角的倒计时。人们只能想象由于这些特征导致转换率上升,但如果这些经历会对某些用户造成真正的焦虑呢?

超过十分之一的人可能患有“致残性焦虑症”在他们生命的某个阶段,作为设计师,我们应该尽我们所能,以避免对这个问题作出贡献。有许多UX模式旨在迫使用户采取行动,特别是预订流程,其中超时是不可避免的。作为一个前进的步骤,我们可以通过温和地通知他们时间限制到位并允许他们选择延长所需的时间来满足那些需要更长时间才能使用我们的应用程序的人。

在设计下一个预订流程时,请确保将超时方案作为序列的一部分包含在内,并确保创建一个界面,使用户能够完成,而不是将其置于恐慌之中。

13.添加验证和检查

Monzo's verification screen

Monzo在付款时提供三层验证

对于焦虑症患者而言,没有什么比无意中质疑提交到数字以太网的信息或数据的有效性更糟糕了。结束冗长的表格或预订流程,其中包含重要信息并按下“下一步”,只发现您的数据已经提交而没有撤消选项,这可能是一种压力很大的体验,尤其是涉及金钱时。

在设计最终具有相应行动号召力的流程时,值得注意的是,许多用户 - 包括那些患有焦虑的用户 - 都会欣赏双重检查他们是否已正确填写所有内容的选项。Monzo在发送付款时这样做非常出色,在一个整洁的界面中为客户提供三层验证。

在进行银行转帐的最后阶段,您可以对要发送的金额,收件人的分类代码和帐号进行最终检查,并且必须输入您的卡的PIN号码以确认交易。

14.确认用户旅程结束

很多精力可以用于了解用户旅程并提供最佳用户体验,但在某些情况下您可能会发现自己不足。当用户结束流程,交互或提交时,最终屏幕应该确认他们的行为并告知他们下一步是什么,即使它只是一条消息,上面写着“让我们带你回到主页”。任何形式的确认都可以给用户带来真正的回报并降低他们可能产生的任何焦虑。

这篇文章最初出现在问题314网络杂志;订阅这里。 

主要形象: Taras Shypka

阅读更多:



翻译字数超限