在当今数字时代，Web 应用程序已经成为人们生活的一部分。然而，这种随处可见的数字化工具往往也意味着许多人不能够访问 Web 信息，并享受数字化国际。 无障碍性 相关的设计与开发需求越来越被 Web 版本关注，以确保 Web 上的所有用户都能够访问和使用信息。无障碍性可以为你的网站或应用程序带来很多好处，如拓展你的受众，提高品牌信誉，提高整个网站的搜索引擎可访问性等。

第一步：为你编写的代码添加“标签”

在编写 HTML 的时候，许多开发者经常忽略了属性中的语义"词汇"，这可能会导致网站不够无障碍性。

其中，主要标签有：

h1-h6:定义 html 的标题级别
ol：定义有序列表
ul：定义无序列表
a: 超链接、锚点
img: 图片

在编写Javascript时，如果标签没有被正确的定义它所需要的角色和语义，可能会影响到具有不同需求的用户，并可能导致自动化工具无法访问这些节点。因此，很好的方法是使用 JavaScript / DOM，以确保可以正确地遍历和控制每个元素。

以下是一个例子，使用javascript 修改标题文本内容：

const heading = document.getElementById('title');
heading.innerHTML = '这是新标题';

在这里，我们使用JavaScript 选择特定的标签id并更改其文本内容。

第二步：添加闪烁和暂停控制

一些用户可能患有特定类型的癫痫，他们可能会对不断闪烁的内容产生反应。网页可能会使用闪烁定制赞美之词或背景视频等编辑方式，但是这样做可能会对该类用户造成颠狂的反应，因此这种方法并不是一个好方法。然而，您可以通过添加CSS或JavaScript代码来控制闪烁或暂停，以帮助这些受众留在您的网站上。最有效的做法是安装插件来去掉背景色和防止闪烁。

以下是一个例子，显示如何通过 JavaScript 暂停和停止一个 video 播放：

const video = document.getElementById('myVideo');

document.getElementbyId("playbutton").addEventListener('click', function() {
  video.play();
});

document.getElementbyId("pausebutton").addEventListener('click', function() {
  video.pause();
});

在这里，我们使用 JavaScript 控制特定元素的播放和暂停。

第三步：为页面添加描述文本

在您的Web页面中，您还可能会包含其他屏幕阅读器无法识别的图像，视频或音频内容。这意味着那些使用网络技术的人将无法理解它们的意义。解决这个问题的方法是通过添加文字描述来传递这些信息。文本的质量不仅应该解释内容，还应该传达图片或视频的感知特征和环境，这些感知特征和环境用户可能无法通过各种媒体进行感知。这样，无论用户使用屏幕阅读器、辅助性技术还是普通浏览器，都可以获得完整的信息。

例如，以下是如何将“alt”属性用于img标记的示例：

<img src="image.jpg" alt="这是图片" />

在这里，我们在img标记中添加了一个alt属性，描述该内容是一张图片。

第四步：使用 ARIA 属性

ARIA是一种用于工具或网站界面构建的网站数据属性集，它有助于Web开发人员在不增加复杂性的情况下增强可访问性。它主要尝试解决屏幕阅读器无法理解的网站元素，以及一些用户可能需要的功能，但实际上在HTML规范中不存在。

例如，以下是如何为网站的表格添加ARIA属性以增强可访问性的示例：

<table aria-describedby="instructions">
  <caption>A simple table</caption>
  <thead>
    <tr>
      <th>First name</th>
      <th>Last name</th>
      <th>Job title</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>John</td>
      <td>Doe</td>
      <td>Developer</td>
    </tr>
    <tr>
      <td>Mary</td>
      <td>Smith</td>
      <td>Designer</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td colspan="3" id="instructions">This is a simple table containing first name, last name and job title</td>
    </tr>
  </tfoot>
</table>

在这里，我们添加了一个新属性aria-describedby，以帮助屏幕阅读器阅读表单。

总结：

本文详细介绍了JavaScript 操作无障碍性的教程。如果将无障碍性视为Web设计和开发的关键组成部分，它可以有效地拓展访问您网站和应用程序的人口。使用本文中提到的技术，您可以从中受益，同时也更好地服务于网站用户。无障碍性设计和开发不仅可以拓展您的目标用户群体，还可以提高品牌信誉，增强对您网站的访问量。

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

JavaScript 无障碍性教程

第一步：为你编写的代码添加“标签”

第二步：添加闪烁和暂停控制

第三步：为页面添加描述文本

第四步：使用 ARIA 属性

纠错反馈