您的网站可以访问吗？

越来越多的企业正在转向在线，这很好，但如果整个部分人口无法使用该网站，则不会。 可访问性问题在许多网站中都很常见，导致许多问题可以相对容易地解决 - 这并不意味着您需要一个全新的网站！

根据世界卫生组织 2011 年关于残疾的报告，世界上有超过 10 亿人患有某种形式的残疾。 这相当于世界人口的约 15%。 这个数字只会随着人口老龄化而增长，而老年人的残疾风险/比例更高。

2018 年，英国政府将中央政府、地方政府组织、一些慈善机构和其他非政府组织网站制定为法律，以符合 WCAG2.1 准则。

然后在 2019 年，形成了欧洲无障碍法案。 甚至早在 1990 年，美国残疾人法案就涵盖了现在正在网站上解决的问题。 在某些情况下，公司现在会被告上法庭并败诉，例如 Domino's Pizza 案。

人们会毫不犹豫地确保一个场所在物理上是可访问的，那么为什么让您的网站可访问有什么不同呢？ 随着越来越多的企业主要转向在线业务，这一点从未像现在这样重要。

目的

我们的目标是创建包容性网站，因为可访问性是一项人权。

该网站不仅对每个人都更易于使用，而且我们可能会为客户带来更多潜在客户。 Click away pound 表示“未能提供可访问的消费者网站，2016 年英国零售商损失了 117.5 亿英镑。”

问题

主要问题是我们如何看待包容性甚至残疾本身。 我是 Adrian Roselli 和他通过自私的可访问性方法来解决这个问题的忠实粉丝。 这是 Adrian 在最近一次会议上的视频，我强烈建议您从不同的角度观看它，以了解人们可能面临的残疾和常见问题。

从本质上讲，他将常见的网站可访问性问题与每个人都经历过的日常情况联系起来，而不仅仅是残疾人。 例如对比度问题，他只是解释说，如果这个人在阳光下或明亮的地方使用笔记本电脑，这也是一个问题。 所以我们可以看到，确保我们的网站也可供更广泛的人群访问符合我们的最大利益。

正如您从他的视频和统计数据中看到的，有可访问性问题的人比您想象的要普遍得多。

常见的无障碍问题

所以我们决定让我们的网站具有包容性对每个人都有好处（我希望！）。 在解决可访问性问题时，人们首先想到的是我们需要构建额外的特性或功能，这些特性或功能的实施成本高且及时，或者会限制设计。

实际上，情况并非如此，很多问题都可以通过稍加思考、计划和使用 Adrian Roselli 自私的可访问性方法来非常简单地解决。

颜色和对比度

世界上大约有 8%（十分之一）的男性是色盲，所以让我们选择满足这些要求的调色板。
如果客户的网站使用了无法访问的颜色，那么询问他们是否愿意失去 8% 的潜在客户。 我敢肯定，如果你告诉他们这些，他们可能会重新考虑颜色。

在选择这些颜色的同时，还要确保您在它们之间使用良好的对比度，如果链接位于低对比度背景（阳光下的笔记本电脑……），您不希望它们被隐藏。 这是使用在线对比度检查工具之类的 5 分钟工作，或者如果您想特定于您的链接，请使用链接检查工具。

字体大小和选择

您的网站是否包含您希望人们理解的信息？ 我会怀疑是的。 因此，在他们按下返回按钮之前，让我们确保您网站中最重要的成分之一对眼睛来说是可消化的。

几乎每 10 名浏览您网站的人中就有 1 人的眼睛会出现某种问题（不包括色盲）。 在 40 岁时，只有一半的光线像 20 岁时一样通过视网膜。对于 60 岁以上的人，这一比例下降到 20%。

默认浏览器正文字体大小通常为 16px 或 1rem，这也是建议的“最小”字体大小，但让我们面对现实吧，这太小了！ 这里最常见的论点是“如果人们想要更大的文本，就可以放大”。 问题在于，大多数受此问题影响的人可能不知道如何缩放，因此我们不应假设这是他们的选择。

没有“最佳”大小或字体，但我建议正文字体大小接近 18px 或 1.125rem，具有适当的行高、符合条件的字体和最少的字体库。 Webaim 有一篇关于字体的好文章，并指出“每次遇到新的字体、字体或字体变体时，您的大脑都必须构建字符和图案的地图或模型，以便更快地解析单词和处理含义。 这需要认知努力和时间。 如果字体已经很熟悉，这种开销就会减少。”

Gill Andrews 有一篇关于排版错误的更全面的文章，如果您处理大量排版，非常值得一读。

图片

这里不多提，但要确保您的图像上有 alt 标签。 大多数 CMS 现在可以选择在您上传图片时添加图片 alt 标签。 如果图片很重要，请确保您确实对其进行了描述。 这篇 hubspot 文章很好地描述了 alt 标签使用的好坏。

如果图像不重要并且纯粹是装饰性的，例如背景图案，则将标签留空。 只要确保它在标记中实际上是空的，就像这样：alt=””，否则它会被标记为缺少 alt 标签。

要记住的一件重要事情是，您不应将图像用于重要文本（如标题），因为屏幕阅读器和 Google 无法读取它们。 将文本放在图像上也要小心，因为它可能会因背景而变得不可读。

结构

即使您遵循了上述基础知识，通常也会被忽视的一件事是页面的实际语义结构。 许多人被字体或标题的大小所困扰，并将它们用于样式目的，而不是定义页面信息层次结构。

这不仅会影响 Google 对您的内容的解释方式，而且使用屏幕阅读器的人会使用您的结构标记作为导航。 Yoast 有一篇关于标题的精彩文章，您应该花一些时间阅读。 一些简单的建议是在你的页面上有一个 <h1> 元素，然后在你的下一个重要部分有一个 <h2> 元素。 如果您有子部分的子项，则使用 <h3> 等：

<h1>通常是您的页面标题</h1>

<p>这里有一些段落文本</p>

<h2>页面的下一个重要部分</h2>

<p>这里有一些段落文本</p>

<h3>一些不那么重要但与上面的 h2 相关的东西</h3>

<p>这里有一些段落文本</p>

<h2>页面的下一个重要部分</h2>

围捕

我希望您能看到，通过遵循上面这些简单的规则，您将使您的网站易于访问，并为每个访问它的人带来更愉快的体验。 不仅如此，您还提高了您在 Google 的地位，因此这对每个人都是双赢的。

如果您不确定您的网站是否符合这些标准，或者只是想帮助提高您网站的可访问性，请与我们联系。