可访问性(Accessibility,简称a11y)是指让网站和应用能够被所有人使用,包括残障人士。良好的可访问性设计不仅帮助残障用户,也能提升所有用户的体验。
东巴文(db-w.cn) 认为:可访问性是Web开发的基本责任,让每个人都能平等地访问信息是互联网的初衷。
WCAG(Web Content Accessibility Guidelines)是W3C制定的Web内容可访问性指南,提供了四个核心原则:
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>WCAG四大原则 - 东巴文</title>
<style>
body {
font-family: 'Segoe UI', sans-serif;
padding: 20px;
background: #f5f5f5;
}
.container {
max-width: 800px;
margin: 0 auto;
background: white;
padding: 30px;
border-radius: 10px;
}
h1 {
color: #667eea;
margin-bottom: 20px;
}
h2 {
color: #764ba2;
margin: 30px 0 15px;
border-left: 4px solid #764ba2;
padding-left: 15px;
}
.principle-grid {
display: grid;
grid-template-columns: 1fr;
gap: 20px;
margin: 20px 0;
}
@media (min-width: 768px) {
.principle-grid {
grid-template-columns: repeat(2, 1fr);
}
}
.principle-card {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
padding: 25px;
border-radius: 10px;
text-align: center;
}
.principle-card h3 {
font-size: 1.5em;
margin-bottom: 10px;
}
.principle-card p {
font-size: 1em;
opacity: 0.9;
}
.level-table {
width: 100%;
border-collapse: collapse;
margin: 20px 0;
}
.level-table th,
.level-table td {
padding: 12px;
text-align: left;
border: 1px solid #ddd;
}
.level-table th {
background: #667eea;
color: white;
}
.level-a {
background: #d4edda;
color: #155724;
font-weight: bold;
}
.level-aa {
background: #fff3cd;
color: #856404;
font-weight: bold;
}
.level-aaa {
background: #f8d7da;
color: #721c24;
font-weight: bold;
}
</style>
</head>
<body>
<div class="container">
<h1>WCAG四大原则</h1>
<p>WCAG 2.1基于四个核心原则,简称POUR:</p>
<div class="principle-grid">
<div class="principle-card">
<h3>P - 可感知</h3>
<p>Perceivable</p>
<p>信息和UI组件必须以用户能够感知的方式呈现</p>
</div>
<div class="principle-card">
<h3>O - 可操作</h3>
<p>Operable</p>
<p>UI组件和导航必须可以操作</p>
</div>
<div class="principle-card">
<h3>U - 可理解</h3>
<p>Understandable</p>
<p>信息和UI操作必须可以理解</p>
</div>
<div class="principle-card">
<h3>R - 健壮性</h3>
<p>Robust</p>
<p>内容必须足够健壮,能够被各种用户代理解析</p>
</div>
</div>
<h2>WCAG等级</h2>
<table class="level-table">
<thead>
<tr>
<th>等级</th>
<th>说明</th>
<th>要求</th>
</tr>
</thead>
<tbody>
<tr>
<td class="level-a">A</td>
<td>最低级别</td>
<td>必须满足的基本要求</td>
</tr>
<tr>
<td class="level-aa">AA</td>
<td>中等级别</td>
<td>推荐大多数网站达到的标准</td>
</tr>
<tr>
<td class="level-aaa">AAA</td>
<td>最高级别</td>
<td>最高可访问性标准</td>
</tr>
</tbody>
</table>
<div style="background: #fff3cd; padding: 15px; border-radius: 5px; margin-top: 20px;">
<strong>东巴文提示:</strong>大多数法律法规要求网站至少达到WCAG 2.1 AA级别。
</div>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>语义化HTML - 东巴文</title>
<style>
body {
font-family: 'Segoe UI', sans-serif;
padding: 20px;
background: #f5f5f5;
}
.container {
max-width: 800px;
margin: 0 auto;
background: white;
padding: 30px;
border-radius: 10px;
}
h1 {
color: #667eea;
margin-bottom: 20px;
}
h2 {
color: #764ba2;
margin: 30px 0 15px;
border-left: 4px solid #764ba2;
padding-left: 15px;
}
.demo-section {
background: #f8f9fa;
padding: 20px;
border: 2px solid #ddd;
margin: 20px 0;
border-radius: 5px;
}
.semantic-demo {
background: white;
padding: 20px;
border-radius: 5px;
}
.semantic-demo header {
background: #667eea;
color: white;
padding: 15px;
border-radius: 5px 5px 0 0;
}
.semantic-demo nav {
background: #764ba2;
color: white;
padding: 10px;
}
.semantic-demo nav a {
color: white;
margin-right: 15px;
text-decoration: none;
}
.semantic-demo main {
padding: 20px;
background: #f8f9fa;
}
.semantic-demo article {
background: white;
padding: 15px;
margin-bottom: 15px;
border-left: 3px solid #667eea;
}
.semantic-demo aside {
background: #e3f2fd;
padding: 15px;
border-radius: 5px;
}
.semantic-demo footer {
background: #333;
color: white;
padding: 15px;
text-align: center;
border-radius: 0 0 5px 5px;
}
.compare-table {
width: 100%;
border-collapse: collapse;
margin: 20px 0;
}
.compare-table th,
.compare-table td {
padding: 12px;
text-align: left;
border: 1px solid #ddd;
}
.compare-table th {
background: #667eea;
color: white;
}
.good {
background: #d4edda;
}
.bad {
background: #f8d7da;
}
</style>
</head>
<body>
<div class="container">
<h1>语义化HTML</h1>
<h2>为什么使用语义化标签?</h2>
<ul>
<li>提高可访问性:辅助技术能更好地理解页面结构</li>
<li>改善SEO:搜索引擎能更好地索引内容</li>
<li>提高可维护性:代码更易读、易维护</li>
<li>更好的用户体验:浏览器默认样式更合理</li>
</ul>
<h2>常用语义化标签</h2>
<table class="compare-table">
<thead>
<tr>
<th>语义化标签</th>
<th>用途</th>
<th>替代的div</th>
</tr>
</thead>
<tbody>
<tr>
<td><header></td>
<td>页面或区块头部</td>
<td class="bad"><div class="header"></td>
</tr>
<tr>
<td><nav></td>
<td>导航链接</td>
<td class="bad"><div class="nav"></td>
</tr>
<tr>
<td><main></td>
<td>主要内容区域</td>
<td class="bad"><div class="main"></td>
</tr>
<tr>
<td><article></td>
<td>独立的内容块</td>
<td class="bad"><div class="article"></td>
</tr>
<tr>
<td><section></td>
<td>文档中的区块</td>
<td class="bad"><div class="section"></td>
</tr>
<tr>
<td><aside></td>
<td>侧边栏或附加内容</td>
<td class="bad"><div class="aside"></td>
</tr>
<tr>
<td><footer></td>
<td>页面或区块底部</td>
<td class="bad"><div class="footer"></td>
</tr>
</tbody>
</table>
<div style="background: #fff3cd; padding: 15px; border-radius: 5px; margin-top: 20px;">
<strong>东巴文提示:</strong>使用语义化标签不仅提高可访问性,还能让代码更易读、易维护,是现代Web开发的最佳实践。
</div>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ARIA属性 - 东巴文</title>
<style>
body {
font-family: 'Segoe UI', sans-serif;
padding: 20px;
background: #f5f5f5;
}
.container {
max-width: 800px;
margin: 0 auto;
background: white;
padding: 30px;
border-radius: 10px;
}
h1 {
color: #667eea;
margin-bottom: 20px;
}
h2 {
color: #764ba2;
margin: 30px 0 15px;
border-left: 4px solid #764ba2;
padding-left: 15px;
}
.info-table {
width: 100%;
border-collapse: collapse;
margin: 20px 0;
}
.info-table th,
.info-table td {
padding: 12px;
text-align: left;
border: 1px solid #ddd;
}
.info-table th {
background: #667eea;
color: white;
}
</style>
</head>
<body>
<div class="container">
<h1>ARIA属性</h1>
<p>ARIA(Accessible Rich Internet Applications)是一组属性,用于增强Web应用的可访问性,特别是对于动态内容和自定义组件。</p>
<h2>ARIA角色(role)</h2>
<table class="info-table">
<thead>
<tr>
<th>角色</th>
<th>说明</th>
<th>示例</th>
</tr>
</thead>
<tbody>
<tr>
<td>button</td>
<td>按钮</td>
<td><div role="button"></td>
</tr>
<tr>
<td>dialog</td>
<td>对话框</td>
<td><div role="dialog"></td>
</tr>
<tr>
<td>alert</td>
<td>警告信息</td>
<td><div role="alert"></td>
</tr>
<tr>
<td>tablist</td>
<td>标签列表</td>
<td><div role="tablist"></td>
</tr>
<tr>
<td>progressbar</td>
<td>进度条</td>
<td><div role="progressbar"></td>
</tr>
</tbody>
</table>
<h2>常用ARIA属性</h2>
<ul>
<li><strong>aria-label:</strong>为元素提供可访问的名称</li>
<li><strong>aria-labelledby:</strong>引用另一个元素作为标签</li>
<li><strong>aria-describedby:</strong>引用描述性文本</li>
<li><strong>aria-hidden:</strong>对辅助技术隐藏元素</li>
<li><strong>aria-expanded:</strong>指示可折叠元素的展开状态</li>
<li><strong>aria-selected:</strong>指示选中状态</li>
<li><strong>aria-live:</strong>指示动态内容更新区域</li>
</ul>
<div style="background: #fff3cd; padding: 15px; border-radius: 5px; margin-top: 20px;">
<strong>东巴文提示:</strong>优先使用原生HTML元素,只有在无法使用原生元素时才使用ARIA属性。"原生元素 > ARIA属性"是可访问性的黄金法则。
</div>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>键盘导航 - 东巴文</title>
<style>
body {
font-family: 'Segoe UI', sans-serif;
padding: 20px;
background: #f5f5f5;
}
.container {
max-width: 800px;
margin: 0 auto;
background: white;
padding: 30px;
border-radius: 10px;
}
h1 {
color: #667eea;
margin-bottom: 20px;
}
h2 {
color: #764ba2;
margin: 30px 0 15px;
border-left: 4px solid #764ba2;
padding-left: 15px;
}
:focus {
outline: 3px solid #667eea;
outline-offset: 2px;
}
.info-table {
width: 100%;
border-collapse: collapse;
margin: 20px 0;
}
.info-table th,
.info-table td {
padding: 12px;
text-align: left;
border: 1px solid #ddd;
}
.info-table th {
background: #667eea;
color: white;
}
</style>
</head>
<body>
<div class="container">
<h1>键盘导航</h1>
<p>键盘导航是可访问性的重要组成部分,许多用户依赖键盘进行导航,包括运动障碍用户、屏幕阅读器用户等。</p>
<h2>常用键盘快捷键</h2>
<table class="info-table">
<thead>
<tr>
<th>按键</th>
<th>功能</th>
</tr>
</thead>
<tbody>
<tr>
<td>Tab</td>
<td>向前移动焦点</td>
</tr>
<tr>
<td>Shift + Tab</td>
<td>向后移动焦点</td>
</tr>
<tr>
<td>Enter / Space</td>
<td>激活按钮或链接</td>
</tr>
<tr>
<td>Arrow Keys</td>
<td>在组件内导航(如菜单、标签页)</td>
</tr>
<tr>
<td>Escape</td>
<td>关闭模态框、下拉菜单等</td>
</tr>
<tr>
<td>Home</td>
<td>跳到开始位置</td>
</tr>
<tr>
<td>End</td>
<td>跳到结束位置</td>
</tr>
</tbody>
</table>
<h2>焦点管理</h2>
<ul>
<li>确保所有交互元素可以通过Tab键访问</li>
<li>提供清晰的焦点指示器</li>
<li>使用tabindex属性控制焦点顺序</li>
<li>在模态框中实现焦点陷阱</li>
</ul>
<div style="background: #fff3cd; padding: 15px; border-radius: 5px; margin-top: 20px;">
<strong>东巴文提示:</strong>所有交互元素必须可以通过键盘访问。测试时尝试仅使用键盘完成所有操作。
</div>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>屏幕阅读器 - 东巴文</title>
<style>
body {
font-family: 'Segoe UI', sans-serif;
padding: 20px;
background: #f5f5f5;
}
.container {
max-width: 800px;
margin: 0 auto;
background: white;
padding: 30px;
border-radius: 10px;
}
h1 {
color: #667eea;
margin-bottom: 20px;
}
h2 {
color: #764ba2;
margin: 30px 0 15px;
border-left: 4px solid #764ba2;
padding-left: 15px;
}
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
.info-table {
width: 100%;
border-collapse: collapse;
margin: 20px 0;
}
.info-table th,
.info-table td {
padding: 12px;
text-align: left;
border: 1px solid #ddd;
}
.info-table th {
background: #667eea;
color: white;
}
</style>
</head>
<body>
<div class="container">
<h1>屏幕阅读器</h1>
<p>屏幕阅读器是辅助技术的一种,可以将屏幕上的内容转换为语音或盲文,帮助视障用户访问网页。</p>
<h2>常用屏幕阅读器</h2>
<table class="info-table">
<thead>
<tr>
<th>屏幕阅读器</th>
<th>平台</th>
<th>说明</th>
</tr>
</thead>
<tbody>
<tr>
<td>NVDA</td>
<td>Windows</td>
<td>免费开源,广泛使用</td>
</tr>
<tr>
<td>JAWS</td>
<td>Windows</td>
<td>商业软件,功能强大</td>
</tr>
<tr>
<td>VoiceOver</td>
<td>macOS, iOS</td>
<td>Apple设备内置</td>
</tr>
<tr>
<td>TalkBack</td>
<td>Android</td>
<td>Android设备内置</td>
</tr>
<tr>
<td>Orca</td>
<td>Linux</td>
<td>Linux桌面环境</td>
</tr>
</tbody>
</table>
<h2>图片替代文本</h2>
<ul>
<li><strong>装饰性图片:</strong>使用alt=""或aria-hidden="true"</li>
<li><strong>信息性图片:</strong>提供描述性alt文本</li>
<li><strong>复杂图片:</strong>使用longdesc或aria-describedby</li>
</ul>
<h2>视觉隐藏内容</h2>
<p>使用.sr-only类为屏幕阅读器提供额外信息,但对视觉用户隐藏:</p>
<pre style="background: #f8f9fa; padding: 15px; border-radius: 5px; overflow-x: auto;">
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
</pre>
<div style="background: #fff3cd; padding: 15px; border-radius: 5px; margin-top: 20px;">
<strong>东巴文提示:</strong>定期使用屏幕阅读器测试网站,确保所有内容都能被正确读取。可以先用NVDA或VoiceOver开始测试。
</div>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>颜色对比度 - 东巴文</title>
<style>
body {
font-family: 'Segoe UI', sans-serif;
padding: 20px;
background: #f5f5f5;
}
.container {
max-width: 800px;
margin: 0 auto;
background: white;
padding: 30px;
border-radius: 10px;
}
h1 {
color: #667eea;
margin-bottom: 20px;
}
h2 {
color: #764ba2;
margin: 30px 0 15px;
border-left: 4px solid #764ba2;
padding-left: 15px;
}
.demo-box {
padding: 30px;
margin: 10px 0;
border-radius: 5px;
text-align: center;
font-size: 18px;
font-weight: bold;
}
.good-contrast {
background: #333333;
color: #ffffff;
}
.bad-contrast {
background: #cccccc;
color: #ffffff;
}
.info-table {
width: 100%;
border-collapse: collapse;
margin: 20px 0;
}
.info-table th,
.info-table td {
padding: 12px;
text-align: left;
border: 1px solid #ddd;
}
.info-table th {
background: #667eea;
color: white;
}
</style>
</head>
<body>
<div class="container">
<h1>颜色对比度</h1>
<p>颜色对比度是指前景色和背景色之间的亮度差异。足够的对比度能确保文本可读,特别是对色盲用户和低视力用户。</p>
<h2>WCAG对比度要求</h2>
<table class="info-table">
<thead>
<tr>
<th>等级</th>
<th>正常文本</th>
<th>大文本</th>
</tr>
</thead>
<tbody>
<tr>
<td>AA(最低要求)</td>
<td>4.5:1</td>
<td>3:1</td>
</tr>
<tr>
<td>AAA(增强)</td>
<td>7:1</td>
<td>4.5:1</td>
</tr>
</tbody>
</table>
<h2>对比度示例</h2>
<h3>✓ 良好对比度(通过AA)</h3>
<div class="demo-box good-contrast">
<p>这是良好对比度的文本示例。</p>
<p style="font-size: 14px;">对比度: 12.63:1</p>
</div>
<h3>✗ 不良对比度(未通过AA)</h3>
<div class="demo-box bad-contrast">
<p>这是不良对比度的文本示例。</p>
<p style="font-size: 14px;">对比度: 1.58:1</p>
</div>
<h2>设计建议</h2>
<ul>
<li>使用高对比度配色方案</li>
<li>不要仅依赖颜色传达信息</li>
<li>为链接提供视觉提示(如下划线)</li>
<li>使用对比度检测工具验证配色</li>
</ul>
<h2>对比度检测工具</h2>
<ul>
<li><strong>WebAIM Contrast Checker</strong> - 在线对比度检测工具</li>
<li><strong>Chrome DevTools</strong> - 开发者工具内置对比度检测</li>
<li><strong>Colour Contrast Analyser</strong> - 桌面应用</li>
<li><strong>axe DevTools</strong> - 浏览器扩展</li>
</ul>
<div style="background: #fff3cd; padding: 15px; border-radius: 5px; margin-top: 20px;">
<strong>东巴文提示:</strong>在设计阶段就考虑对比度要求,使用对比度检测工具验证配色方案,确保所有文本都符合WCAG标准。
</div>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>可访问性测试 - 东巴文</title>
<style>
body {
font-family: 'Segoe UI', sans-serif;
padding: 20px;
background: #f5f5f5;
}
.container {
max-width: 800px;
margin: 0 auto;
background: white;
padding: 30px;
border-radius: 10px;
}
h1 {
color: #667eea;
margin-bottom: 20px;
}
h2 {
color: #764ba2;
margin: 30px 0 15px;
border-left: 4px solid #764ba2;
padding-left: 15px;
}
.tool-grid {
display: grid;
grid-template-columns: 1fr;
gap: 20px;
margin: 20px 0;
}
@media (min-width: 576px) {
.tool-grid {
grid-template-columns: repeat(2, 1fr);
}
}
.tool-card {
background: #f8f9fa;
padding: 20px;
border: 2px solid #ddd;
border-radius: 10px;
transition: all 0.3s;
}
.tool-card:hover {
border-color: #667eea;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}
.tool-card h3 {
color: #667eea;
margin-bottom: 10px;
}
.tool-card p {
color: #666;
margin-bottom: 15px;
}
.tool-card .tool-type {
display: inline-block;
background: #667eea;
color: white;
padding: 3px 10px;
border-radius: 3px;
font-size: 12px;
}
.checklist {
background: #f8f9fa;
padding: 20px;
border-radius: 10px;
margin: 20px 0;
}
.checklist-item {
padding: 10px 0;
border-bottom: 1px solid #ddd;
}
.checklist-item:last-child {
border-bottom: none;
}
.checklist-item input[type="checkbox"] {
margin-right: 10px;
}
</style>
</head>
<body>
<div class="container">
<h1>可访问性测试</h1>
<p>可访问性测试是确保网站对所有用户可用的关键步骤。应该结合自动化工具和手动测试。</p>
<h2>自动化测试工具</h2>
<div class="tool-grid">
<div class="tool-card">
<h3>axe DevTools</h3>
<p>浏览器扩展,自动检测可访问性问题</p>
<span class="tool-type">浏览器扩展</span>
</div>
<div class="tool-card">
<h3>Lighthouse</h3>
<p>Chrome内置工具,提供可访问性审计</p>
<span class="tool-type">浏览器内置</span>
</div>
<div class="tool-card">
<h3>WAVE</h3>
<p>Web可访问性评估工具</p>
<span class="tool-type">在线工具</span>
</div>
<div class="tool-card">
<h3>pa11y</h3>
<p>命令行可访问性测试工具</p>
<span class="tool-type">CLI工具</span>
</div>
</div>
<h2>手动测试清单</h2>
<div class="checklist">
<div class="checklist-item">
<input type="checkbox" id="check1">
<label for="check1">仅使用键盘完成所有操作</label>
</div>
<div class="checklist-item">
<input type="checkbox" id="check2">
<label for="check2">使用屏幕阅读器测试页面</label>
</div>
<div class="checklist-item">
<input type="checkbox" id="check3">
<label for="check3">检查颜色对比度</label>
</div>
<div class="checklist-item">
<input type="checkbox" id="check4">
<label for="check4">放大页面至200%测试</label>
</div>
<div class="checklist-item">
<input type="checkbox" id="check5">
<label for="check5">禁用CSS测试结构</label>
</div>
<div class="checklist-item">
<input type="checkbox" id="check6">
<label for="check6">检查所有图片有替代文本</label>
</div>
<div class="checklist-item">
<input type="checkbox" id="check7">
<label for="check7">测试表单标签和错误提示</label>
</div>
<div class="checklist-item">
<input type="checkbox" id="check8">
<label for="check8">验证HTML语义化</label>
</div>
</div>
<h2>测试流程建议</h2>
<ol>
<li><strong>开发阶段:</strong>使用axe DevTools或Lighthouse进行自动化测试</li>
<li><strong>代码审查:</strong>检查可访问性最佳实践</li>
<li><strong>手动测试:</strong>使用键盘和屏幕阅读器测试</li>
<li><strong>用户测试:</strong>邀请残障用户参与测试</li>
<li><strong>持续监控:</strong>定期进行可访问性审计</li>
</ol>
<div style="background: #fff3cd; padding: 15px; border-radius: 5px; margin-top: 20px;">
<strong>东巴文提示:</strong>可访问性测试应该贯穿整个开发流程,而不是在最后才进行。尽早发现问题,修复成本越低。
</div>
</div>
</body>
</html>
东巴文(db-w.cn) 提醒:可访问性不是可选项,而是Web开发的基本责任。让每个人都能平等地访问信息,是互联网的初衷和使命。