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>可访问性（Accessibility / A11y）
可访问性确保残障人士（视觉、听觉、运动、认知障碍）也能正常使用网站。
<!-- 可访问性实践示例 -->
<!-- 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
目录