Web 可访问性最佳实践：让每个用户都能平等访问

3. 提供替代文本

为图片提供 alt 属性，让屏幕阅读器能够理解图片内容：

<!-- 不好的做法 -->
<img src="logo.png">

<!-- 好的做法 -->
<img src="logo.png" alt="公司 logo">

4. 键盘可访问性

确保所有功能都可以通过键盘访问：

/* 为焦点元素提供清晰的样式 */
:focus {
    outline: 2px solid #667eea;
    outline-offset: 2px;
}

/* 移除默认的焦点样式并添加自定义样式 */
button:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.5);
}

5. 适当的表单标签

为表单元素添加标签，提高可访问性：

<!-- 不好的做法 -->
<input type="text" placeholder="姓名">

<!-- 好的做法 -->
<label for="name">姓名</label>
<input type="text" placeholder="请输入姓名">

6. ARIA 属性

使用 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>

7. 跳过导航链接

为键盘用户提供跳过导航的链接：

<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>

8. 合理的标题层级

使用正确的标题层级，让屏幕阅读器能够理解页面结构：

<!-- 不好的做法 -->
<h1>网站标题</h1>
<h3>章节标题</h3>
<h2>子章节标题</h2>

<!-- 好的做法 -->
<h1>网站标题</h1>
<h2>章节标题</h2>
<h3>子章节标题</h3>

9. 多媒体内容的字幕

为视频和音频内容提供字幕和 transcripts：

<video controls>
    <source src="video.mp4" type="video/mp4">
    <track kind="captions" src="captions.vtt" srclang="zh" label="中文">
    您的浏览器不支持视频播放。
</video>

10. 响应式设计

确保网站在不同设备上都能正常访问：

/* 响应式布局 */
.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;
    }
}

测试工具

1. Lighthouse

使用 Chrome DevTools 的 Lighthouse 面板测试可访问性：

1. 打开 Chrome DevTools
2. 选择 Lighthouse 面板
3. 选择 Accessibility 选项
4. 点击 Generate report 按钮
5. 查看分析结果

2. axe DevTools

axe DevTools 是一个专门的可访问性测试工具，可以集成到浏览器中：

1. 安装 axe DevTools 浏览器扩展
2. 打开要测试的页面
3. 点击 axe DevTools 图标
4. 点击 Scan 按钮
5. 查看测试结果

3. WAVE

WAVE（Web Accessibility Evaluation Tool）是一个在线可访问性测试工具：

1. 访问 https://wave.webaim.org/
2. 输入要测试的网址
3. 点击 Enter 按钮
4. 查看测试结果

实际应用案例

案例 1：可访问的导航菜单

<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;
    : ;
}
</style>

案例 2：可访问的表单

<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>

案例 3：可访问的模态框

<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 {
    :  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 可访问性时，我们要精心考虑每一个细节，确保网站对所有人都友好。记住，像素不能偏差 1px，可访问性的标准也不能偏差一分一毫。CSS 是流动的韵律，JS 是叙事的节奏。让我们用可访问性为页面注入人文的温度，让每个用户都能平等地享受数字世界的美好。