可访问性考虑
可访问性基础概念
可访问性（Accessibility）指网站或应用能被所有人平等访问和使用，包括残障人士。W3C制定的WCAG标准将可访问性分为四个原则：可感知、可操作、可理解、健壮性。HTML作为网页结构的基础，其语义化是实现可访问性的首要条件。
<!-- 错误示例 -->
<div onclick="submitForm()">提交</div>
<!-- 正确示例 -->
<button type="submit" aria-label="提交订单">提交</button>
语义化HTML结构
使用正确的HTML5语义标签能帮助辅助技术理解内容结构。<header>、<nav>、<main>等标签能自动创建地标区域（landmark），屏幕阅读器用户可通过快捷键快速导航。
<article aria-labelledby="article-heading">
<h2 id="article-heading">如何制作可访问的网页</h2>
<section>
<h3>语义化标记</h3>
<p>使用正确的HTML元素...</p>
</section>
</article>
ARIA属性应用
当原生HTML无法满足需求时，ARIA（可访问的富互联网应用）属性可补充语义信息。注意ARIA的三大规则：不要用ARIA覆盖原生语义、交互元素必须可操作、所有自定义控件需完整ARIA支持。
<div class="tabs" role="tablist">
<button
role="tab"
aria-selected="true"
aria-controls="panel1"
id="tab1">选项一</button>
<div
role="tabpanel"
aria-labelledby="tab1"
id="panel1">内容区域...</div>
</div>
键盘导航支持
所有交互元素必须支持键盘操作，焦点顺序应符合视觉流。通过tabindex控制焦点行为：0表示可聚焦，-1表示编程式聚焦，正值会破坏自然焦点顺序应避免使用。
// 实现自定义下拉菜单的键盘导航
menuButton.addEventListener('keydown', (e) => {
if (e.key === 'ArrowDown') {
e.preventDefault();
firstMenuItem.focus();
}
});
颜色与对比度
文本与背景的对比度至少达到4.5:1（AA级），大号文本可放宽至3:1。避免仅用颜色传达信息，需配合文字或图标。
/* 不合格的对比度 */
.warning { color: #FFCC00; }
/* 合格的对比度 */
.warning {
color: #C33;
background: #FFF;
}
多媒体可访问性
视频需提供字幕和文本转录，音频需提供文字稿。动态内容需考虑前庭障碍患者，避免自动播放和闪烁频率在3-50Hz的内容。
<video controls>
<source src="demo.mp4" type="video/mp4">
<track
kind="captions"
src="captions.vtt"
srclang="zh"
label="中文字幕">
<p>您的浏览器不支持视频，<a href="transcript.txt">查看文字稿</a></p>
</video>
表单可访问性
每个表单控件必须关联明确的<label>，错误提示需同时用文本和ARIA状态标识。复杂表单应分组并添加fieldset和legend。
<div class="form-group">
<label for="email">电子邮箱</label>
<input
type="email"
id="email"
aria-describedby="email-help"
aria-invalid="false">
<p id="email-help" class="hint">请输入有效邮箱地址</p>
</div>
动态内容更新
通过aria-live区域声明动态变化的内容。polite表示空闲时通知，assertive表示立即中断当前朗读。
<div aria-live="polite" id="notifications">
<!-- 动态插入通知内容 -->
</div>
<script>
function showNotification(message) {
const el = document.createElement('p');
el.textContent = message;
document.getElementById('notifications').appendChild(el);
}
</script>
移动设备适配
触控目标尺寸至少48×48px，确保点击区域足够大。避免使用悬停（hover）状态作为唯一交互方式。
/* 过小的触控区域 */
.icon-button { width: 24px; height: 24px; }
/* 合格的触控区域 */
.icon-button {
width: 48px;
height: 48px;
padding: 12px;
}
测试与验证工具
组合使用自动化工具和人工测试：
- WAVE浏览器扩展
- axe DevTools
- 屏幕阅读器（NVDA、VoiceOver）
- 键盘导航测试
- 高对比度模式测试
// 使用axe-core进行自动化测试
const axe = require('axe-core');
axe.run(document, {}, (err, results) => {
if (err) throw err;
console.log(results.violations);
});
性能与可访问性
加载缓慢会影响所有用户，尤其依赖辅助技术的用户。延迟加载的非关键内容需提供加载状态提示。
<img
src="placeholder.jpg"
data-src="large-image.jpg"
alt="产品展示图"
aria-busy="true"
loading="lazy">
国际化考虑
lang属性应准确设置，混合语言内容使用span局部声明。RTL（从右到左）语言需考虑布局适配。
<html lang="zh-Hans">
<body>
<p>这个单词<span lang="en">accessibility</span>很重要</p>
</body>
</html>
渐进增强策略
核心功能应在基础HTML中可用，JavaScript和CSS用于增强体验。避免创建仅依赖特定输入方式的交互。
<!-- 基础HTML版本 -->
<select id="theme-selector">
<option value="light">浅色模式</option>
<option value="dark">深色模式</option>
</select>
<!-- 增强后的UI -->
<div class="custom-select" role="listbox" aria-labelledby="theme-label">
<span id="theme-label">主题选择</span>
<ul>
<li role="option" tabindex="0" data-value="light">浅色模式</li>
<li role="option" tabindex="-1" data-value="dark">深色模式</li>
</ul>
</div>
本站部分内容来自互联网,一切版权均归源网站或源作者所有。
如果侵犯了你的权益请来信告知我们删除。邮箱：cc@cccx.cn
