学习前提
已有包含链接、表单和图片的小页面，能使用键盘Tab与DevTools。
本课完成后你能做什么
用可重复的检查流程发现仅靠截图无法发现的可用性问题。
先理解机制
无障碍检查先从完成任务开始：只用键盘进入表单、填写、修正错误并完成操作。记录每一步焦点位置，不能只检查元素“能不能被Tab到”。焦点应可见、顺序符合阅读逻辑，不被弹层或固定区域遮挡。
控件需要可访问名称。可见label通常比只写aria-label更易理解与维护；图标按钮才更需要额外名称。不要给所有容器加aria-label，它不会神奇地提升可访问性，还可能让结构更嘈杂。原生语义应优先。
动态反馈用合适的状态区域，错误还应关联具体字段并保留输入。颜色不能是唯一信息，错误需要文字。键盘焦点与屏幕阅读器读取位置不是完全相同的概念，自动工具通过也不能替代人工任务检查。
缩放到200%，把窗口缩窄，使用长标题和长错误文字测试。检查页面语言声明与局部外语标记，让读音选择有依据。把问题记录为“触发条件、实际结果、预期结果、最小修复”，比写“无障碍不好”更可执行。
可运行示例
运行方式：将HTML示例保存为独立的.html文件并在浏览器打开；含脚本的示例使用现代浏览器。资源文件与多文件模块另按正文要求准备。
<!doctype html>
<html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Honeysuck practice</title></head><body>
<a href="#content">Skip navigation</a><nav aria-label="Main"><a href="#content">Practice</a></nav>
<main id="content" tabindex="-1"><h1>Contact practice</h1>
<form id="contact"><label for="email">Email</label><input id="email" type="email" required aria-describedby="hint"><p id="hint">Enter a complete email address.</p><button>Check</button></form><p id="feedback" role="status"></p></main>
<style>:focus-visible{outline:3px solid #176343;outline-offset:4px}input{max-width:100%;box-sizing:border-box}</style>
<script>document.querySelector('#contact').addEventListener('submit',event=>{event.preventDefault();document.querySelector('#feedback').textContent='Format accepted. No message was sent.';});</script>
</body></html>推演与验证
不使用鼠标：从跳过导航进入main，再到邮箱和提交。空值、缺少@、正常地址各试一次；成功文案必须明确只是检查格式。用浏览器无障碍树核对Email名称和提示关联，最后放大页面检查内容是否仍可操作。
常见错误与边界
role=status不适合整页包裹，否则大量内容变化可能造成干扰。tabindex正数容易制造脱离DOM的焦点顺序。不要把正常文本都设tabindex=0来模拟阅读器导航。
动手练习
为之前的个人主页项目写一份至少6条的验收记录，每条包含测试输入、结果和修复。至少包含键盘、200%缩放、长内容与失效链接。
参考解法与理由
可按任务路径组织：跳过导航、访问作品、读取说明、返回、联系、错误恢复。记录失败后的修复与复测结果；没有实际测试的项目应标为待测，不写通过。