指导包容性网页设计的 10 条核心原则
已发表: 2020-11-07
包容性设计可帮助您克服限制并为所有客户提供网站访问权限
研究表明，大约 70% 的网站在使用辅助技术时至少部分无法读取。
这个统计数字听起来令人震惊。 这么多品牌怎么会放弃对数百万残疾互联网用户的明显考虑？
不幸的是，当我们考虑到残疾人在社会和企业中被隐形的频率时，它开始变得更有意义。
Web 内容可访问性指南 (WCAG) 定义了网站如何提高其可访问性，从而提高其包容性。
其中许多准则已载入法律，因此如果您的网站无法访问，您的企业可能会面临风险。
包容性对您的业务和客户的好处是巨大的。
可访问性将为您提供更大的受众份额，但这也是建立客户信任的关键。
所有客户，无论是否残疾，都将受益于更流畅的网站体验。 他们会欣赏关心这种体验的企业。
包容性意味着考虑客户的需求范围，以及如何限制他们对您的服务的访问。 成功实施辅助功能将帮助您克服这些限制。
虽然本文侧重于网站设计，但请记住，一个关键的可访问性问题是缺乏互联网访问，因此您应该寻求提高所有领域的可用性。
电话技术，例如拨入电话会议选项，可以帮助您与所有客户保持远程联系。
现在，让我们继续学习指导包容性网页设计的十项核心原则。
目录
- 包容性设计指南
- 关于包容性的最后一句话
包容性设计指南
1. 灵活
“残疾”一词涵盖了广泛的人类经历和需求。 在考虑如何使您的网站具有可访问性和包容性时，这可能令人生畏。
但是，请记住，您的所有客户，无论是否残障，来到您的企业时都有截然不同的需求和偏好。
诚然，您无法取悦所有人，但您可以提供灵活的体验来吸引尽可能多的客户。
考虑用户访问您网站的上下文。 例如，他们使用什么类型的设备？ 他们更有可能在工作场所还是在家中使用您的服务？
分析您的客户以确定他们的人口统计数据，例如年龄和性别。 这是了解适合您企业的最佳电子商务平台或页面设计的关键之一。
满足现有客户和吸引新客户的最佳选择是灵活性。
提供各种在线和离线联系方式。 联系您的企业和使用您的服务应该是顺畅无痛的。 这将使您的所有客户受益，而不仅仅是那些有额外需求的客户。
2. 避免压倒客户
虽然一定程度的移动内容可以帮助您的网站流行起来，但过多会引起焦虑和压力。 对于有心理健康需求（例如焦虑、自闭症或多动症）的用户，这些问题尤其重要。
WCAG 对移动内容有明确的指导方针。 移动内容（即 GIF、滚动和自动更新新闻提要等）必须具有暂停机制，如果它们自动启动、持续时间超过 5 秒并且与其他内容平行。
根据您的受众，您可能需要考虑完全放弃自动播放内容。 想想您可能不习惯使用 Web 服务的老客户。
太多动人的、对时间敏感的信息是令人反感和压倒性的。
如今，许多网站在您进入网站后都会立即弹出实时聊天窗口。 这有其作为易于访问的联系工具的好处。 但是，如果每次使用该网站时都会立即出现一条消息，这可能会令人恼火。
您可以在不显眼的位置使用可折叠的、带路标的实时聊天选项，而不是弹出窗口。 客户一到就强行与他们联系可能会非常有压力。
这也应适用于贵公司对短信应用程序的使用。 不要用通知淹没您的客户。
3. 使用清晰的排版
WCAG 明确了排版要求：
- 保持文本左对齐或右对齐（不对齐）
- 行距和段落间距应至少为 1.5 倍
- 最大段落宽度为 80 个字符
您应该始终遵守这些准则，但您可以走得更远，让更多的客户受益。
使用清晰、无衬线字体、大小合适且与背景颜色形成对比的字体。 语言应该简单直接，不要光顾您的客户。
利用您的客户研究来确定客户对您网站的期望。
另一个重要的问题是图像中的文本。 应尽可能避免这种情况。
盲人和视障用户经常使用屏幕阅读器软件。 这些程序会大声朗读屏幕上的文本，但无法解码图像。
因此，如果文本“隐藏”在图像中，您的客户可能会错过重要信息。 重要的是，您的视障客户不会觉得他们对您网站的访问受到限制。
4. 使图像可访问
当然，图像对于良好的网页设计仍然必不可少。 而且，相反，它们可以提高其他客户的可访问性。
对于有阅读障碍（例如阅读障碍）的人，相关图像可以提高文本理解能力。 几乎可以肯定，您网站的某些区域（例如产品页面）需要图像。
您仍然可以让屏幕阅读器用户访问图像。 您网站上的每张图片都应包含替换文字。 这是当您将光标悬停在图像上时出现的文本。
它也由屏幕阅读器读出，不能显示图像本身。 好的替代文字清晰准确地描述了显示的图像。
使用 HTML 将替代文本分层到您的网站中很容易。 包含替代文本不会干扰其他用户，并且会极大地使使用屏幕阅读器的用户受益。 替代文本和可访问的图像也有利于您的搜索引擎排名。
除了替代文字之外，重要的是图像本身的呈现方式是可访问的。 出于 WCAG 的目的，颜色对比度被测量为一个比率。 有许多应用程序和浏览器扩展可以用来衡量这个比率。
虽然用于装饰的附带图像没有对比度要求，但背景上的文本应具有 4.5:1 的对比度。 图表等图形项目和可点击图标等 UI 元素的要求为 3:1。
最后，几乎每 20 人中就有 1 人是色盲。 考虑哪些颜色组合可能对这些用户有问题。
有许多不同类型的色盲。 应用程序可用于模拟您的网站对色盲用户的显示方式。 更好的是，与色盲或其他视觉障碍的人联系，以了解您的网站的可用性。
5. 确保触摸屏无障碍
很容易陷入认为您的桌面站点是“默认”站点的陷阱。 由于其便利性，智能手机和平板电脑的使用在所有用户中继续增加。 这些设备通常也比笔记本电脑或台式机更实惠。
考虑您的网站对低收入用户的可访问性，并注意您的移动网站。
点击和滑动应该是简单和直观的。 链接的目的应该很明确，并且应该尽量减少误用。
请记住，手指比光标大得多，并且会遮挡用户的屏幕视图。 您可以使用大小合适、间距适当的按钮来实现这一点。 WCAG 要求按钮大小为 44 x 44 像素。
通过您的触摸屏优化考虑客户的实际需求。 残疾可能意味着客户的身体灵活性或耐力有限，因此请避免扩展或过于复杂的触摸要求。
“捏”手势，通常需要缩放或旋转，即使对于身体健全的用户来说也很费力。 相反，您可能想要一个可点击的缩放按钮，这是您关心客户舒适度的一个很好的标志。
6. 确保用户输入简单
这与触摸屏可访问性领域密切相关。
您网站上的表单（用于下订单、联系、设置帐户等）对于您的客户来说应该是轻而易举的。 确保所有框都清楚地标有所需的输入。
您还可以在框中放置占位符以举例说明客户应该输入的内容。 例如，占位符电子邮件地址，如 [email protected]
即使是最易于使用的设计，也总是存在人为错误的空间。 重要的是您的网站能够容忍输入错误。 不要让您的客户因错误而感到愚蠢，并让这些错误易于修复。
最好的方法是实时突出显示错误，这样客户就不必翻阅长表格。 不要仅仅依靠颜色来显示错误； 视障用户可能无法访问此功能。
使错误消息清晰而不是神秘，并在提交之前为客户提供最后检查的选项。
容错不仅可以提高网站的可访问性。 它还让客户在与您打交道的每一步都感受到支持。
使表单直观且具有包容性是您与客户建立信任的众多方式之一，它表明您关心他们的体验。
7. 以信息简单为目标
传输信息显然有利于使用您网站的每个人。 它可以帮助那些有学习或阅读障碍的人、视障用户、非残疾用户和您自己的员工。
通过减少澄清查询的数量，您网站上的清晰信息将减轻您的客户服务团队的压力。
段落应保持简短，词汇不应比需要的复杂。 不要回避使用您的客户会理解的行业特定术语，但您的网站并不是展示 SAT 词汇的地方。
尽可能消除歧义。 您的确切含义应始终明确，并且您网站上的链接功能应准确标记。
以最小的设计为目标，强调对您的客户来说最重要的东西。
8. 保持一致性
对于一些残疾客户来说，变化可能会令人不快。 虽然随着品牌的发展更新您的网站是可以的，但频繁的不必要的更改可能会让任何客户望而却步。
当您的品牌标识似乎在不断变化时，您的客户就不太可能信任您。
在客户服务方面也应该保持一致性。
软件定义网络等解决方案可以帮助您维护有凝聚力的服务。 保持友好、开放的语气，以确保您的所有客户都感到受到支持。
一些客户可能需要更频繁地重复信息。 您的 CS 团队应该为此做好准备，但也值得考虑让信息更易于访问。
辅助功能（例如颜色对比和替换文字）应在网站的每个区域保持一致。
向残疾用户提供完全不同版本的网站可能很诱人。 然而，这可能是另一种情况，让这些客户觉得他们是一个负担。 相反，为了所有客户的利益，从头开始将可访问性集成到您的网站中。
9. 保持网站顺畅
另一个可访问性问题是，并非每个人都可以访问快速互联网或强大的硬件。
农村地区、发展中国家或低收入客户的客户可能在访问您的网站时遇到问题。
设计您的网站，以便用户可以选择是否查看消耗数据的内容，例如视频。 有很多方法可以减少您网站上的延迟以使这些客户受益。
再次考虑客户如何访问您的网站。
想想他们使用的是什么设备，以及他们所在的地理区域。无论客户如何查看您的网站，他们都应该享受轻松的体验。 您不希望您的客户觉得使用您的网站是一项繁琐的任务。
确保紧密、高质量的编码，以减少令人沮丧的错误。 尝试减少客户在执行任务时必须点击的页面数量。
将表格保持在尽可能少的页面。 没有人喜欢每隔几秒钟就等待加载新页面，尤其是在他们的连接很差的情况下。
10. 在网站设计中创建视觉层次结构
许多最佳网站设计的一个共同点是清晰的视觉层次结构。 这意味着导航很容易，并且很明显用户应该为不同的任务采取哪些步骤。
您可以分析客户对您网站的使用情况，并将最常用的功能放在首位。 避免“平铺”，因为这很容易让人不知所措，而且不是特别清楚。
您可以将相关功能与统一的设计选择（如颜色和形状）组合在一起。 但是，您不应只依赖这些功能。 正如所讨论的，它们可能无法访问。 出于屏幕阅读器的目的，也可以使用文本。
视觉层次结构的目的是让您的客户更快、更轻松地使用和浏览您的网站。
使用您的设计选择将客户引导至您网站的相关部分。 了解客户的需求，并强调对他们来说最重要的事情
关于包容性的最后一句话
最终，可访问性和包容性背后的理念是残疾用户与任何其他用户一样有价值。 这似乎很明显，但数量惊人的品牌未能在其网站设计中将其付诸实践。
加倍努力以确保您的所有客户都有良好的体验，这将在您的基地中建立信任和忠诚度。 您的客户会更快乐，您将成为真正关心您的企业。
作者简介
John Allen 是 RingCentral 的全球 SEO 总监，RingCentral 是全球 UCaaS、VoIP 和自动拨号软件提供商。 他在构建和优化数字营销计划方面拥有超过 14 年的经验和广泛的背景。 他曾为 Vault 和 3DCart 等网站撰稿。
