无障碍 Web 开发的十大技巧

网络已经成为人们生活中不可或缺的一部分。而对于那些身体障碍的人来说，互联网对于他们的生活有着更重要的作用。但是，许多网站并没有为身体障碍的人提供友好的用户体验。无障碍性是 Web 开发中很重要的一部分，因为它不仅使得残疾人对内容能够更容易的获取，并且还可以改进整体网站的可用性和可访问性。在这篇文章中，我们介绍无障碍 Web 开发的十大技巧，它们能够帮助开发者打造更为友好和易访问的网站。

技巧一：无障碍表单

表单是网站的重要组成部分，它们提供了用户输入信息的机会。但是，很多人都忽视了它们的无障碍性。以下几个技巧可以帮助开发者为表单添加无障碍性。

• 表单控件应该使用标签标识类型。例如：label 下面的 input 标注为 email 以便屏幕阅读器识别并提示给用户。
• 为表单中的所有必填字段添加星号，这样屏幕阅读器就会发出提示。
• 表单提交按钮应该使用明确的标签，以便屏幕阅读器可以读出按钮的用途。

以下是示例代码，展示了一个无障碍表单的实现方式：

<label for="email">
  Email Address:<span aria-hidden>*</span>
</label>
<input id="email" type="email" required>
<button type="submit">Submit</button>

技巧二：无障碍图片

在 Web 开发中使用图片，这些图片可能是标识性的，也可能是图像本身提供的信息，例如组织的 logo 或产品的照片。以下几种技巧可以增强图片无障碍性。

• 图像应该使用 alt 属性，这样当图像无法显示时，屏幕阅读器就会读取 alt 属性中的文本。
• 对于没有特意意义的图像，可以在 alt 属性中加入空值，比如 alt=“”。

以下是示例代码，展示了一个无障碍图片的实现方式：

<img src="logo.png" alt="公司 Logo">
<img src="icon.png" alt="">

技巧三：无障碍键盘操作

上网的大多数人都使用鼠标进行网站导航和交互。但是，从技术层面上说，网站是应该被键盘完全操作的。开发者可以使用以下技巧让网站更易于键盘操作。

• 使用 tabindex 属性来确定焦点顺序。通过 tabindex 为键盘用户提供优先级，这些用户通常比其他用户更倾向于使用 tab 键切换元素。
• 通过 :focus CSS 伪类来设计焦点样式。这对于视觉障碍用户特别重要，他们需要知道当前输入焦点的位置。

以下是示例代码，展示了一个无障碍键盘操作的实现方式：

<a href="about.html" tabindex="1">About Us</a>
<a href="contact.html" tabindex="2">Contact Us</a>

<style>
  a:focus {
    outline: 2px solid #0077FF;
  }
</style>

技巧四：使用语义化 HTML 结构

语义化 HTML 是无障碍可访问性的基础，HTML 元素的正确使用很重要。以下是一些技巧，以帮助开发人员构建更具有语义性的 HTML 结构。

• 使用正确的 HTML 元素，例如使用标题元素 <h1> 至 <h6> 对标题进行标记。
• 使用 aria-* 属性使得非标准元素更有语义性。

以下是示例代码，展示了一个使用语义化 HTML 结构的实现方式：

// javascriptcn.com 代码示例
<header>
  <h1>网站标题</h1>
  <nav>
    <ul>
      <li><a href="#">Menu1</a></li>
      <li><a href="#">Menu2</a></li>
      <li><a href="#">Menu3</a></li>
      <li><a href="#">Menu4</a></li>
    </ul>
  </nav>
</header>

技巧五：无障碍视频

视频成为网站越来越流行的元素之一，但是，对于那些不能听到音频的人来说，这些视频变得没有意义。以下技巧可以帮助开发者为视频添加无障碍性。

• 使用 aria-* 属性，如 aria-describedby 来描述视频的信息，如说什么、表演什么等信息。
• 使用字幕来为音频文件提供文本等其他形式的信息。

以下是示例代码，展示了一个无障碍视频的实现方式：

<video src="video.mp4" controls autoplay aria-describedby="video-description">
  <track src="subtitle.vtt" kind="subtitles" srclang="en" label="English Subtitle" />
  <p id="video-description">
    这个视频说明如何使用产品。
    观看后请点击下方“购买”按钮。
  </p>
</video>

技巧六：无障碍链接

链接对于用户来说是专门设计用于导航网站的重要部分。许多用户在使用键盘导航网站时希望更便捷地访问链接，并且希望页面中的链接能为引导用户以及描述链接的信息。 以下是几个在无障碍网站链接设计时应注意的事项。

• 为链接提供清晰的描述性文本，避免使用模糊的文本，如“点此”。
• 优化链接的排版和样式以迅速地让用户发现其中的链接信息。

以下是示例代码，展示了一个无障碍链接的实现方式：

<p>请前往<a href="about.html">关于我们</a>页面了解相关信息。</p>

技巧七：无障碍自定义样式

许多开发人员在使用自定义样式时忽视了无障碍性问题。以下是设计自定义样式时应注意的问题。

• 确保文本能够与背景色相对比，以保证较佳的可读性。
• 使用 :hover 和 :focus CSS 伪类设置样式，以允许键盘用户查看其被聚焦的位置。

以下是示例代码，展示了一个无障碍自定义样式的实现方式：

// javascriptcn.com 代码示例
<style>
  a {
    color: #FFFFFF;
    background-color: #0077FF;
  }
  
  a:hover,
  a:focus {
    color: #000000;
    background-color: #FFFFFF;
  }
</style>

技巧八：无障碍组件

Web 应用程序通常需要包含各种组件，例如下拉菜单、手风琴、标签页和模态窗口等。以下是设计无障碍组件时应注意的事项。

• 必须考虑键盘和屏幕阅读器用户的操作方式。
• 让组件的行为和交互具有无障碍性，例如利用 ARIA 标准，通过 aria-* 属性传达更多信息。

以下是示例代码，展示了一个无障碍下拉菜单的实现方式：

<label for="select-menu">选项选择：</label>
<select id="select-menu" aria-label="选项">
  <option value="option-1">选项1</option>
  <option value="option-2">选项2</option>
  <option value="option-3">选项3</option>
</select>

技巧九：无障碍符号

一些文本中有成堆的字符和符号，显示这些字符和符号需要使用 Unicode，包括符号、箭头和三角形等。以下是设计无障碍符号时应注意的事项。

• 使用 HTML 实体和 Unicode 字符来比通用字符更具有描述性和可读性。
• 考虑使用 ARIA 属性和文本来提供更多有关符号和字符的信息。

以下是示例代码，展示了一个无障碍符号的实现方式：

<p>请点击“下一页”按钮<kbd>●</kbd>继续向下翻阅</p>

技巧十：测试无障碍性

为了确保网站能够为所有人提供无障碍性体验，开发者需要测试它。以下测试方法可以识别无障碍性问题。

• 使用评估工具，例如 WebAIM 和 Wave，以便检测网站中的无障碍性问题。
• 进行人工测试，以模拟用户不同的使用情景。

总结

无障碍性不仅仅是一个优秀的设计，而且是对于每个网站和 Web 应用程序的责任。 无障碍性使用一些已知的技术和标准，以提高数字产品的可用性和易用性，最终可以让每个人都能轻松地获得网站上的信息。这十个技巧提供了一些改进网站无障碍性的方法，让用户更轻松地访问您的网站。

来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/653df0f97d4982a6eb78eb43