Web Accessibility（网络无障碍）是确保所有人都能平等访问和使用网站和应用程序的关键。这包括视觉、听觉、运动和认知能力有限的用户。以下是一些构建无障碍前端应用的基础原则和代码示例：
1. 文本替代（alt属性）
确保所有非文本内容（如图片）都有描述性的alt属性，以便屏幕阅读器用户理解图片内容。
<img src="hero.jpg" alt="A smiling person holding a cup of coffee">
2. 标签和角色（ARIA roles）
使用ARIA（Accessible Rich Internet Applications）角色和属性来增强可访问性，尤其是对于复杂交互元素。
<button role="button" aria-label="Close">X</button>
3. 表单元素
确保表单元素有清晰的标签，使用与关联。
<label for="email">Email:</label>
<input type="email" id="email" required>
4. 键盘导航
所有交互元素都应可以通过键盘导航，并遵循自然的焦点顺序。
<nav>
<ul>
<li><a href="#home" tabindex="0">Home</a></li>
<li><a href="#about" tabindex="0">About</a></li>
<li><a href="#contact" tabindex="0">Contact</a></li>
</ul>
</nav>
5. 颜色对比
确保文本和背景之间有足够的颜色对比，避免颜色作为唯一的信息传递方式。
/* 使用颜色对比检查工具，如WCAG Color Contrast Checker */
body {
color: #000; /* dark text */
background-color: #f8f8f8; /* light background, good contrast */
}
6. 视觉隐藏
使用visually-hidden类隐藏内容，使其仅对屏幕阅读器可见。
.visually-hidden {
position: absolute !important;
clip: rect(0 0 0 0) !important;
width: 1px !important;
height: 1px !important;
padding: 0 !important;
margin: -1px !important;
overflow: hidden !important;
border: 0 !important;
}
<button>
<span class="visually-hidden">Skip to main content</span>
Skip
</button>
7. ARIA live区域
使用aria-live属性通知屏幕阅读器用户关于页面动态更新的信息。
<div aria-live="polite" aria-atomic="true" class="notification">
<!-- Dynamic content will be inserted here -->
</div>
8. 时间敏感内容
为时间敏感的内容提供截止日期或计时器。
<p>
This offer expires in:
<span id="countdown"></span>
</p>
<script>
// 更新countdown元素的内容
</script>
9. 考虑触控设备
确保触摸目标足够大，至少44x44像素，避免过于紧密的布局。
.button {
min-width: 44px;
min-height: 44px;
padding: 10px;
}
10. 编码语义化
使用语义化的HTML元素，如<header>, <nav>, <main>, <article>, <section>, <footer>等。
<body>
<header>
<!-- Header content -->
</header>
<main>
<!-- Main content -->
</main>
<footer>
<!-- Footer content -->
</footer>
</body>
11. 视觉指示器
为交互元素添加视觉反馈，如悬停、聚焦和激活状态。
.button {
transition: all 0.3s;
}
.button:hover,
.button:focus,
.button:active {
background-color: #333;
color: #fff;
}
12. 语音命令和语音输入
考虑到语音控制设备，如Siri、Google Assistant等，确保界面可以通过语音命令操作。
<form action="/search">
<label for="search">Search:</label>
<input type="search" id="search" name="q" placeholder="Voice command: Search...">
<button type="submit">Go</button>
</form>
13. 字体和文本可读性
选择易读的字体，保持足够的行高、字间距和字号。确保文本缩放不影响布局。
body {
font-family: Arial, sans-serif;
font-size: 16px;
line-height: 1.5;
letter-spacing: 0.05em;
text-rendering: optimizeLegibility;
-ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;
}
14. 交互元素的清晰状态
确保用户清楚知道何时可以与元素交互，以及交互的状态。
input[type="checkbox"]:checked + label::before {
content: '\2713'; /* checkmark character */
}
html
<input type="checkbox" id="accept" />
<label for="accept">I accept the terms and conditions</label>
15. 考虑色盲用户
使用色彩对比度检查工具，确保颜色组合对色盲用户友好。
.colorblind-friendly {
background-color: #008080;
color: #fff;
}
16. 视觉辅助
提供视觉辅助，如放大镜、高对比度模式、色盲模拟器等。
<button id="toggle-high-contrast">Toggle High Contrast</button>
<script>
document.getElementById('toggle-high-contrast').addEventListener('click', function() {
document.body.classList.toggle('high-contrast');
});
</script>
<style>
.high-contrast {
background-color: #000;
color: #fff;
}
</style>
17. 适配屏幕阅读器
确保所有重要信息都能被屏幕阅读器读取，例如表格的标题和摘要。
<table>
<caption>Employee List</caption>
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
</tr>
</thead>
<!-- Table rows -->
</table>
18. 响应式设计
确保网站在不同设备和屏幕尺寸上表现良好，适应不同访问方式。
@media (max-width: 768px) {
/* Mobile-specific styles */
}
19. 视频和音频内容
为视频提供字幕，为音频提供文字转录。
<video controls>
<source src="movie.mp4" type="video/mp4">
<track kind="captions" src="movie.vtt" srclang="en" label="English">
</video>
20. 定期测试
使用自动化和人工测试工具（如axe，Pa11y，Lighthouse等）定期检查可访问性，并根据反馈进行改进。
21. 图像地图（Image Maps）
对于包含多个交互区域的图像，使用图像地图提供可点击的区域。
<img src="worldmap.png" usemap="#worldmap" alt="World Map">
<map name="worldmap">
<area shape="rect" coords="0,0,82,126" alt="North America" href="#na">
<area shape="circle" coords="200,100,30" alt="Europe" href="#eu">
<area shape="poly" coords="330,50,380,0,450,50,400,100" alt="Asia" href="#as">
</map>
22. 语音合成（Text-to-Speech）
为用户提供语音合成选项，让他们能够听到页面内容。
<button id="tts">Read Aloud</button>
<script>
document.getElementById('tts').addEventListener('click', function() {
const textToRead = document.querySelector('main').innerText;
const speech = new SpeechSynthesisUtterance(textToRead);
window.speechSynthesis.speak(speech);
});
</script>
23. 错误提示和反馈
提供清晰的错误消息和反馈，使用户了解如何解决问题。
<form>
<label for="email">Email:</label>
<input type="email" id="email" required>
<span id="email-error" class="error"></span>
<button type="submit">Submit</button>
</form>
<script>
document.querySelector('form').addEventListener('submit', function(event) {
event.preventDefault();
const emailInput = document.getElementById('email');
const errorSpan = document.getElementById('email-error');
if (!emailInput.checkValidity()) {
errorSpan.textContent = 'Please enter a valid email address.';
} else {
errorSpan.textContent = '';
// Submit form or perform other actions
}
});
</script>
24. 交互元素的焦点管理
确保键盘焦点在页面元素之间正确流动，避免跳过或重复。
const focusableElements = 'a[href], button, input:not([type="hidden"]), textarea, select, iframe, object, embed, [tabindex="0"], [contenteditable]';
const firstFocusableElement = document.querySelector(focusableElements);
document.addEventListener('DOMContentLoaded', function() {
if (firstFocusableElement) {
firstFocusableElement.focus();
}
});
document.addEventListener('keydown', function(event) {
if (event.key === 'Tab') {
const lastFocusableElement = document.querySelector(`${
focusableElements}:last-of-type`);
if (event.shiftKey && document.activeElement === document.body) {
lastFocusableElement.focus();
event.preventDefault();
} else if (!event.shiftKey && document.activeElement === lastFocusableElement) {
firstFocusableElement.focus();
event.preventDefault();
}
}
});
