包容性设计：11种方式使您的网站更可访问2021

在你的日常生活中，有多少是以互联网为中心的?

真的这么想 - 你是如何做圣诞节购物的？你的银行？你如何找到食谱吃饭吃饭？您如何与家人和朋友保持联系？就个人而言，我甚至不会在没有互联网的情况下完成工作。

对我们许多人来说，网络已经成为我们日常生活中一个无处不在的方面，然而，许多人没有意识到的是，并不是每个人使用这种无处不在的资源的经验都是平等的。

如果你是其中之一十亿人在世界上那些经历过某种形式的残疾的人，那么在网络上的连通性和易用性并不总是能得到保证。

事实上,一个分析前100万个网站的报告发现，只有1％的网站符合最广泛使用的可访问性标准。

是坦率的，作为一个人斗争红绿色盲目，真的很糟糕，从企业的角度来看，它也可以legal。

从积极的方面来看，虽然仍有很多进步，但我们开始看到公司更加关注可访问性，并开始关注创造平等(或我们将在本文中看到的包容性)网页浏览体验的重要性。

相关功能：网站可访问性:您的公司是否面临ada合规诉讼的风险?

许多公司在自己的网站上实施网站可访问性和包容性设计策略缓慢，因为他们认为这是一个困难而昂贵的过程的误解。

我在这里告诉你，不是这种情况。

事实上，您可以在您的网站上实现一些非常简单的事情以获得进程。

下面我将通过11种方式来开始让您的网站更容易获得，并倾向于包容性的设计。

什么是包容性的设计？

无障碍设计和包容性设计是两个携手并进的领域;就像人们谈论用户体验和UI一样。

用最简单的术语来说，包容性设计是确保在你的努力中没有忽视任何群体的需求或关注，而可访问性是实现这一点的策略。

很多公司都犯了错误创建网站和营销活动，好像他们是他们自己的最终用户。但是，这几乎没有这种情况。

在2021年，您需要关注多样性、公平性和包容性。这意味着扩展您的消息传递，媒体和设计，以解释由不同背景组成的扩大观众，包括年龄组，教育背景，性取向，性别，性别，社会经济课程以及其他事物的宗教。

pinterest是一个鼓舞人心的例子这家公司在加强多元化和包容性方面取得了重大进展。在过去的一年里，他们推出了许多新功能，比如肤色过滤器，放大不足社区的声音，并有意识地努力使其领导团队多样化。

现在我知道这对你来说可能是新的，你可能不知道从哪里开始，这没关系。

为了帮助您开始，影响自己的管理编辑器拉莫娜·苏克拉伊最近写了一篇名为“2021年开启包容性营销的5个快速变化。“我强烈建议签出完整的文章，但其中一些高级外接道包括：

• 更新您的网站上的库存照片和视频更多样化摄影。
• 多样化您的推荐书，案例研究和评论，以显示您的成功与更广泛的受众。
• 将更多的视频和音频添加到您的内容混合中，以满足可能具有隐形差异化的消费者，例如学习或视觉障碍。
• 提供其他语言的内容或支持

在您的网站上实施这些外带将使您在正确的路径上，以创造更包含更包容的体验。

有了这个背景，让我们潜入一些更详细的细节，你如何开始使用包容性设计。

11种方式使您的网站更可访问和包容

1.重新考虑如何组织内容

您的网站的内容是您网站上最重要的资产。

咄,对吧?

卓越的内容是让您的网站访问者从事并帮助教育它们，并最终将它们转变为销售合格的领导，但如果您的前景无法读取您的内容，该怎么办？

为全球25300万人谁患有某种类型的视觉残疾，这是一个非常真实的情景。这也很多潜在的前景，你可以错过与联系。

当涉及到你的内容时，确保你以一种便于有视觉、语言和认知障碍的用户阅读的方式构建内容。

你能做的最简单的事情之一是确保你把较长的内容块分成较小的部分，这些部分由标题和子标题划分。

当内容块太长时，有阅读或视力障碍的人可能难以保持自己的位置并跟随文本的流动。

除了分解您的内容，W3C.在构建您的内容方面，还提出了以下指导方针：

• 确保内容和背景之间有足够的对比
• 尝试将内容的最大宽度保持为每行约80个字符
• 使线路高至少1.5倍的字体大小
• 避免完全证明的文字

这些简单的事情可以让那些有视力或阅读障碍的人的世界变得不同。

2.在内容上使用正确的标记

除了关注您在前端构建内容的关注外，还需要确保您正在使用适当的HTML标记在网站后端构建内容。

相关的：什么是架构标记和如何将其添加以提升SEO

这意味着使用HTML元素，例如<按钮>标记，以表示页面上有一个按钮，包括已知的内容ARIA属性在代码中。

同样重要的是，在整个内容中使用标题标签（H1，H2，H3等）。

标题标签不仅在你的网站的前端创建视觉层次，让低视觉的用户更容易理解内容的顺序;同时也为后端代码提供了结构。

创建这样的结构和使用这些标签在可访问性方面是至关重要的，因为这为屏幕阅读器提供了环境，许多视觉受损或失明的用户都依赖屏幕阅读器来浏览网页。

好处：搜索引擎在抓取网页时也会使用这些标题标签，因此包含这些标签可以帮助提高搜索排名。

3.支持键盘导航

键盘可访问性是大型网站可访问性图片的主要部分。

对于有机动残疾人或视力受损的人来说，键盘可以是他们导航网站的主要方法。

这意味着如果您的网站未针对键盘导航进行优化，则可能为这些用户提供非常令人沮丧的体验。想象一下，无法轻松单击播放按钮的感觉或填写表格以下载要约。

键盘导航的主要目的是让用户能够使用tab键选择网页上的每个交互元素。tab键是使用键盘的用户浏览网站的方式。

用键盘浏览网页的例子

最简单的测试方法是通过简单访问您的一个网页并尝试使用选项卡键导航页面。观察和注意该过程的容易或困难。确保您还使用Shift + Tab和使用Enter键选择元素进行反向的测试。

你可能会发现，你的网站在完全通过键盘导航之前需要做一些工作。如果是这种情况，有许多可用的资源，但我强烈建议检查这篇文章变得更好。

4.设计可用的重点状态

你是否曾经在浏览页面时注意到链接或按钮周围偶尔会出现蓝色的轮廓线?

这些轮廓被称为重点国家对于使用键盘浏览网站的人来说，它们是一个非常有用的辅助工具。焦点状态突出显示页面上当前选中的元素，并让用户知道它们在页面上的确切位置。

在上面的Wikipedia示例中，您可以看到所有浏览器内置的基本焦点状态，但它们在视觉上并不吸引人。这就是为什么有些网站会隐藏它们，但不管你做什么，不要隐藏您网站上的焦点状态！相反，使用它们作为增强品牌的设计机会。

通过一点TLC，您可以设计与您的品牌相同的焦点状态，并创造更包含用户友好的体验。

样本焦点状态|来源 /船厂

如上所述，使用tab键浏览网站，确保网站的焦点状态在所有按钮、链接和表单字段上都很容易看到。W3C建议所有具有焦点状态的元素至少有一个3：1对比度背景色，以帮助他们被看到。

5.为图像编写有用的alt文本

写作有帮助和描述性替代文本(也称为Alt文本)为您的图像可能是最容易实现，但最容易忽视的无障碍领域之一。

早些时候我提到屏幕读者如何依赖于正确的HTML标签，以帮助用户了解和导航网站的用户。同样，屏幕读者还依赖于Alt Text来正确地描述网站上的图像。

可以使用HTML Image标记中的属性添加alt文本在图像中添加到图像。在编写替代文本时，尝试描述图像中发生的情况以及如何与周围内容相关的内容。这使得依赖于Alt文本的用户可以轻松解释图像以了解图像究竟是什么以及它如何与内容和页面的其余部分相关

相反，也有可能出现图像纯粹是装饰或多余的情况，在这种情况下，您可以向图像添加一个空的属性，告诉屏幕阅读器跳过该图像。

6.避免创建包含文本的图像

回到互联网的黑暗日子中，创建包含常用的文本的图像。

使用图像作为文本建造的网站示例。顶部的蓝色按钮具有设计成按钮本身的文本;它无法从图像中突出显示或读取。|来源 /Logrocket.

由于缺乏编码标准和浏览器功能，设计师和开发人员受到限制，因此他们需要想出一些“创造性”的解决办法来创建视觉上有吸引力的布局。

幸运的是，从那时起，网页设计已经走过了很长的一段路，我们不再需要求助于那些类型的设计技巧。然而，这并不意味着互联网上完全没有这类图片。

许多公司仍然在图形等地图，如地图，图形和图表等方面使用这种方法，并且当涉及到可访问性时，它们可能会导致一些不同的问题。

最主要的一点是，屏幕阅读器无法准确读取嵌入到图像中的文本。图像也会根据用户是在桌面、平板电脑还是手机上调整大小。

这意味着浏览器窗口变小，具有文本的图像也变小。这可能使任何用户无法读取，更难以让用户留下阻碍愿景。

当涉及到内容和图像时，请始终尝试使内容成为实时文本，并且如上所述，还要确保为描述其重要性的图像包含alt text。

7.对表单字段使用描述性标签

您可以在表单上开始您的无障碍性工作的最有效的地方之一是。对我们许多人来说，我们的营销和销售生计取决于表格填写，所以任何人都能轻松填写这些表格是至关重要的。

品牌网站经常犯的一个错误是使用占位符文本作为标签。

通常，这是为了帮助节省屏幕房地产，但它确实以可用性成本。

占位符文本是你可能在某些表单中看到的低对比度的浅灰色文本，一旦你开始输入字段，它就会消失。这对于视力受损的用户来说是很难阅读的。

由于输入信息时，此文本也消失，因此它也很难记住该字段最初的内容。

此外，对于使用屏幕读取器的用户，屏幕阅读器通常只读取每个字段的<标签>元素，跳过占位符文本。

除了使用标签来命名表单字段外，还要确保人们理解他们应该在表单中做什么和写什么。您可以通过表单字段上方的小辅助文本或工具提示来实现这一点。

请记住，这并不意味着您需要将表单与不必要的信息杂乱，但只需确保您提供必要的线索，因此用户可以避免任何猜测。

8.保持你的文案简洁

清除和简洁的内容是可访问的内容。干净利落。

保持您的内容清晰，简洁，避免不必要的术语将使您的内容开放到更大的受众。它将帮助认知残疾人，非母语人士或学习障碍的人更容易阅读和理解您的内容。

除了保持内容清晰简洁外，写作时也要记住以下几点:

• 如果您确实需要使用首字母缩略词、行话或技术术语，请尝试为用户提供这些术语的词汇表，并提供一个简单的英语替代方案
• 使用缩略语时，第一次使用缩略语的扩展版本
• 尽可能使用列表
• 考虑使用图像或视频来帮助澄清复杂的想法

9.检查你的网站的颜色对比

颜色对比是网站易访问性中经常被忽视的一部分。我们中的许多人可能会在不同的颜色背景下看一块文本，而不会对它进行第二次思考2.85亿人与视觉障碍一起生活，没有足够的背景从其背景上有足够的对比可以成为噩梦。

根据W3C，文本与其背景之间的理想对比度应至少为4.5:1。

随着你的文本变大，这些对比度比变得更加宽容。对于至少为18pt或14pt粗体的内容，最小对比度下降至3：1，设计更加颜色的设计选项。

看到所有这些数字和比率，你可能正在考虑“这听起来像很多数学。赫克我应该怎么想到这一点？！“

恐惧不是，因为互联网是一个美丽的地方，那里有很多免费工具，可以为您处理所有数学和猜测。我最喜欢的工具是这样的WebAIM颜色对比检查。

说起来有点夸张，但这是最容易使用的工具。您只需输入文本和背景的颜色十六进制代码，它就会告诉您颜色组合是否通过。

使用此工具不仅可以测试颜色对比，而不是您的主要内容，也可以在您的按钮，表单字段和甚至是图标造影等元素上测试颜色对比度。

10.避免依赖颜色来显示关键信息

作为一个色盲患者，这一次真的很成功。

当您显示重要信息时，如图形中的数据或表单字段中的错误，您不应该使用颜色作为唯一的视觉提示。视力低下或色盲的人很难单独看到色差。

就我个人而言，没有什么比看到一个饼图更让我抓狂的了，饼图只使用不同的蓝色来区分数据，结果我根本不知道自己在看什么。

当显示人们任何类型的数据时，使用诸如标签或模式的其他元素以及颜色，因此数据更容易区分。

使用颜色和纹理的图表示例显示数据|来源 /NC州立大学

同样适用于表单字段上的应用程序或错误状态中的选定选项。不要依赖于颜色来显示这些元素，而是将它们与更视觉的东西相当像图标，错误消息，甚至类似于粗体文本的东西。

spotify是一个很容易，使应用程序中的元素更容易，如应用程序中的选定选项更具可访问。

来源 /我们是陈有子的

上面的示例显示了Spotify的控制栏的图像。注意随机播放和重复图标。

选择其中一个图标时，它们将变为绿色。就其本身而言，图标变绿对于视力受损的用户来说并不好。图标很小，绿色与黑色对比不明显。

要解决此问题，Spotify简单地添加了图标下方的一个小点，以发出选项选择。这是一个如此简单而有效的解决方案。DOT不会改变应用程序的外观，并且不会混淆不是COLDBLININ的用户，但它大大提高了所需用户的经验。

在向用户提供类似信息时，请记住这一点。像这样一个微妙的细节真的可以走很长的路。

11.避免闪烁UI动画

我记得在小学的时候，听到孩子们在操场上谈论Pokémon的一集，这一集让孩子们癫痫发作。当时，这听起来更像是民间传说，但多年后我才知道故事有一些真相。

显然，“电动兵植物植物植物植物”集团有一个战斗场景，它使用迅速闪烁的红色和蓝色灯，持续大约六秒钟。据报道，来自那个场景的闪光灯造成了成千上万的孩子癫痫发作。

从那以来，由于这一集引起的癫痫发作的实际数量受到了质疑，但事件，现在被称为“神奇宝贝震惊”的原因之一是为什么我们看到光敏癫痫发作的节目和视频游戏的主题闪光灯。

这一集提醒我们，在我们的网站和视频内容中，我们需要多么小心地对待动画和效果。

癫痫是一种非常严重的条件，可能导致闪光灯触发的癫痫发作。这就是为什么确保我们关注所谓的“三个闪存规则。“规则指出，任何闪烁超过三次每秒闪烁的动画或内容都是不安全的。

最佳解决方案是只需避免您网站上任何闪烁的动画即可为每个人保持安全。

有助于可访问性和包容性设计的工具和资源

除了这11种让你的网站更容易访问的策略，还有大量有价值的工具和资源可以帮助你在无障碍和包容性设计的道路上。

W3C在编译可访问性工具和资源列表中进行了惊人的工作。你可以在此处查看资源的完整列表但是这里有一些让你开始的最爱：

W3C Web可访问性倡议指南

我在本文中提到的W3C Web可访问性倡议指南是Web可访问性指南的圣经。我强烈推荐为此站点加以书签，并定期转回它，因为信息始终正在更新。

该网站包括大量有用的提示、工具、现有立法的信息、法庭案例、演示和评估，所有这些都推动了无障碍网站运动。

Web Accessibility.

Web访问是一个自由工具，任何人都可以用来运行测试网站的访问程度。这是一个很好的资源，可以启动您的无障碍之旅。该工具将扫描您的网站并生成一个报告，显示表现良好的错误，警报和函数。

WebAIM颜色对比检查

我们在讨论颜色对比时讨论了这个工具，但我需要重申它的真正有用。始终如一地检查您的背景之间有足够的对比，前景元素将确保所有用户都可以轻松阅读您的内容并与您的网站互动，最终提供更好的用户体验。我经常转回这个工具，它简单但详细的布局让它非常易于使用。

这一切都归结于同理心

如果你做了研究，你会发现大量不同的资源，讨论创建一个可访问的网站和一般的DEI的好处。很多福利都围绕着为可访问性做出强大的商业案例。

您将读取优惠，例如：

• 可访问性可以提高SEO努力，因为Google有利于具有更好用户体验的网站
• 你将尽量减少您的法律风险。我们见过A.故事数量关于高调公司正在与ADA合规性诉讼服务。仅在2019年，有2,256个网站可用性诉讼提起。
• 创建可访问的网站意味着更多人可以与您的品牌互动，并使用您的网站，这将有助于增长您的受众。

虽然这些好处绝对是重要的，但在一天结束时，创建可访问的产品都归结为具有同理心。这是关于了解和关心用户的不同需求和挑战，并希望为每个人创造平等的体验。

作为设计师和营销人员，我们有权力和责任确保每个人都能使用我们创造的东西。在我看来，这是关于可访问性的最好的东西。它为每个人创造了更好的体验。