跳到主要内容

HTML 可访问性标准

介绍​

HTML可访问性（Accessibility）是指确保网页内容对所有用户，包括残障人士，都能无障碍访问的设计和开发实践。通过遵循HTML可访问性标准，开发者可以创建出更具包容性的网页，确保所有用户都能平等地获取信息和使用功能。

备注

可访问性不仅仅是针对残障人士，它还能提升所有用户的体验，包括老年人、临时受伤的人以及使用移动设备的用户。

为什么HTML可访问性重要？​

  1. 法律要求：许多国家和地区都有法律要求网站必须符合可访问性标准，例如美国的《残疾人法案》（ADA）和欧盟的《网页可访问性指令》（WCAG）。
  2. 用户体验：可访问性设计可以提升所有用户的体验，使网站更易于使用。
  3. SEO优化：许多可访问性实践（如使用语义化标签）也有助于搜索引擎优化（SEO）。

HTML 可访问性标准的核心原则​

HTML可访问性标准主要基于以下四个核心原则：

  1. 可感知性（Perceivable）：确保所有用户都能感知到网页内容。
  2. 可操作性（Operable）：确保所有用户都能操作网页界面。
  3. 可理解性（Understandable）：确保所有用户都能理解网页内容。
  4. 健壮性（Robust）：确保网页内容能在各种设备和辅助技术上正常工作。

实现HTML可访问性的关键实践​

1. 使用语义化HTML​

语义化HTML是指使用适当的HTML标签来描述内容的结构和意义。这不仅有助于屏幕阅读器理解内容，还能提升SEO。

html
<header>
  <h1>欢迎来到我的网站</h1>
  <nav>
    <ul>
      <li><a href="/">首页</a></li>
      <li><a href="/about">关于我们</a></li>
    </ul>
  </nav>
</header>
<main>
  <article>
    <h2>最新文章</h2>
    <p>这是一篇关于HTML可访问性的文章。</p>
  </article>
</main>
<footer>
  <p>版权所有 © 2023</p>
</footer>
提示

使用语义化标签（如 <header>、<nav>、<main>、<article> 和 <footer>）可以帮助屏幕阅读器更好地理解页面结构。

2. 提供替代文本​

为所有非文本内容（如图片）提供替代文本（alt text），以便屏幕阅读器可以描述这些内容。

html
<img src="logo.png" alt="公司Logo" />
警告

如果图片纯粹是装饰性的，可以使用空的 alt 属性（alt=""），以避免屏幕阅读器读取不必要的描述。

3. 使用ARIA属性​

ARIA（Accessible Rich Internet Applications）属性可以帮助增强HTML元素的可访问性，特别是在动态内容和复杂控件中。

html
<button aria-label="关闭" onclick="closeModal()">X</button>
注意

ARIA属性应谨慎使用，只有在标准HTML无法满足需求时才使用。过度使用ARIA可能会导致可访问性问题。

4. 确保键盘可访问性​

确保所有功能都可以通过键盘操作，这对于无法使用鼠标的用户至关重要。

html
<a href="#content" tabindex="0">跳转到内容</a>
备注

使用 tabindex 属性可以控制元素的键盘焦点顺序。tabindex="0" 表示元素可以通过键盘访问，但不会改变默认的焦点顺序。

5. 提供清晰的表单标签​

为表单元素提供清晰的标签，并确保标签与输入字段正确关联。

html
<label for="username">用户名：</label>
<input type="text" id="username" name="username" />
提示

使用 <label> 标签可以提高表单的可访问性，并帮助屏幕阅读器正确识别输入字段。

实际案例​

案例1：导航菜单的可访问性​

一个常见的导航菜单可以通过以下方式提高可访问性：

html
<nav aria-label="主菜单">
  <ul>
    <li><a href="/">首页</a></li>
    <li><a href="/about">关于我们</a></li>
    <li><a href="/contact">联系我们</a></li>
  </ul>
</nav>

案例2：图片轮播的可访问性​

图片轮播组件可以通过ARIA属性和键盘支持来提高可访问性：

html
<div role="region" aria-label="图片轮播">
  <button aria-label="上一张" onclick="prevSlide()">←</button>
  <img src="slide1.jpg" alt="第一张图片" />
  <button aria-label="下一张" onclick="nextSlide()">→</button>
</div>

总结​

HTML可访问性标准是创建包容性网页的关键。通过使用语义化HTML、提供替代文本、使用ARIA属性、确保键盘可访问性以及提供清晰的表单标签，开发者可以确保所有用户都能无障碍地访问和使用网页内容。

附加资源​

练习​

  1. 为你的网页添加语义化标签，并测试屏幕阅读器的表现。
  2. 为所有图片添加替代文本，并检查是否所有内容都能被屏幕阅读器正确读取。
  3. 创建一个键盘可访问的表单，并确保所有功能都可以通过键盘操作。

通过实践这些技巧，你将能够创建出更具可访问性的网页，为所有用户提供更好的体验。