Web 标准与可访问性理解

理解 Web 标准、可用性、可访问性的概念与实践

问题

解释 Web 标准、可用性（Usability）、可访问性（Accessibility）的概念及区别。

解答

Web 标准

Web 标准是 W3C 等组织制定的技术规范，确保网页在不同浏览器和设备上表现一致。

主要包括：

HTML：结构标准，语义化标签
CSS：表现标准，样式与布局
ECMAScript：行为标准，JavaScript 语言规范
DOM：文档对象模型接口

<!-- 符合标准的 HTML5 文档 -->
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>页面标题</title>
</head>
<body>
  <header>头部</header>
  <main>主要内容</main>
  <footer>底部</footer>
</body>
</html>

可用性（Usability）

可用性指用户完成任务的效率和满意度，关注的是”好不好用”。

评估维度：

易学性：新用户能否快速上手
效率：熟练用户完成任务的速度
可记忆性：用户再次使用时能否快速恢复
容错性：出错后能否轻松恢复
满意度：使用体验是否愉悦

<!-- 可用性示例：清晰的表单设计 -->
<form>
  <!-- 标签与输入框关联，点击标签可聚焦输入框 -->
  <label for="email">邮箱地址</label>
  <input type="email" id="email" placeholder="example@mail.com" required>
  
  <!-- 提供明确的错误提示 -->
  <span class="error" role="alert">请输入有效的邮箱地址</span>
  
  <!-- 按钮文字明确表达操作 -->
  <button type="submit">提交订阅</button>
</form>

可访问性确保残障人士（视觉、听觉、运动、认知障碍）也能正常使用网站。

<!-- 可访问性实践示例 -->

<!-- 1. 图片提供替代文本 -->
<img src="chart.png" alt="2024年销售额增长趋势图，Q4 同比增长 25%">

<!-- 2. 使用语义化标签 -->
<nav aria-label="主导航">
  <ul>
    <li><a href="/">首页</a></li>
    <li><a href="/about">关于</a></li>
  </ul>
</nav>

<!-- 3. 表单可访问性 -->
<label for="username">用户名 <span aria-label="必填">*</span></label>
<input 
  type="text" 
  id="username" 
  aria-required="true"
  aria-describedby="username-hint"
>
<span id="username-hint">用户名需 3-20 个字符</span>

<!-- 4. 按钮可访问性 -->
<button aria-label="关闭对话框" onclick="closeModal()">
  <svg><!-- 关闭图标 --></svg>
</button>

<!-- 5. 跳过导航链接 -->
<a href="#main-content" class="skip-link">跳到主要内容</a>

/* 跳过链接样式：默认隐藏，聚焦时显示 */
.skip-link {
  position: absolute;
  top: -40px;
  left: 0;
  padding: 8px;
  background: #000;
  color: #fff;
}

.skip-link:focus {
  top: 0;
}

/* 确保焦点状态可见 */
:focus {
  outline: 2px solid #005fcc;
  outline-offset: 2px;
}

三者关系

Web 标准 ──→ 基础规范，确保技术实现的一致性
    │
    ├──→ 可用性 ──→ 让所有用户都能高效使用
    │
    └──→ 可访问性 ──→ 让残障用户也能使用（可用性的子集）

关键点

Web 标准是技术规范，解决跨浏览器兼容问题
可用性关注用户体验，衡量产品是否好用
可访问性是可用性的延伸，确保残障人士也能使用
使用语义化 HTML 是同时满足三者的基础
ARIA 属性用于增强屏幕阅读器的可访问性
可访问性检测工具：Lighthouse、axe、WAVE

Web 标准与可访问性理解

问题

解答

Web 标准

可用性（Usability）

可访问性（Accessibility / A11y）

三者关系

关键点