Web 可访问性的定义、重要性及最佳实践。涵盖语义化 HTML、颜色对比度、替代文本、键盘交互、表单标签、ARIA 属性等关键要点。提供了 Lighthouse、axe DevTools、WAVE 等测试工具的使用方法，并通过导航菜单、表单、模态框的实际案例展示如何实现无障碍设计。旨在帮助开发者构建包容性更强的网站，确保所有用户平等获取信息。
Web 可访问性是前端开发的重要组成部分，它确保所有用户，包括残障人士，都能平等地访问和使用网站。好的设计不仅要美观，更要包容。
Web 可访问性（Web Accessibility）是指网站、工具和技术能够被所有人使用的程度，无论他们是否有残疾。这包括：
使用语义化的 HTML 元素，让屏幕阅读器能够正确理解页面结构：
<!-- 不好的做法 -->
<div>标题</div>
<div>导航</div>
<div>内容</div>
<!-- 好的做法 -->
<header>标题</header>
<nav>导航</nav>
<main>内容</main>
确保文本与背景的对比度足够高，便于阅读：
/* 不好的做法 */
.bad-contrast { color: #666; background: #f0f0f0; }
/* 好的做法 */
.good-contrast { color: #333; background: #fff; }
为图片提供 alt 属性，让屏幕阅读器能够理解图片内容：
<!-- 不好的做法 -->
<img src="logo.png">
<!-- 好的做法 -->
<img src="logo.png" alt="公司 logo">
确保所有功能都可以通过键盘访问：
/* 为焦点元素提供清晰的样式 */
:focus {
outline: 2px solid #667eea;
outline-offset: 2px;
}
/* 移除默认的焦点样式并添加自定义样式 */
button:focus {
outline: none;
box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.5);
}
为表单元素添加标签，提高可访问性：
<!-- 不好的做法 -->
<input type="text" placeholder="姓名">
<!-- 好的做法 -->
<label for="name">姓名</label>
<input type="text" placeholder="请输入姓名">
使用 ARIA（Accessible Rich Internet Applications）属性增强可访问性：
<!-- 导航菜单 -->
<nav aria-label="主导航">
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">关于我们</a></li>
<li><a href="#">联系我们</a></li>
</ul>
</nav>
<!-- 按钮 -->
<button aria-expanded="false" aria-controls="menu"> 菜单 </button>
<div hidden>
<!-- 菜单内容 -->
</div>
为键盘用户提供跳过导航的链接：
<a href="#main-content">跳过导航</a>
<nav>
<!-- 导航内容 -->
</nav>
<main>
<!-- 主要内容 -->
</main>
<style>
.skip-link {
position: absolute;
top: -40px;
left: 0;
background: #667eea;
color: white;
padding: 8px;
z-index: 100;
transition: top 0.3s ease;
}
.skip-link:focus {
top: 0;
}
</style>
使用正确的标题层级，让屏幕阅读器能够理解页面结构：
<!-- 不好的做法 -->
<h1>网站标题</h1>
<h3>章节标题</h3>
<h2>子章节标题</h2>
<!-- 好的做法 -->
<h1>网站标题</h1>
<h2>章节标题</h2>
<h3>子章节标题</h3>
为视频和音频内容提供字幕和 transcripts：
<video controls>
<source src="video.mp4" type="video/mp4">
<track kind="captions" src="captions.vtt" srclang="zh" label="中文">
您的浏览器不支持视频播放。
</video>
确保网站在不同设备上都能正常访问：
/* 响应式布局 */
.container {
width: 100%;
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
}
/* 响应式字体 */
body {
font-size: 16px;
}
@media (max-width: 768px) {
body {
font-size: 14px;
}
}
/* 响应式导航 */
.nav {
display: flex;
}
@media (max-width: 768px) {
.nav {
flex-direction: column;
}
}
使用 Chrome DevTools 的 Lighthouse 面板测试可访问性：
axe DevTools 是一个专门的可访问性测试工具，可以集成到浏览器中：
WAVE（Web Accessibility Evaluation Tool）是一个在线可访问性测试工具：
<nav aria-label="主导航">
<button aria-expanded="false" aria-controls="menu"> 菜单 </button>
<ul hidden>
<li><a href="#">首页</a></li>
<li><a href="#">关于我们</a></li>
<li><a href="#">产品</a></li>
<li><a href="#">联系我们</a></li>
</ul>
</nav>
<script>
const menuToggle = document.getElementById('menu-toggle');
const menu = document.getElementById('menu');
menuToggle.addEventListener('click', () => {
const expanded = menuToggle.getAttribute('aria-expanded') === 'true';
menuToggle.setAttribute('aria-expanded', !expanded);
menu.hidden = expanded;
});
</script>
<style>
nav {
background: #333;
color: white;
padding: 10px;
}
button {
background: #667eea;
color: white;
border: none;
padding: 8px 16px;
border-radius: 4px;
cursor: pointer;
}
ul {
list-style: none;
padding: 0;
margin: 10px 0 0;
}
li {
margin: 5px 0;
}
a {
color: white;
text-decoration: none;
display: block;
padding: 5px;
border-radius: 4px;
}
a:hover, a:focus {
background: rgba(255, 255, 255, 0.1);
}
button:focus, a:focus {
outline: 2px solid #667eea;
outline-offset: ;
}
</style>
<form>
<div>
<label for="name">姓名</label>
<input type="text" required>
</div>
<div>
<label for="email">邮箱</label>
<input type="email" required>
</div>
<div>
<label for="message">留言</label>
<textarea required></textarea>
</div>
<button type="submit">提交</button>
</form>
<style>
form {
max-width: 600px;
margin: 0 auto;
padding: 20px;
background: #f5f7fa;
border-radius: 8px;
}
div {
margin-bottom: 15px;
}
label {
display: block;
margin-bottom: 5px;
font-weight: bold;
}
input, textarea {
width: 100%;
padding: 10px;
border: 1px solid #ddd;
border-radius: 4px;
font-size: 16px;
}
input:focus, textarea:focus {
outline: none;
border-color: #667eea;
box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.2);
}
button {
background: #667eea;
color: white;
border: none;
padding: 10px 20px;
border-radius: 4px;
font-size: 16px;
cursor: pointer;
}
button:hover, button:focus {
background: #5a6fd8;
}
button:focus {
outline: 2px solid #667eea;
outline-offset: 2px;
}
</style>
<button>打开模态框</button>
<div aria-hidden="true" aria-labelledby="modal-title">
<div>
<h2>模态框标题</h2>
<p>模态框内容</p>
<button>关闭</button>
</div>
</div>
<script>
const modalToggle = document.getElementById('modal-toggle');
const modal = document.getElementById('modal');
const modalClose = document.getElementById('modal-close');
modalToggle.addEventListener('click', () => {
modal.setAttribute('aria-hidden', 'false');
modalClose.focus();
});
modalClose.addEventListener('click', () => {
modal.setAttribute('aria-hidden', 'true');
modalToggle.focus();
});
// 按 ESC 键关闭模态框
document.addEventListener('keydown', (e) => {
if (e.key === 'Escape' && modal.getAttribute('aria-hidden') === 'false') {
modal.setAttribute('aria-hidden', 'true');
modalToggle.focus();
}
});
</script>
<style>
#modal {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
display: flex;
align-items: center;
justify-content: center;
z-index: 1000;
}
#modal[aria-hidden="true"] {
display: none;
}
.modal-content {
background: white;
padding: 20px;
border-radius: 8px;
max-width: 500px;
width: 90%;
}
button {
background: #667eea;
color: white;
border: none;
padding: 8px 16px;
border-radius: 4px;
cursor: pointer;
}
button:hover, button:focus {
background: #5a6fd8;
}
button:focus {
: solid ;
: ;
}
</style>
/* 可访问性的韵律感 */
.accessibility-rhythm {
/* 基础设置 */
color: #333;
background: #fff;
font-size: 16px;
line-height: 1.5;
/* 焦点样式 */
&:focus {
outline: 2px solid #667eea;
outline-offset: 2px;
}
/* 响应式调整 */
@media (max-width: 768px) {
font-size: 14px;
}
/* 颜色对比度 */
&.high-contrast {
color: #000;
background: #fff;
}
/* 键盘导航 */
&.keyboard-navigable {
a, button, input, select, textarea {
&:focus {
box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.2);
}
}
}
}
Web 可访问性是前端开发的重要责任，它确保所有用户都能平等地访问和使用网站。在实现 Web 可访问性时，我们要精心考虑每一个细节，确保网站对所有人都友好。可访问性的标准不能偏差一分一毫。让我们用可访问性为页面注入人文的温度，让每个用户都能平等地享受数字世界的美好。
微信公众号「极客日志」，在微信中扫描左侧二维码关注。展示文案：极客日志 zeeklog
将字符串编码和解码为其 Base64 格式表示形式即可。 在线工具，Base64 字符串编码/解码在线工具，online
将字符串、文件或图像转换为其 Base64 表示形式。 在线工具，Base64 文件转换器在线工具，online
将 Markdown（GFM）转为 HTML 片段，浏览器内 marked 解析；与 HTML 转 Markdown 互为补充。 在线工具，Markdown 转 HTML在线工具，online
将 HTML 片段转为 GitHub Flavored Markdown，支持标题、列表、链接、代码块与表格等；浏览器内处理，可链接预填。 在线工具，HTML 转 Markdown在线工具，online
通过删除不必要的空白来缩小和压缩JSON。 在线工具，JSON 压缩在线工具，online
将JSON字符串修饰为友好的可读格式。 在线工具，JSON美化和格式化在线工具，online