设计可访问性——视力障碍

世界卫生组织发现，全世界约有 4% 的人患有视力障碍。此外，全球 4% 的人口视力低下，0.6% 为盲人。

作为一名设计师意味着照顾所有用户并知道如何使您的产品尽可能易于访问和友好。在本文中，我们将讨论最常见的视觉障碍以及如何设计适合所有人的产品。

周边视力障碍

有周边视力问题的人缺乏广角视野，即使他们的中心视力可能是完美的。这种视力障碍的最常见原因是青光眼，当视网膜内的高压损害视神经——从大脑到眼睛的图像载体时，就会发生青光眼。患者经常抱怨他们在昏暗的光线下看东西和移动时导航困难。

在设计网站或应用程序时，我们应该记住，有周边视力问题的人只能看到中心元素。我们的主要目标是确保他们可以不受限制地访问和使用整个内容。

糖尿病性视网膜病变

糖尿病视网膜病变是一种影响眼睛的糖尿病并发症。最初可能是轻微的视力问题，通常会发展为严重的视力模糊症状并最终失明。根据统计数据，80% 的糖尿病患者会受到这个问题的影响。患者通常抱怨看到斑点或飞蚊症，失去视力，在昏暗的光线和夜间看东西有困难。

用户通常难以阅读文本并与不符合 WCAG 2.0 要求的网站和产品上的元素进行交互。对他们来说，内容看起来很模糊，就像透过脏玻璃看一样。

你有没有想过有视觉障碍的用户如何看待你的网站？通过尝试 Web Disability Simulator 穿上他们的鞋子。

视力丧失

视力是指眼睛清晰准确地看到细节的能力。通常，它取决于眼睛与物体的距离及其最小特征。然而，一些视力受损的人会因一只眼睛的部分视力丧失和颜色饱和度下降而苦苦挣扎，其中颜色，尤其是红色，会失去其强度。

作为设计师，我们应该特别注意文字的类型、大小、粗细和字体样式。用户感知细节的能力还取决于应在 WCAG 2.0 对比度要求范围内的前景和背景之间的对比度。

世界卫生组织发现，全球有超过 10 亿人患有视力障碍，无法使用不符合无障碍要求的产品。

幻影视觉

见鬼从来都不是好兆头。特别是，“重影”图像（由与主图像重叠的阴影引起的失真）可以指示散光、白内障或其他视觉障碍。出现重影症状的人难以感知文本和可能变得完全难以辨认的小元素。

色盲

对于色盲的人来说，这个世界就像是老电影里的场景，一切都是苍白而沉闷的，有些颜色已经被去除了。从本质上讲，科学将色盲定义为无法感知和区分颜色，以及对颜色亮度的敏感性。最常见的类型是红色/绿色，其次是蓝色/黄色和完全色盲。它影响了全球约 4.5% 的人口或 12 名男性中的一名和 200 名女性中的一名。

选择颜色时，设计师应牢记色盲，避免仅依靠颜色来传递按钮、链接、图标或文本来传达信息。

色盲网页过滤器是一个模拟不同类型色盲的网络工具，因此您可以调整您的调色板并为每个人提供最佳体验。

创建一个坚实的 HTML 结构

为了使视障用户可以访问内容，我们需要确保内容呈现独立于其内部构成。将此任务分配给开发人员以组织代码结构并提供相关的语义标签，例如标题、列表、表格和输入字段。

它允许屏幕阅读工具或其他辅助技术快速扫描内容并将其解释给用户，而不管视觉变化如何。用户可以放大文本、图像或间距或根据他们的需要调整内容，而不必担心这些调整会破坏底层结构。

使用准确的替代文本

不幸的是，视障人士发现很难像其他人那样享受视觉内容。为了消费内容，他们经常求助于辅助技术，例如屏幕阅读器。此类工具扫描图像，查找 alt 属性，并通过向用户大声朗读文本来解释它们。

设计师可以通过提供传达图像含义的简洁和信息丰富的描述来帮助这些人。想象一下通过电话解释图像——你可能专注于想法而不是颜色或图案。

alt 标签没有固定限制，但避免超过 150 个字符。较旧的屏幕阅读器不会超出此范围。

为可访问的输入使用多个提示

设计师不应该只靠颜色生活。否则，色盲的人将无法使用他们的产品！例如，红色和绿色的错误和成功状态对用户没有任何意义，因为它们看起来几乎相同。振作起来——设计师还有其他可视化工具，比如图标和标签，它们可以辅助颜色并帮助正确传递信息。

使用纹理来增加可访问性

如何在不使用颜色的情况下区分元素？我们有一个简单的答案——纹理。色盲用户可能无法区分红色与绿色或蓝色与黄色，但他们绝对可以感受到点和对角线图案之间的区别。最终，模式和纹理实际上可以帮助所有用户解释图表和信息图表，因为它们具有明显的变化。

使用对比色

对于有视力障碍且不能完全依赖图像内容的人来说，文本就像是波涛汹涌的信息海洋中的一盏明灯。这就是为什么在文本与其周围背景之间提供足够的颜色对比至关重要的原因。WCAG 2.0 建议对正常大小的文本保持至少 4.5:1 的对比度，对较大的文本保持 3:1 的对比度。

使用 Arial、Verdana、Tahoma 或 Helvetica 等无衬线字体可为所有用户提供 100% 的易读性，因为它们通常更简单且更易于阅读。

检查 200% 文本大小

WCAG 2.0 建议指出，整个网站文本的大小必须可调整至 200%，而无需辅助技术和内容或功能损失。您还应该将此准则应用于触摸显示器和捏拉缩放行为。看似很小的细节对视力障碍者却有重大影响。他们无需将设备放在鼻子前查看和阅读内容，而是可以简单地放大。

跳过对标题和图像文本的此要求。

语音用户界面

在可访问性领域的最新创新中，语音用户界面 (VUI) 使视障用户能够轻松地与网站和应用程序交互。他们所需要的只是他们的声音和耳朵！此外，对于那些手或眼睛忙于做饭或开车等其他任务的人来说，VUI 是一个有用的工具。

对会话类型的 VUI 的建议包括：

• 保持音频信息简短并允许中断。

• 让用户控制语速。

• 使功能易于发现。

使用 HTML 构建内容

与开发人员合作，确保内容布局可预测且便于屏幕阅读器浏览。Z 模式被认为是浏览着陆页和内容不超载的网站的最常见模式之一。这意味着他们的眼睛主要集中在角落以及顶部和底部线。

确保 HTML 反映了这种视觉层次结构，并且屏幕阅读器将遵循预期的顺序并向无法正确感知视觉内容的用户正确解释设计。

对于博客、报纸或杂志等负载较重的网站，您应该使用 F 型布局。

定义焦点顺序

一些视障用户可以通过点击 Tab 键或导航箭头来浏览网站。作为设计师，我们应该牢记一些基本问题。

首先，键盘焦点应该是可见的。默认情况下，大多数网站使用灰色虚线或实心蓝色边框，但您可以通过使其与您的品牌颜色保持一致来调整您的焦点样式。

其次，确保焦点遵循视觉布局的编码顺序。它通常从最重要的内容到不太重要的内容从左到右、从上到下流动。键盘用户应该访问所有交互元素，包括表单、下拉菜单、按钮、模式对话框以及用户可以使用鼠标访问的其他基本页面部分。

用动作表示元素

工具提示是告知用户特定元素可以做什么的小知识。有或没有残疾的用户可以使用鼠标、其他指针设备、键盘、屏幕阅读器、缩放软件和任何其他辅助技术来发现工具提示。虽然工具提示在悬停时弹出然后消失，但它们不能包含完成这个或那个任务的说明。否则，你会强迫用户记住事物，使他们的记忆力和眼睛疲劳，这对于视力受损的人来说很难。

如果您没有任何有用的内容，请不要提供工具提示。否则，您会造成信息污染并浪费用户的时间。

本文内容为转载