出色的设计如何影响网站可访问性

已发表: 2021-07-19

您是否正在寻找可访问性这一广泛学科的起点？我们将深入研究您可以在设计过程中实施的实际实践和工具，以通过让更多用户包容您的数字产品来改进您的数字产品。

什么是可访问性？

可访问的网站使更多类型的用户能够以顺畅的方式与您网站上的内容互动。无论我们是从 UI 还是 UX 的角度来探讨这个主题，重点都是创建适合不同受众的优质产品。

这种多样化的受众“扩展到任何正在经历任何永久性、暂时性或情境性残疾的人，例如，只有一只手臂是永久性的，手臂受伤是暂时的，并且一只手臂抱着婴儿是情境性的——在每种情况下，用户只用一只手就能完成任务。” （阿维纳什·考尔，2018 年）。

作为设计师，我们有责任确保我们以所有用户都可以访问的方式进行设计，而不管他们的情况、能力或背景如何。因此，网络可以成为包容所有人的空间，无论他们是否有认知障碍、视力障碍或身体障碍。

创建一个可访问的网站不需要大量的预算或更改。由于它不需要额外的功能或内容，因此可以通过设计项目开始时的教育和意识来实现可访问性。

这对商业来说也很重要：研究表明，可访问的网站有更好的搜索结果，它们可以覆盖更多的受众，它们对 SEO 友好，下载时间更快，鼓励良好的编码实践，并且它们总是具有更好的可用性。

您需要进行某些调整并遵循一个框架，以确保您针对不同的能力、年龄和设备经验水平进行设计。

可访问性是一个独立的学科，它不断发展以适应数字产品。但同样，软件解决方案也在增长。这意味着我们无法涵盖主题中的所有内容，但如果您觉得本文有用，我们可以做第 2 部分！

我们将深入探讨 5 个主要领域：

确保文本和背景之间有足够的颜色对比可以帮助视力不佳的用户。这会影响比预期更多的用户，并且经常被视为一个问题而被忽略。然而，多达 12 名男性中就有 1 名是色盲，还有许多其他人是低视力或失明的。

首先，可访问性指南规定颜色永远不应是传达信息的唯一方式。换句话说，对于那些以不同方式感知颜色并可能错过我们基于颜色的说明的用户，必须有额外的提示。

为了在文本和背景之间保持适当的对比度，最好的比例至少为 4.5 比 1。这可以让视力低下或色盲的用户清楚地区分两者。

对比度检查器

4.5 比 1 的对比度符合一致性级别 AA（三个级别中的：A、AA 和 AAA），但这会根据字体大小和您希望达到的一致性级别而变化。如果类型为 18 pt（或 14 pt 粗体），较大的字体需要较小的对比度，仅为 3 比 1。

这些最小比率不适用于徽标或品牌名称中的文本，但使用此方便的工具自行检查对比度很有用。

对于使用屏幕阅读器访问网络的用户，显示的内容并不总是正确传达。替代 (alt) 文本是屏幕阅读器用来通知用户页面上有哪些图像的内容。

这可以通过将替代文本转换为盲文、音频描述或视觉阅读文本来完成。这意味着为那些看不到它的人准确描述图像中发生的事情很重要。

有时可能没有必要添加替代文本。例如，图像周围可能有足够的上下文指示符，或者图像除了审美之外没有其他功能。

笔记本电脑的高级女士

您很可能在没有意识到的情况下已经熟悉了焦点指标。焦点状态是（通常）在选择元素时出现的蓝色轮廓，例如链接、菜单、按钮和表单域。

这些表示用户在使用键盘时当前关注的是哪个元素。通常，这些指标被视为不雅观或好像它们没有任何用途，但它们实际上非常重要。许多用户仅限于使用键盘，而使用屏幕阅读器的视障人士也需要焦点指示器来帮助进行页面导航。

焦点指示器是一种简单的方法，可以让您的页面导航清晰易懂，而且只需很少的努力，但对用户来说却有很大的不同。它们可以使用适当的颜色无缝地与品牌联系起来，它们只需要形成对比，以便元素脱颖而出。

形式

表单对任何人来说都可能很复杂，但是当表单过于简约和不清楚时，那些有额外可访问性问题的人通常会遇到困难。下面列出了一些需要解决的常见问题，以解决可访问性问题：

当信息不杂乱且在一个空间中太多时，信息更容易消化。这也适用于可访问的网站。如前所述，字体大小可以改变对比度的最低要求，但字体大小不应低于 10 pt。

如您所见，阅读 9 pt 具有挑战性。

增加两行文本和单个单词之间的空白量可以帮助视力受损或有阅读障碍的用户。以下最小间距可确保满足这些用户的要求：

令人惊讶的是，这些小的变化可以对可访问性产生很大的影响。它不需要大量预算和大量时间来使您的网站符合 Web 内容可访问性指南，但它可以极大地改变用户的体验，从而也促进您的业务。

将这些建议添加到您的设计过程中可以成为第二天性，为未来更易于访问的网站铺平道路——这取决于我们作为设计师。

如果您在创意方面需要帮助，请随时与我们联系。