掌握 Web 可访问性：前端开发人员指南

目录

一、引言

二、什么是网页无障碍？

三、为什么网络无障碍很重要？

IV. 如何创建易于访问的网站
A. 使用语义 HTML
B. 提供替代文本
C. 使用易于访问的颜色和对比度

六、结论

介绍

虽然开发美观实用的 Web 应用是前端 Web 开发者的主要目标，但确保所有用户都能访问的需求有时会被忽视。WebAIM Million 报告调查了排名前 100 万的网站主页，发现其中只有 3.7% 的网站遵循了最基本的无障碍指南。这意味着 96.3% 的网站无法为残障人士提供无障碍访问，我认为这令人感到悲哀。我们将在本文中探讨在线无障碍，包括它的含义、它的重要性，以及一些提升网站无障碍性的建议。

什么是网络可访问性？

构建方便残障人士（尤其是认知或肢体障碍人士）使用的网站和网络应用的技术被称为“网页无障碍”。许多残障人士使用辅助技术（例如屏幕阅读器或盲文显示器）来浏览互联网。

因此，Web 无障碍访问需要部署必要的工具和资源，将这些辅助技术融入您的网站，使每个人都能访问您的数字内容并进行交互。通过高度重视 Web 无障碍访问，您可以确保您的网站具有包容性，所有用户（无论其能力如何）均可访问。

为什么网络可访问性很重要？

虽然我们在使社会各个方面（例如教育、就业、医疗保健和公共空间）更加包容方面取得了进展，但仍有许多工作要做，以确保每个人都能充分参与和发展。

网络无障碍至关重要，因为它确保每个人，无论其能力或残障，都能访问和使用网络。它还有助于消除信息和技术障碍，促进包容性、多样性和平等。

作为一名前端开发者，我曾经因为构建的网站缺乏或完全没有无障碍功能而感到内疚，主要是因为无障碍功能不在我的项目描述范围内，而且我当时也没有意识到它的重要性。但现在我意识到了，我相信你也意识到了，那么我们如何才能将无障碍功能融入到我们的项目中呢？在下一节中，我们将探讨使网站无障碍的不同方法。

如何创建可访问网络的网站

为您的网站添加网页无障碍功能，从设计流程开始。用户界面设计师需要考虑字体大小、字体类型、配色方案以及整体网页结构。
需要注意的是，网页无障碍功能是一个需要所有人共同参与的迭代过程。网页设计师、开发人员和内容撰写者都应尽职尽责，确保他们所构建的数字内容能够被所有与之交互的用户轻松访问。以下是前端开发人员可以改进网页无障碍功能的几种方法：

• 使用语义 HTML：为什么开发者使用<div>而不是语义标签？因为他们想让他们的 HTML 看起来更像……div！我知道，我知道，这是个蹩脚的笑话。通常，把所有内容都放在 div 标签里就完事了要容易得多，但最佳实践是使用与页面内容和结构相对应的语义 HTML 标签。语义 HTML 不仅对网页可访问性很重要，它还能提升网站的搜索引擎优化 (SEO)。当你在设计网页导航时，你的代码应该如下所示：

<nav>
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">  About</a></li>
    <li><a href="#">Services</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</nav>

这样就能准确描述该段代码的用途，无需在代码中添加注释。你还可以使用 main 标签包裹网页的主要部分，如下所示：

<main>
  <h1>Welcome to My Website!</h1>
  <p>Here is some information about my website...</p>
</main>

aside 标签还可用于指示与页面主要内容无关的内容，如下面的代码：

<main>
  <h1>Welcome to My Website!</h1>
  <p>Here is some information about my website...</p>

  <aside>
    <h2>Related News</h2>
    <ul>
      <li><a href="#">Article 1</a></li>
      <li><a href="#">Article 2</a></li>
      <li><a href="#">Article 3</a></li>
    </ul>
  </aside>
</main>

总体而言，语义 HTML 使得使用辅助技术浏览网页变得更加容易。

• 提供替代文本：当您向网站添加图片、视频或任何视觉内容时，您应该始终提供内容描述的文本描述。在 HTML 中，这被称为 alt 文本。此描述可帮助屏幕阅读器理解您网站的整体内容。以下是视频和图片标记的 alt 文本代码示例。

<div>
  <h2>My Video</h2>
  <video src="my-video.mp4" alt="A person skiing down a mountain"></video>

  <h2>My Image</h2>
  <img src="my-image.jpg" alt="A group of people hiking in the mountains">

  <h2>My Chart</h2>
  <figure>
    <img src="my-chart.png" alt="A line chart showing the growth of a company over time">
    <figcaption>A chart showing the growth of my company over time</figcaption>
  </figure>
</div>

上面的代码不仅为页面上的所有图形提供了替代文本，而且还使用名为 figure 的语义 HTML 标签来包装图像，以更准确地表示页面上的内容。

• 使用易于理解的颜色和对比度。为什么颜色对比度差的网站要过马路？去另一个地方（网站）。这些老掉牙的笑话总是萦绕在我的脑海里，但我保证，我现在就停！使用易于理解的颜色和对比度主要是设计师的工作，但如果您是一位兼任设计师的网页开发者，那么本节内容对您来说会很有帮助。考虑视障人士的需求非常重要。请始终牢记，您能清晰地看到内容并不意味着每个人都能。

以下是设计网页可访问性时需要注意的一些关键事项；

• 仔细选择颜色：考虑背景和文本之间的对比度。深色背景不应该搭配深色文本。您可以使用此链接检查设计的对比度。

为了获得更好的用户体验，不要仅仅依靠颜色来向用户传达信息。链接和操作按钮不应仅使用颜色来指示；您可以在链接文本中添加下划线，以指示其可点击。
使用清晰易读的字体：为网站选择字体时，请选择易于阅读的字体。请记住，Arial、Verdana 和 Helvetica 等无衬线字体通常比衬线字体在屏幕上更易于阅读。

• 使用合适的字体大小：根据 Web 内容可访问性指南 (WCAG)，正文的最佳字体大小为 16px。您可以点击此处了解更多指南信息。

• 测试您的设计：在不同的设备和屏幕分辨率上测试您的网站，以确保您的字体大小和类型清晰易读且所有用户均可访问。

• 使用 ARIA 属性：ARIA（无障碍富互联网应用程序）属性是可以添加到 HTML 标签的附加属性，用于提供有关元素角色和属性的更多信息。屏幕阅读器可以读取这些属性，从而提升用户体验。

虽然 ARIA 在某些情况下可以提供无障碍优势，但它应该仅在其他无障碍工具和策略不足的情况下作为最后的手段。过度使用或误用 ARIA 实际上会给残障人士带来更多障碍，而不是改善他们的体验。更多上下文，请参阅“关于 ARIA 的常见误解”

。以下是一个包​​含 ARIA 属性的标记示例：

<div>
<button aria-label="Search">
  <i class="fa fa-search"></i>
</button>
<div role="tabpanel" aria-labelledby="tab1">
  <p>Tab panel content goes here.</p>
</div>
<button aria-expanded="false" aria-controls="collapse1">
  Show More
</button>
<div id="collapse1" aria-hidden="true">
  <p>Additional content goes here.  </p>
</div>
</div>

上面的示例提供了有关搜索按钮角色的信息，其 aria 文本为“搜索”。aria-expanded属性用于指示关联元素中的内容div是展开还是折叠。aria-controls属性用于引用关联的 的 ID div，而aria-hidden属性用于指示内容在折叠时是否隐藏。

注意：ARIA 属性由W3C ARIA 规范定义。有一组标准化的属性名称，旨在与屏幕阅读器配合使用。

• 测试网站的可访问性
  有很多资源可以轻松测试网站的可访问性。一些常用的工具包括：

  • WAVE：这是一款免费工具，可以访问您的网站，检查其可访问性，并生成报告。了解更多关于 WAVE 的信息。
  • AXE：这是一款免费的 Chrome 扩展程序，旨在通过自动化测试来测试和改进网页的可访问性。了解更多关于 AXE 的信息。
  • LIGHTHOUSE：Lighthouse 是一款流行的开源工具，开发者用它来测试网站的性能和可访问性。您可以在这里获取。
  • NVDA：NVDA（非可视化桌面访问）是一款免费的开源屏幕阅读器，它使盲人或视障人士能够访问和浏览网页以及计算机上的其他应用程序和软件。您可以下载它来与您的网站互动，并深入了解哪些地方可以改进可访问性。您可以在此处下载。

结论

在本文中，我们探讨了什么是可访问性、它为何重要，以及如何利用 Web 可访问性提升用户体验。将 Web 可访问性纳入所有 Web 项目，是我们所有前端开发者的道义责任，旨在为所有人创造包容性。我希望不久的将来，可访问性会变得与提升网站美观度同等重要。
祝您编程愉快！