语义化与无障碍 HTML5

赋予网页意义

你已经知道如何用标签来构建网页，但 HTML 的力量远不止于此。现代网页开发强调“语义化”，即用标签来描述内容的含义，而不仅仅是它的外观。这就像用“标题”和“段落”来组织文档，而不是仅仅改变字体大小和粗细。

非语义标签，如 <div> 和 <span>，是通用的容器，它们本身不携带任何关于内容的含义信息。相比之下，HTML5 引入了一系列语义化布局标签，它们能清晰地勾勒出页面的结构。

主要的布局标签包括：

<header>：页眉，通常包含网站 logo、标题和主导航。
<main>：页面的核心内容。每个页面应该只有一个 <main> 标签。
<footer>：页脚，包含版权信息、联系方式和次要链接。
<aside>：侧边栏，用于放置与主要内容相关但不是核心部分的信息，如相关链接或广告。

使用这些标签可以让浏览器、搜索引擎和辅助技术（如屏幕阅读器）更好地理解你的页面结构。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <title>语义化页面示例</title>
</head>
<body>

  <header>
    <h1>我的博客</h1>
  </header>

  <main>
    <!-- 主要内容放在这里 -->
  </main>

  <aside>
    <h3>关于我</h3>
    <p>我是一名网页开发者。</p>
  </aside>

  <footer>
    <p>&copy; 2023 我的博客</p>
  </footer>

</body>
</html>

组织内容结构

在 <main> 标签内部，我们还需要进一步组织内容。这时，<section> 和 <article> 就派上用场了。

<article>：代表一个独立的、完整的内容块，理论上可以被单独发布或引用。比如一篇博客文章、一则新闻报道或一个论坛帖子。
<section>：代表文档中一个通用的、主题明确的区域。它通常带有一个标题。你可以把它看作是书中一个章节。

关键区别在于独立性。一篇博客文章（<article>）可以包含多个章节（<section>），比如“前言”和“技术细节”。反之，一个关于“最新新闻”的版块（<section>）也可以包含多篇新闻摘要（<article>）。

<main>
  <article>
    <h2>探索火星的挑战</h2>
    <p>首次载人火星任务面临着前所未有的技术和生理挑战。</p>
    
    <section>
      <h3>技术障碍</h3>
      <p>长距离通信延迟和着陆系统的可靠性是主要问题。</p>
    </section>
    
    <section>
      <h3>生理影响</h3>
      <p>长期暴露在宇宙辐射和微重力环境下对宇航员健康构成威胁。</p>
    </section>
  </article>
</main>

除了布局标签，标题标签 <h1> 到 <h6> 对构建清晰的文档大纲至关重要。它们定义了信息的层级结构。

正确的做法是：

每个页面只使用一个 <h1>，作为页面的最高级标题。
严格按照层级顺序使用标题，不要为了样式而跳级（例如从 <h2>直接跳到 <h4>）。

这种结构化的标题不仅有利于 SEO，还能让屏幕阅读器用户快速导航页面，直接跳转到他们感兴趣的部分。

将网页的标题结构想象成一本书的目录。一个清晰、合乎逻辑的目录能让读者快速找到所需内容。屏幕阅读器用户正是这样“阅读”你的网页的。

让所有人都能访问

语义化是网页无障碍（Accessibility, 常缩写为 a11y）的基石。一个结构清晰的网站已经为残障人士提供了更好的体验。但我们还能做得更多。

对于图片，alt 属性至关重要。它为无法看到图片的用户提供了替代文本。最佳实践是：

描述性：如果图片传递了重要信息，alt 文本应准确描述该信息。
简洁：避免冗长的描述。
上下文：alt 文本应与周围内容相符。
装饰性图片：如果图片纯粹是装饰性的，没有任何实际内容，应提供一个空的 alt 属性（alt=""）。这会告诉屏幕阅读器忽略该图片，避免不必要的干扰。

<!-- 好的实践 -->
<img src="chart.png" alt="柱状图显示2023年第二季度销售额增长了15%">

<!-- 装饰性图片 -->
<img src="background-swirl.png" alt="">

当原生 HTML 无法完全描述复杂的用户界面（UI）元素（如自定义下拉菜单或标签页）时，ARIA (Accessible Rich Internet Applications) 规范就登场了。ARIA 允许你添加特殊的 role 和 aria-* 属性来增强语义。

例如，一个仅用图标表示的关闭按钮，对于视力正常的用户来说很直观，但屏幕阅读器可能只会读出“按钮”或“叉”。使用 aria-label 可以提供一个明确的、可访问的名称。

<!-- 屏幕阅读器会读出："关闭，按钮" -->
<button aria-label="关闭">&times;</button>

构建无障碍表单

表单是用户与网站交互的关键部分，其无障碍性尤其重要。每个表单输入框都应该有一个关联的 <label> 标签。

使用 for 属性将 <label> 与对应输入框的 id 绑定起来，这样做有两个好处：

屏幕阅读器会读出标签内容，让用户明确知道该输入什么。
用户可以点击标签来聚焦到对应的输入框，这对于有运动障碍的用户特别有帮助。

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

HTML5 还提供了内置的表单校验功能，例如 required 属性可以确保用户在提交前填写该字段。当校验失败时，浏览器会显示默认的错误提示。你也可以结合 JavaScript 和 ARIA 属性（如 aria-describedby）来提供更具体的、对屏幕阅读器友好的辅助提示。

<label for="email">邮箱地址：</label>
<input type="email" id="email" name="email" required>
<span id="email-hint" class="error-message">请输入有效的邮箱地址。</span>

<!-- 在校验失败时，可以通过 JS 将 aria-describedby 添加到 input 上 -->
<script>
  const emailInput = document.getElementById('email');
  // 假设在某个校验逻辑中...
  if (!emailInput.validity.valid) {
    emailInput.setAttribute('aria-describedby', 'email-hint');
  }
</script>

自动化测试工具

手动检查每一个无障碍细节是很困难的，幸好我们有自动化工具可以帮忙。这些工具通常以浏览器扩展或开发者工具的形式存在，能快速扫描你的页面并报告常见的无障碍问题。

一些流行的工具包括：

Lighthouse：集成在 Chrome 开发者工具中。它不仅测试无障碍性，还评估性能、SEO 等。它会生成一份报告，并提供修复建议。
Axe DevTools：由 Deque Systems 开发的浏览器扩展，被认为是业界标准之一。它能发现许多其他工具可能遗漏的问题，并精确定位到问题代码。
WAVE：由 WebAIM 开发的另一款流行的浏览器扩展。它通过在你的页面上直接注入图标和指示器来直观地展示无障碍问题。

自动化测试是无障碍工作流程的第一步，它可以捕获很多低级错误。但请记住，它无法替代真实用户的测试，特别是对于使用辅助技术的用户。

Quiz Questions 1/6

以下哪个HTML标签是通用的“非语义化”容器？

Quiz Questions 2/6

关于

和

标签，以下哪种说法最准确？

构建语义化和无障碍的网页是一种思维方式的转变。它要求我们不仅关心页面的外观，更要关心其内在结构和对所有用户的包容性。一个坚实的 HTML 基础将使你的网站更易于维护、对搜索引擎更友好，并为每个人提供更好的体验。

现代网页开发全栈实战