什么是包容性网页设计？

网站可用性是一个广义术语，描述了网站使用和交互的难易程度。 然而，在设计一个可用的网站时要记住的重要一点是，并非每个人都以相同的方式或在相同的情况下与网站互动。

如果你为“普通”或“理想”用户设计一个网站，你最终可能会为其他人创建一个令人不快、困难或无法使用的界面。

万维网联盟和地方政府提供的指南帮助设计师缩小了可用性和可访问性方面的差距。 但是，这并不一定会使网站具有完全包容性。

在接下来的文章中，我们将探讨包容性设计的含义、它在网页设计中的价值，以及在设计包容性界面和交互时需要考虑的因素。

了解如何设计 Web 可访问性

什么是包容性设计？

包容性网页设计消除了网站的偏见和假设，这样用户就不会因为障碍、人口统计或其他临时或永久情况而感到被排斥在外。

可访问的网页设计和用户体验设计都是包容性网站的关键组成部分。 无障碍设计是消除残疾人和其他障碍人士进入障碍的过程。 UX 设计是一种数据驱动的设计方法，用于测试和验证真实用户如何与网站互动。

正因为如此，包容性设计有很多需要考虑的因素，因为严格来说并不是用户的障碍会阻止他们充分使用网站或对网站感到满意。 网页设计师还可以通过为一组独特的用户设计体验来遇到问题。

因此，网页设计师需要考虑以下因素：

• 与视力、听力或灵活性有关的身体损伤
• 影响认知或言语的精神障碍
• 阻止用户充分参与产品的情境限制
• 硬件、互联网连接和计算机素养等技术限制
• 语言和地理障碍
• 人口统计学差异，如年龄、种族和性别
• 社会经济差异

底线：包容性设计最终转化为通用设计。

网页设计师可以使用各种工具来解决包容性设计的可访问性方面。 例如，WordPress 可访问性工具、Web 可访问性检查器、WAI-ARIA 指南等可以使可访问性设计和实施更容易。

然而，对于包容性设计，它需要更深入地了解用户在网络上可能面临的限制。 没有一种工具可以扫描您的网站并确认您已经创造了最多样化和最公平的体验。 这是您必须学习如何实施和自行检查的东西。

为什么包容性网页设计很重要

网页设计师需要将可访问性和包容性纳入他们构建的每个网站的原因有很多。 让我们先看看一个不包容的网站是如何伤害每个人的：

非包容性的缺点

2021 年，WebAIM 发布了屏幕阅读器用户调查 #9 的结果。 7.7% 的调查受访者表示，他们在上网时必须使用屏幕阅读器。

当被问及他们对当今互联网可访问性状态的看法时，只有 39.3% 的人表示它比往年更容易访问。 42.3% 的人认为没有任何改变，而 18.5% 的人表示情况更糟。

根据 CivicActions 的 Mike Gifford 的说法，可能有超过 7.7% 的人口经历过交通不便并有以下感受：

“残疾和人们克服障碍的方法的组合极其多样化。 从道德上讲，必须优先考虑为我们最不利的用户进行构建。 不幸的是，由于我们不断追求新的和华丽的东西，我们经常将 10-20% 的同胞排除在外。”

根据美国律师协会的数据，在 2017 年至 2020 年期间，有 8,000 起美国残疾人法案第 III 条诉讼向联邦法院提起。根据 Accessibility.com 的数据，仅在 2021 年，这一数字就增长了 14.3%，达到 2,352 起诉讼。

有些人可能会觉得被网站排除在外，但没有法律追索权。 例如，世界数据实验室说有 11 亿互联网穷人。 在某些情况下，这意味着他们负担不起移动数据计划。 在其他情况下，他们可以，但他们没有足够的数据来使用，所以他们不能花时间在资源密集的网站上。

还需要考虑老年人口。 皮尤研究中心发现，近年来使用互联网的老年人数量有所增加。 也就是说，TechCrunch 报告称，大约 50% 的老年人需要有人帮助他们设置和使用新的数字技术。 此外，旧金山市 40% 的老年人是数字文盲——就在硅谷旁边，所有地方。

即使您的网站没有受到诉讼，请考虑由于非包容性设计而失去 20% 或更多的访问者会对品牌的长期生存能力产生什么影响。 有很大一部分观众会因为网站不受欢迎或不可用而消失。

包容性的好处

当您设计一个具有包容性的网站时，您的设计是为了让每个想要参与的人都可以充分参与其中而不会感到被排斥。 当互联网成为一个包容的地方时，每个人都会赢：

包容性的网页设计可以带来更好的产品设计。

从网站到移动应用程序以及介于两者之间的一切，包容性设计迫使设计师回归良好、实用和善解人意的设计的基础。

品牌可以接触到更多的受众。

一个优先考虑为每个人而不仅仅是理想用户的普遍积极体验的品牌将吸引更忠诚的用户群，他们也重视包容性和公平性。

用户感觉更好地与包容性网站互动。

人们在屏幕前花费的时间如此之多，以至于腕管综合症、计算机视觉综合症和网络成瘾症等问题如今都非常普遍。 包容、合乎道德的设计可以帮助用户在思想和身体上都感觉更好。

包容性网页设计有助于网站在搜索结果中排名更高。

谷歌几年前更新了它的搜索算法，命名了创造最佳页面体验的四个关键因素：性能（速度）可访问性、最佳实践（设计和代码）和搜索引擎优化（例如替代文本）。 包容性设计对这些都有贡献。

如何创建包容性网页设计角色

通常，设计师会在网站项目开始时提出虚构的角色。 这有助于他们可视化并与他们正在为其构建网站的最终用户建立联系。 它还可以帮助他们了解特定用户将如何与网站互动。

当您在网页设计过程中包含包容性时，您的用户角色描述将需要进行一些调整。 典型的用户角色分解如下：

• 姓名
• 人口统计（例如年龄、性别、职业等）
• 性格
• 嗓音
• 目标
• 动机
• 挫折
• 恐惧

包容性用户角色还需要包括：

能力：这是包容性的可访问性组件。 您必须预测您的一些用户在使用和参与网站的方式方面可能会受到怎样的限制——身体上和认知上。

能力：如果您查看有关在线用户数量的数据，您会发现您的一些用户可能没有数字素养。 偏离基本结构和布局并且没有提供足够的上下文（如联系表单中的标签）可能会损害这些用户的体验。

态度：这是指可能将网站视为不安全环境的用户。 无论他们是过度关注自己的隐私还是担心遇到恶意软件，这些类型的恐惧都应该通过可识别且值得信赖的安全和隐私功能来解决。

访问：用户不必为了有限的访问网络而上网。 例如，据联合国教科文组织称，世界上超过一半的人口在家中可以上网。 这并不意味着他们不能上网，只是意味着他们必须找到其他方式来上网——比如去图书馆或网吧。 因此，连接性、硬件、软件甚至位置都会影响访问。

本地化：假设每个用户都生活在同一个国家，来自同一个文化，说同一种语言是绝对不安全的。 因此，在创建包容性用户角色时必须解决这些差异。

包容性设计的 7 条原则

为了让包容性设计发挥作用，网页设计师必须消除假设、先入为主的观念，以及将普通用户的利益置于所有用户的利益之上。 要成功做到这一点，设计师必须遵循以下原则：

1. 灵活性

没有一种尺寸适合所有网页设计。 这并不意味着您必须为不同的用户构建不同的网站或登录页面。 但是，当您认为它们将有助于缩小不同用户体验之间的差距时，这确实意味着向 UI 添加额外的功能。

例如，最好在嵌入文件下方包含视频脚本。 这样，不能或不想听到或观看视频的用户可以阅读文本。

2.简单

极简主义是一种持久的网页设计趋势，并且有充分的理由。 这不仅仅是因为它创建了更视觉上令人愉悦的界面，还因为极简主义和简单性为更直观的设计铺平了道路。

解决此问题的最佳方法是将网站视为最小可行产品 (MVP)。 构建使其成为可用且有价值的产品的核心功能。 然后，只在需要的地方添加额外的元素，并为每个人的体验带来价值。

3. 一致性

一致性并不意味着网站必须变得可预测或无聊。 在保持一致性的同时，您仍然可以发挥创造力。

每个人都受益于设计的一致性。 它消除了在同一网站上以不同方式呈现的相同元素或功能所造成的挫败感和困惑。 此外，与大多数 Web 处理核心元素（如网站导航）的方式保持一致，可以提高网站的可用性并加快转换时间。

4. 感知

除了考虑人们如何与网站互动外，设计师还必须考虑他们更喜欢如何与网站互动。 例如，一个以图像为主的网站对于不是视觉学习者的用户来说可能很难消化内容。

当您将网站的内容整合在一起时，请确保它们的健康组合。 如果只有一种类型的内容（如所有文本而没有图像），那么您的一些访问者可能在理解或易用性方面处于劣势。

5. 股权

网页设计中的公平是指公平的结果。 换句话说，无论访客是谁，每个访客都应该能够轻松完成任务。

这就是用户体验设计过程派上用场的地方。 将第一手的用户输入纳入用户的目标以及完成目标所需的内容有助于设计师为每个人创建无摩擦的交互和用户旅程。

例如，考虑一个像图像滑块这样的 UI 组件。 设计它的包容性方法是禁用自动滑动功能。 然后，包括滑动和单击功能，以便每个用户都可以控制滑块及其速度。

6.预防

包容性设计将减少人为错误。 这意味着设计一个 UI 以防止尽可能多的错误，同时对确实发生的错误提供宽容和有用的响应。 通过减少与犯错相关的挫败感或羞耻感，包容性设计更有助于建立与访客的信任。

这一特定原则最常在参与时发挥作用。 例如，按钮的设计应始终确保它们足够大，可以看到和点击。

联系表格中的错误消息是另一个很好的例子。 通过以每个人都可以阅读的颜色和大小显示内联错误消息，您将减少重复错误的可能性。 您还将拥有一个联系表格，它比提供模糊错误消息或在流程中出现得太晚的表格更有帮助。

7. 住宿

网站像实体企业一样受到可访问性诉讼的原因之一是因为它们被视为“公共场所”。 除了确保每个人都可以阅读、浏览和参与网站之外，包容性设计还保证了访问者一定的舒适度。

舒适对许多人来说意味着很多东西——充足的空间、可预测的布局等。包容性设计还要求设计师考虑他们的用户对网站内容的舒适程度。

例如，使用反映目标受众的多样化图像将创造一个比用户一次又一次看到的通用库存图像更受欢迎的环境。 使用直截了当的文案而不是只有一部分观众才能理解的充满行话的文案也可以这样说。

结论

包容性网页设计是一个包罗万象的术语，包括用户体验设计、可访问设计和响应式设计等学科。 但是，包容性设计更进一步，以确保最终结果是一个普遍可用且广受好评的网站。

这种网页设计方法需要对不同的人在使用网站时所面临的挑战有深刻的理解，这不仅仅是障碍或残疾。

将包容性整合到您的网页设计过程中的最佳方法是首先确保您使用的工具可以帮助您实现它——比如 WordPress 和 Elementor 的辅助功能。 然后，使用能力、资质和访问权限等包容性因素更新您的用户角色模板。 最后，当您了解更多有关用户体验以及他们在使用网络时面临的常见挑战时，请及时更新您的流程。