让你的网站更易访问的小技巧

对于初学者来说，无障碍性可能令人望而生畏。即使你满怀热情，要开发符合标准、完全无障碍的网站和应用程序，学习曲线仍然十分陡峭。而且很难找到正确的建议，因为这是一个不断变化且越来越拥挤的领域。

我写这篇文章是为了给你一些关于一些小事情的建议，这些小事情可以带来巨大的改变，同时希望不会影响你的开发过程太多。

让我们深入了解！

文档结构和语义

用有组织的、语义化的方式构建你的 HTML，这可能并不让人意外，它会带来很大的改变。屏幕阅读器依赖于结构良好的文档，以便遵循连贯的叙述，因此请确保你正在使用 HTML5 规范提供的元素，以便及时有效地响应。

如果你不确定如何正确地标记你的工作，请查看一些资源，例如 HTML5 Doctor、Code Academy，当然还有 CSS-Tricks。你还可以查看文章，例如 “以无障碍性为中心的 HTML 编写” 和 “语义结构”，这些文章可以帮助你朝着正确的方向前进。

让我们看看三个可以帮助确保文档结构良好和语义化的具体事项。

使用单个 <main> 元素

构建负责任的、语义化的文档结构的一个好例子是只使用一个 <main> 元素。它应该作为页面上对用户最重要的内容的标识。

为它添加一个 ID，并在主 <header> 中提供一个跳过链接，如下所示

<header role="banner">
  <h1>Your main page title</h1>
    <a href="#main-content">Skip to the main content</a>
 </header>
    
<!-- Further down the document -->
<main id="main-content">
  <!-- Put your main body of content in here and other really important stuff -->
</main>

这个小技巧应该能极大地帮助你的屏幕阅读器用户，因为他们可以继续跳过花哨的部分，直接进入你的重要内容。它也同样适用于键盘用户，因为他们可以跳过花哨的部分，直接进入你的重要内容。

另一个不错的做法是在跳过链接上添加一个 :focus 样式，使其可见。尝试在 GitHub.com 上按你的 Tab 键。很酷，对吧？

适当使用元素

所以，<button> 元素很难正确地设置样式，对吧？但这并不意味着你应该将你的 JavaScript 事件附加到 <div> 或 <a href="#"> 上。你看，当你使用 <button> 时，你免费获得了键盘事件。你也在帮助屏幕阅读器用户，因为它会正确地宣布元素。请查看此示例

document.getElementsByTagName('button')[0].addEventListener('click', evt => {
  alert('Oh, hey there!');
});

如果用户将焦点放在该按钮上并按 Enter 键，该事件就会触发。这会让你的生活和用户的生活都变得更轻松。很值得，对吧？

查看 Pen 按钮点击示例，作者 Andy Bell (@hankchizljaw) 在 CodePen 上发布。

确定你的标题层次结构

屏幕阅读器用户经常使用标题结构来浏览页面。这意味着我们应该帮助他们，为他们创建一个很好的层次结构。让我们看一个标准的博文

<main id="main-content">
  <article>
      <!-- The page title is up in the main <header> in this instance -->
      <h2>My awesome blog post</h2>
      <p>Vestibulum id ligula porta felis euismod semper.</p>
      <p>Vestibulum id ligula porta felis euismod semper.</p>

      <h3>A sub-section of this post</h3>
      <p>Vestibulum id ligula porta felis euismod semper.</p>

      <h4>A sub-section of the sub-section</h4>
      <p>Vestibulum id ligula porta felis euismod semper.</p>
  </article>
</main>

使用该示例，用户可以导航到“我的精彩博文”的开头，然后可以轻松地跳到子部分和嵌套子部分。他们还可以跳回到上一级。这只是帮助他们尽可能轻松地消费你所制作的内容的一种好方法。

建议页面只有一个 <h1> 元素，即使 W3C HTML5 规范 规定你可以使用多个。我个人同意只使用一个 <h1>，但你可以使用多个，只要你遵循良好的结构和层次结构。这就是关键。

确保你的颜色对比度正确

要符合 WCAG 2.0 AA 标准，你需要使普通文本的对比度比率达到 4.5:1。这包括你的段落、按钮、导航等。对于较大的文本，例如标题，你需要达到 3:1 的比率。我认为这应该是你的最低要求，因为使用诸如 Tota11y、Contrast 和 WebAim 对比度检查器 之类的工具，可以很容易地实现这一点。你仍然可以在你的设计中获得大量的颜色平衡和变化。

对比度如此重要的原因是，环境差异很大，你可能甚至没有考虑到，比如强烈的阳光和低质量的显示器。再加上视觉障碍或偏头痛，你可能会给你的用户带来问题。

确保对比度正确会对你的大量用户产生巨大的积极影响。

负责任的文本标签

我们都构建过一个项目列表，其中包含一个非描述性的、但视觉上吸引人的“更多”按钮，对吧？更多什么？我们需要对此更加负责，并提供一些上下文。

实现这一点的一种方法是使用 CSS 视觉隐藏描述性文本，并从屏幕阅读器中隐藏非描述性文本。使用 display: none; 很诱人，但屏幕阅读器可能会忽略设置了此属性的元素，因此我们需要更具创造性。我使用类似于这个小助手的东西

.visually-hidden { 
  display: block;
  height: 1px;
  width: 1px;
  overflow: hidden;
  clip: rect(1px 1px 1px 1px);
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(1px);
  white-space: nowrap;
  position: absolute;
}

有了这个 CSS，我们就可以做这样的事情

<a href="/link-to-your-page">
  <!-- This is hidden from a screen reader, but visible visually -->
  <span aria-hidden="true">More</span>

  <!-- This is visible to a screen reader, but visually hidden -->
  <span class="visually-hidden">Continue reading: "Your post title here"</span>
</a>

有视力的用户只会看到“更多”，而屏幕阅读器用户会听到“继续阅读：‘你的帖子标题在这里’”。这两组用户都很满意。

你也可以通过在 <a> 标签上使用 aria-label 来实现上述功能。这会为屏幕阅读器覆盖其中的文本

<a href="/link-to-your-page" aria-label="Continue reading: 'Your post title here'">
  More
</a>

用一些小的排版调整带来巨大的影响

始终牢记，有视觉障碍或学习障碍的人可能会尝试阅读你的内容，因此对你的排版进行一些小的调整会大有帮助。

文章等正文内容的最小尺寸应为 16px（或等效单位）。同时，将 line-height 增加到大约 1.5 也是值得的。行间距可以帮助有阅读障碍的用户更好地理解你的内容。尺寸和间距的结合也适用于老年人和/或视力不好的人。即使是小的摘要和旁注内容也应该至少为 12px（或等效单位）。低于此尺寸的任何内容都会让那些难以阅读的用户感到疏远。

另一个技巧是，如果你的内容非常复杂，则突出显示关键词和短语。这不仅有利于那些处理内容速度稍慢的用户，也有利于那些喜欢浏览文章的人，就像我一样。

最后，关于这一部分，我建议你谨慎选择字体。带有复杂连字符和装饰元素的字体可能非常分散注意力，因此，也许应该将这些字体的使用限制在主要的、大型的标题中。据建议，无衬线字体更适合有阅读障碍的人。查看 这篇文章，了解更多相关内容以及其他文本格式化技巧。

增强键盘支持

您可以做一些小调整来帮助主要使用键盘浏览网站的用户。

例如，您有一个小按钮，点击时会显示一个对话框。您应该将一个事件附加到 Escape 键，以便隐藏它。以下是一个示例代码片段

document.addEventListener('keyup', (evt) => {
  if(evt.keyCode === 27) {
    // Run whatever code hides your dialogue
  }
});

查看 CodePen 上 Andy Bell 的示例：Escape 键演示 (@hankchizljaw)。

您可以为键盘导航用户做的另一个调整是不隐藏焦点。浏览器通过 outline 为我们提供免费的焦点状态。我知道它可能看起来很丑，但对于键盘用户来说非常有用。如果您想摆脱这种蓝色光晕，我理解—只需使用 :focus 伪选择器，以代替它添加一个明显的更改状态。

.your-element {
  background: red;
}

.your-element:focus {
  outline: none; /* Reset the default */
  box-shadow: 0 0 0 3px black; /* A very obvious state change */
}

不要仅依赖颜色来传达状态更改

最后谈一个非常重要的问题。不应该仅依赖颜色来传达状态更改。以下是一个示例场景。

您有一个用于提交表单的按钮。您编写了一些漂亮的 JavaScript 代码，使它在发送数据时变灰。然后，它会根据状态变为绿色或红色。

对于色盲用户来说，这是一个噩梦。对于他们来说，按钮的变化可能微乎其微，以至于他们无法注意到，因此他们可能会不断点击按钮，变得非常沮丧。这不是理想的情况。

因此，与其依赖颜色，不如用一个支持按钮状态的响应状态消息来增强它。

查看 CodePen 上 Andy Bell 的示例：增强状态更改通信演示 (@hankchizljaw)。

该示例可以很好地快速告知用户发生了更改，并且颜色、文本和图标的使用清楚地传达了这种更改。在响应处理期间禁用按钮也有助于用户。

总结

这些小技巧应该会让您的用户体验到很大的改变，我希望您能深入研究您的项目并实施其中的一些技巧。

您还应该继续学习有关无障碍性的知识。我建议在 Twitter 上关注 Heydon Pickering (@heydonworks)、Scott O’Hara (@scottohara)、Laura Kalbag (@laurakalbag) 和 Rob Dobson (@rob_dodson)。我还建议您查看 Inclusive Components 和 A11y Project 等资源。

您的知识越多，您的网站和产品对更广泛的用户群体就越好。这只有好处，对吧？