HTML 教程 / HTML 无障碍基础：标题、链接、图片与键盘

无障碍HTML始于根据元素的意义选择元素。按逻辑顺序使用标题，编写能够明确显示目标的链接，为图片提供合适的替代文本，并确保人们可以使用键盘进行交互。

使用标题描述层级结构

标题不仅仅是大号文字。它标示了文档中的一个层次：一个页面主题可以使用 h1，主要章节使用 h2，其子章节使用 h3。不要仅仅因为喜欢 h4 的默认大小而直接跳过去；请使用 CSS 调整其外观。仅阅读标题的人应该能够理解页面的结构。请比较 示例中的标题层次和段落 。

例如，“送货信息”可以是一个主要部分，而“送货区域”和“送货时间”则是子部分。避免使用空标题或与后续文本不匹配的标题。标题层级有助于人们进行视觉阅读并使用辅助技术进行导航。

使链接和图片易于理解

一列全部称为“这里”的链接几乎不提供其目的的任何提示。在链接文本中说明目标，如 <a href="guide.html">阅读用户手册</a> 所示。如果链接下载一个文件，请在周围上下文中说明文件类型。可参阅使用 img 插入图片：替代文本与尺寸，按图片的用途检查替代文本。

信息性图片的alt文本必须传达其提供的信息。仅用于装饰的图片，如果重复了类似的文本，则可以使用alt=""。用作链接的图片也必须显示链接的目的，例如“打开用户手册”。如果功能是关键的，请避免罗列每一种可见的颜色或形状。W3C WAI 的图片替代文本决策树有助于确定哪种替代方式是合适的。

尝试在没有鼠标的情况下浏览页面

1. 使用Tab通过链接、表单字段和按钮导航。
2. 确保聚焦的元素可见地被标识。
3. 根据情况，使用 Enter（回车） 或 空格键 激活控件。
4. 如果表单报告错误，请阅读错误信息，返回字段，纠正值并重新提交。

仅有一个点击处理程序的 div 并不会自动获得按钮的含义或键盘行为。对于导航，请使用 a，对于操作，请使用 button。当菜单或可展开内容被打开和关闭时，请检查键盘焦点随后被移动到的位置。焦点不得消失在隐藏内容中，导航顺序应大致与阅读顺序一致。请检查字段名称的显式关联，并在点击练习时正确将 标签和输入 关联起来。

通常，获得焦点的链接可以按 Enter（回车） 打开，而按钮则通过 Enter（回车） 或 空格键 激活。选择与导航或操作相对应的元素可以为使用键盘的用户提供预期的行为，而无需强迫链接模拟按钮或反之亦然。

用于手动测试的小页面

将完整代码保存为 accessible-page.html。下载宽度为 960 像素的 示例图像 ，并将其与 HTML 文件放在同一目录下，保留原始文件名。该表单用于验证和检查 GET 值，而不是接收消息。

<!doctype html>
<html lang="zh-CN">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>键盘测试练习</title>
  <style>
    body { margin: 1rem; font-family: sans-serif; line-height: 1.6; }
    img { max-width: 100%; height: auto; }
    input { max-width: 100%; font: inherit; }
    :focus-visible { outline: 3px solid #005fcc; outline-offset: 3px; }
  </style>
</head>
<body>
  <a href="#main-content">跳到主要内容</a>
  <header>
    <nav aria-label="在此页面">
      <a href="#guide">访问指南</a>
      <a href="#contact">联系练习</a>
    </nav>
  </header>
  <main id="main-content" tabindex="-1">
    <h1>小花园指南</h1>
    <section id="guide">
      <h2>访问指南</h2>
      <p>请准备舒适的鞋子和饮用水。</p>
      <img src="html-image-sample-lake-tree-960-v1.webp"
           alt="湖中小岛上的一棵树，背景是山脉" width="960" height="540">
    </section>
    <section id="contact">
      <h2>在联系字段中练习</h2>
      <form method="get">
        <label for="practice-email">电子邮件（必填）</label>
        <input id="practice-email" name="email" type="email"
               aria-describedby="email-help" required>
        <p id="email-help">使用 name@example.com 代替真实地址。</p>
        <button type="submit">检查输入的值</button>
      </form>
    </section>
  </main>
</body>
</html>

1. 按一次 Tab 键，将跳转链接聚焦，然后按 Enter 键跳过重复菜单并进入主内容。
2. 带有 tabindex="-1" 的主要元素可以获取焦点，而不增加其他正常的 Tab 停点。请检查下一步的 Tab 移动是否遵循合理的阅读顺序。
3. 进入表单，并比较空提交、无效值如 abc 以及格式正确的测试地址。其标签和说明在输入过程中应保持可用。
4. 检查文本、图像和字段在390px下以及放大时的情况。临时重命名图像以检查其替代文本，然后恢复文件名。

HTML 提供语义和原生交互；CSS 提供布局和焦点的视觉处理。自定义错误或复杂菜单可能需要通过 JavaScript 对状态和焦点进行额外管理。完成此练习并不保证页面满足所有无障碍要求。

W3C-WAI 页面结构教程

理解测试能证明什么以及不能证明什么

自动化检查工具可以检测某些标记错误，但它无法始终判断链接是否易懂或图像描述在特定上下文中是否有用。将工具的结果与键盘测试、缩放测试以及必要时的屏幕阅读器结合使用。从网站的重要用户路径开始，而不是将无错误报告视为保证。MDN 的 HTML 可访问性指南 涉及更多原生 HTML 元素。