扩大你的覆盖范围

说实话，当我坐下来写这篇文章时，我有点不知所措。我的脑海中立刻涌现出很多东西——去除任何多余的div；使用链接表示URL，使用按钮表示事件和操作；在任何地方使用语义化HTML代替div；使用可变字体……清单还在继续。但是，我最终确定了一件简单实用的东西，人们可以通过它来改善他们的网站

扩大你的覆盖范围。

通过使你的网站更容易被更广泛的用户群体使用来扩大其覆盖范围。是的，我说的是可访问性。但我想你已经猜到了。毕竟，我倾向于谈论可访问性，并且更多地发布关于可访问性的推文，有时甚至在CodePen 上创建方便的示例来提供实际示例。

然而，当我谈论覆盖范围时，我不仅仅是在谈论那些失明并依赖辅助技术（例如屏幕阅读器）进行银行业务或支付水电费的人。我不仅仅是在谈论那些需要视频字幕的聋哑人。我不仅仅是在谈论那些色盲的人，他们需要颜色对比才能看到页面上的内容。当然，当我们想到可访问性时，我们的思绪会自动转向这里，但我希望我们能超越这一点。

使事情变得更容易

当人们在阳光明媚的地方使用手机时，使他们更容易看到你的网站。我们如何做到这一点？一种方法是确保我们的网站具有足够的颜色对比度，我们可以使用众多可用的在线颜色对比度检查器来实现这一点。通过减少 JavaScript 的使用，使人们在带宽较低时更容易获取他们需要的信息。通过提供字幕，使忘记戴耳机的人更容易在公共场所观看你的视频。将联系信息放在一个一致且易于查找的位置，以便压力大的用户可以联系到某人，而不会给他们的情况增加更多压力。通过增加网站上交互区域的大小，使一只手拿着小狗，另一只手拿着手机的人更容易成功地与链接和按钮进行交互。

如果你是一位 UX 或视觉设计师，这可能会激励你为现有的用户画像提出一些新的视角。此外，如果你的用户画像示例中包含小狗，那么更容易让人们参与进来。这不是我的规则；只是它就是这样运作的。我个人更倾向于小猫……也许是小狗和小猫？但我离题了。

如果你是一位开发人员，你可能认为这些事情都不在你所能影响或控制的范围内。作为一名开发人员，我个人并不完全同意这种想法；但为了成功地撰写这篇文章，让我们假设我同意。让我们看看开发人员可以做哪些事情来帮助扩大他们所参与的网站的覆盖范围。

将所有页面内容放入地标区域

从实际的角度来看，这通常意味着header、main、aside和footer，但也有一些其他的——在 ARIA 规范中阅读完整列表。为什么要这样做呢？嗯，屏幕阅读器用户在页面中导航的一种方便方法是——你猜对了——地标区域。W3C 的 WAI-ARIA 网站有一个关于不同类型的屏幕阅读器使用此功能的绝佳示例，所以一定要查看它，看看它到底有多有用！如果你使用页面模板，确保主模板设置正确会变得比以往任何时候都更容易。这绝对是一个开发人员可以帮助某些用户成功且轻松地使用他们帮助构建的网站的地方。

添加自动化检查

我们目前能够以自动化方式检查的可访问性问题的数量还处于早期阶段，你仍然可以拥有一个完全通过现有自动化检查但仍然无法访问的网站。也就是说，现在将其纳入你的自动化构建过程中仍然是值得的。好处是，随着新的自动化检查的出现，你可以改进你的代码库，这让你有时间适应现有的检查。使用模板 linter 进行静态检查。一些 IDE 扩展可以在你编写代码时提供实时反馈！自动化测试可用于动态代码检查。

将可访问性添加到你的心理清单中

哎呀，把它添加到物理清单中，直到它融入你的心理清单。无论哪种方式，都要把它放进去。以下是一些入门的想法

1. 如果你在收到的设计或功能规范上没有看到任何注释，请询问有关可访问性的问题。
2. 当你在本地或容器中运行站点时，检查键盘焦点顺序；使用TAB键四处移动，并确保你可以访问所有交互式元素。
3. 以可访问性为出发点审查 PR。如果有人在应该使用按钮的地方使用了链接——或者更糟糕的是，他们使用了没有键盘支持的 div——那么请提供反馈。这可能意味着你必须提醒自己（或者如果你从未学过，则学习）交互式元素已经存在的原生浏览器支持。