您现在的位置是：网站首页 > 可访问性考虑文章详情
可访问性考虑
陈川
【
HTML
】
49361人已围观
5004字
可访问性基础概念
可访问性（Accessibility）指网站和应用能够被所有人使用，包括残障人士。HTML作为网页的基础结构，其可访问性直接影响用户体验。屏幕阅读器、键盘导航、放大工具等辅助技术都依赖良好的HTML结构。
<!-- 糟糕的可访问性示例 -->
<div onclick="doSomething()">点击这里</div>
<!-- 改进后的版本 -->
<button onclick="doSomething()">点击这里</button>
语义化HTML的重要性
使用正确的HTML元素是最基础的可访问性实践。语义化标签不仅帮助搜索引擎理解内容，更是辅助技术的导航基础。
<!-- 非语义化结构 -->
<div class="header">
<div class="nav">
<div class="item">首页</div>
<div class="item">产品</div>
</div>
</div>
<!-- 语义化改进 -->
<header>
<nav>
<ul>
<li><a href="/">首页</a></li>
<li><a href="/products">产品</a></li>
</ul>
</nav>
</header>
ARIA角色与属性
当原生HTML元素无法满足需求时，ARIA（Accessible Rich Internet Applications）提供补充方案。但应优先使用原生HTML元素。
<!-- 自定义标签页组件 -->
<div role="tablist">
<button role="tab" aria-selected="true" aria-controls="panel1">标签1</button>
<button role="tab" aria-selected="false" aria-controls="panel2">标签2</button>
</div>
<div role="tabpanel" id="panel1">内容1</div>
<div role="tabpanel" id="panel2" hidden>内容2</div>
键盘导航支持
所有交互元素必须支持键盘操作。测试时尝试仅用Tab、Shift+Tab、Enter和空格键操作页面。
<!-- 自定义下拉菜单 -->
<div class="dropdown">
<button id="dropdownButton" aria-expanded="false" aria-haspopup="true">
菜单
</button>
<ul role="menu" aria-labelledby="dropdownButton" hidden>
<li role="none"><a role="menuitem" href="#">选项1</a></li>
<li role="none"><a role="menuitem" href="#">选项2</a></li>
</ul>
</div>
<script>
document.getElementById('dropdownButton').addEventListener('keydown', (e) => {
if (e.key === 'Enter' || e.key === ' ') {
e.preventDefault();
toggleMenu();
}
});
</script>
颜色对比与视觉设计
WCAG 2.1规定文本与背景的对比度至少达到4.5:1（AA级），大号文本可降至3:1。
/* 不符合标准的低对比度 */
.low-contrast {
color: #999;
background: #fff;
}
/* 符合AA标准的样式 */
.accessible-text {
color: #767676;
background: #fff;
}
表单可访问性
表单是用户交互的重要部分，需要特别关注可访问性。
<!-- 问题表单 -->
<input type="text" name="username">
<button>提交</button>
<!-- 改进后的表单 -->
<div class="form-group">
<label for="username">用户名</label>
<input type="text" id="username" name="username" required
aria-describedby="usernameHelp">
<small id="usernameHelp">请输入3-20个字符的用户名</small>
</div>
<button type="submit">提交</button>
多媒体内容可访问性
图片、视频等非文本内容需要提供替代方案。
<!-- 装饰性图片 -->
<img src="divider.png" alt="" aria-hidden="true">
<!-- 信息性图片 -->
<img src="chart.png" alt="2023年销售额增长30%的柱状图"
longdesc="chart-description.html">
<!-- 视频示例 -->
<video controls>
<source src="tutorial.mp4" type="video/mp4">
<track src="subtitles.vtt" kind="subtitles" srclang="zh" label="中文">
<p>您的浏览器不支持HTML5视频，<a href="tutorial.mp4">下载视频</a></p>
</video>
动态内容更新
单页应用中动态加载的内容需要通知辅助技术。
<div id="live-region" aria-live="polite"></div>
<script>
function updateStatus(message) {
const region = document.getElementById('live-region');
region.textContent = message;
// 对于复杂更新
region.setAttribute('aria-atomic', 'false');
}
</script>
移动设备可访问性
触屏设备有独特的可访问性需求。
<!-- 确保触摸目标足够大 -->
<button style="min-width: 48px; min-height: 48px">确定</button>
<!-- 避免悬停交互 -->
<div class="tooltip-container">
<button aria-describedby="tooltip1">信息</button>
<div id="tooltip1" role="tooltip" class="tooltip">详细说明...</div>
</div>
测试与验证工具
多种工具可帮助评估和改进可访问性。
// 自动化测试示例（使用axe-core）
import axe from 'axe-core';
axe.run(document, {
runOnly: {
type: 'tag',
values: ['wcag2a', 'wcag2aa']
}
}, (err, results) => {
if (err) throw err;
console.log(results.violations);
});
性能与可访问性
页面加载速度也影响可访问性体验。
<!-- 延迟加载非关键图片 -->
<img src="placeholder.jpg" data-src="content.jpg"
alt="产品展示" loading="lazy">
<!-- 关键CSS内联 -->
<style>
/* 首屏关键样式 */
.header, .main-nav { ... }
</style>
<link rel="stylesheet" href="non-critical.css" media="print" onload="this.media='all'">
国际化考虑
不同语言和文化背景下的可访问性需求。
<!-- 语言声明 -->
<html lang="zh-Hans">
<!-- 双向文本 -->
<p dir="auto">混合文本 English والعربية</p>
<!-- 日期格式 -->
<time datetime="2023-12-25">2023年12月25日</time>
渐进增强策略
确保核心功能在所有环境下可用。
<!-- 基础HTML结构 -->
<noscript>
<p>请启用JavaScript以获得完整功能</p>
</noscript>
<!-- 增强的交互组件 -->
<details>
<summary>更多信息</summary>
<p>这里是详细内容...</p>
</details>
用户偏好设置
尊重用户的系统偏好设置。
/* 暗色模式支持 */
@media (prefers-color-scheme: dark) {
body {
background: #121212;
color: #e0e0e0;
}
}
/* 减少动画 */
@media (prefers-reduced-motion: reduce) {
* {
animation: none !important;
transition: none !important;
}
}
文档结构与大纲
合理的标题层级帮助用户理解内容结构。
<!-- 正确的大纲结构 -->
<main>
<h1>主标题</h1>
<section>
<h2>章节标题</h2>
<article>
<h3>文章标题</h3>
</article>
</section>
</main>
错误处理与恢复
清晰的错误信息帮助用户纠正问题。
<!-- 表单错误示例 -->
<div class="form-group">
<label for="email">电子邮箱</label>
<input type="email" id="email" aria-invalid="true"
aria-describedby="emailError">
<div id="emailError" role="alert" class="error-message">
请输入有效的电子邮箱地址
</div>
</div>
