无障碍网站的常用技巧总结-JavaScript中文网-JavaScript教程资源分享门户

无障碍网站的常用技巧总结

随着社会的进步和人们对多元化和包容性的认知的不断提高，无障碍网站的重要性越来越被人们所重视。一个无障碍的网站可以让所有用户都能够方便地获取网站上的信息和服务，无论是在使用设备或者是有特殊需求的用户。本文将介绍无障碍网站的常用技巧，分别从 HTML 标记、CSS、JavaScript、图片、视频等方面进行详细讲解。

HTML 标记

（1）正确的 HTML 文档结构

使用正确的 HTML 文档结构可以帮助屏幕阅读器准确地识别网站组成部分，使得用户更容易理解网站的内容。代码示例：

// javascriptcn.com 代码示例
<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>无障碍网站</title>
  </head>
  <body>
    <h1>欢迎来到无障碍网站</h1>
    ...
  </body>
</html>

（2）使用语义化标签

使用语义化标签可以让网页更容易被阅读器和搜索引擎识别，从而提高无障碍性。例如，<header>、<main>、<nav>、<section>、<footer> 等标签可以用于页面结构的语义化。代码示例：

// javascriptcn.com 代码示例
<header>
  <h1>网站标题</h1>
  <nav>
    <ul>
      <li><a href="#">导航链接1</a></li>
      <li><a href="#">导航链接2</a></li>
      <li><a href="#">导航链接3</a></li>
    </ul>
  </nav>
</header>

<main>
  <section>
    <h2>内容标题1</h2>
    <p>内容段落1</p>
  </section>
  <section>
    <h2>内容标题2</h2>
    <p>内容段落2</p>
  </section>
</main>

<footer>
  版权信息
</footer>

（1）使用合适的颜色对比度

使用合适的颜色对比度可以确保用户可以轻松地辨认出文字和其他元素，而不需要经过较长时间的猜测。WCAG 社区建议至少使用 4.5:1 的文本和背景色对比度，以保证适应视障人士的需要。代码示例：

// javascriptcn.com 代码示例
body {
  color: #333;
  background-color: #fff;
}
a {
  color: #007bff;
}
/* 背景色 */
.bg-light {
  background-color: #f8f9fa !important;
}
/* 文字 */
.text-primary {
  color: #007bff;
}

（2）提供视觉辅助提示

视觉辅助提示，如鼠标悬停时的提示和焦点工具提示，可以帮助用户理解页面元素的详细信息。代码示例：

a:hover {
  text-decoration: underline;
  title: "点击此链接查看更多内容";
}
button:focus {
  outline: 2px solid #007bff;
  title: "点击此按钮提交表单";
}

JavaScript

（1）使用 ARIA 属性

ARIA（Accessible Rich Internet Applications）属性提供了一种描述网页元素的能力，特别是对于那些仅仅依靠屏幕阅读器等非视觉技术的用户。代码示例：

<button aria-haspopup="true" aria-expanded="false" role="button">
  更多选项
</button>
<ul role="menu" aria-labelledby="options">
  <li role="menuitem">选项一</li>
  <li role="menuitem">选项二</li>
  <li role="menuitem">选项三</li>
</ul>

（2）键盘快捷键

很多用户使用键盘来浏览网站，因此为键盘用户提供快捷键是非常有用的，例如，Tab 键、Enter 键等。代码示例：

<button accesskey="b">预订</button>（快捷键为 Alt+B）

图片

（1）提供替代文本

为页面中的所有图片提供替代文本是必要的，这些文本也称为 alt 标签，因为它定义了替代文本说明，当图片不可见时，该文本将用于替代。代码示例：

<img src="example.jpg" alt="示例图片">

（2）使用响应式图片

当网站的宽度在各种设备上有所不同时，使用响应式图片可以让你的网站在不同的设备上具有更好的显示效果。代码示例：

<picture>
  <source srcset="example-large.jpg" media="(min-width: 1200px)">
  <source srcset="example-medium.jpg" media="(min-width: 768px)">
  <img src="example-small.jpg" alt="示例图片">
</picture>

视频

对于视频内容，需要考虑如何使其能够较好地被非视觉用户所理解。以下是些常见的解决方案：

（1）使用手写的字幕

对于视力正常的用户来说，字幕的作用可能不会特别明显，但对于聋哑人士来说，字幕是观看视频的唯一方式。代码示例：

<video>
  <track kind="captions" label="英文字幕" src="example-en.vtt">
  <track kind="captions" label="中文字幕" src="example-zh.vtt" default>
  <source src="example.mp4" type="video/mp4">
</video>

（2）使用手写的音频说明

手写的音频说明可以帮助那些无法得到视频的声音和特征的用户理解视频。代码示例：

<video>
  <source src="example.mp4">
  <track kind="description" label="视频说明语音" src="example-desc.mp3">
</video>

总结

通过本文的学习，你应该了解到如何使你的网站更具无障碍性，以便于亿万人群更好地使用网站。今天的技术，为专注于无障碍网站提供了丰富的解决方案，通过这些解决方案可以帮助你的网站更加无障碍化，为所有用户提供更加友好的在线体验。

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