H5 无障碍表单与键盘交互

摘要：可访问性让不同输入方式和辅助技术都能正确理解网页。表单尤其依赖标签、错误提示、焦点顺序和语义状态。本文从原生 HTML、键盘操作、动态反馈和适配偏好设置，整理可直接落地的实践。

一、优先使用原生语义

原生 <button>、<input>、<select> 和 <label> 自带键盘行为及辅助技术语义。用普通 div 模拟按钮，需要自行补上焦点、键盘事件、角色和禁用语义，维护成本更高。

每个输入框都应有可见或程序可关联的标签：

<label for="email">电子邮箱</label>
<input id="email" name="email" type="email" autocomplete="email" required>

占位提示不能替代标签，因为输入后提示通常消失，且它不一定被辅助技术当作字段名称。

二、保持键盘可操作

所有功能都应能使用键盘完成。Tab 顺序应与页面阅读顺序一致；按钮用 Enter 或空格激活；自定义弹层打开后应将焦点移入，关闭后恢复到触发它的控件。避免通过 CSS 改变视觉顺序却保留完全不同的 DOM 顺序。

焦点指示需要清楚可见。可以调整轮廓样式，但不能简单移除默认 outline 而不提供替代。模态框打开时应限制背景区域的交互，并支持 Escape 关闭适用的弹层。

三、关联字段说明与错误

字段帮助文字和错误信息应与输入控件程序关联。提交失败后，把焦点移动到错误摘要，提供可操作的字段名称；单个字段错误也应在输入框附近显示，并设置无效状态。

<label for="phone">联系电话</label>
<input id="phone" aria-describedby="phone-hint phone-error" aria-invalid="true">
<p id="phone-hint">请填写可联系到你的号码</p>
<p id="phone-error">号码格式不正确</p>

只用颜色标记错误不够；增加文字或图标说明。验证不要只在失焦时无提示地清空用户输入，保留已填写内容并指出修复方式。

四、传递动态状态

加载、保存成功或结果数量变化等动态信息，可以通过适当的实时区域告知辅助技术。不要把每个字符输入都变成语音播报，也不要对同一结果重复宣布。状态更新要有节制，并为重要确认提供清晰文本。

按钮的可访问名称应反映动作，例如“删除草稿”，而不是只有“图标按钮”。图标若有旁边的可见文本，通常无需重复播报装饰性图标。

五、适配缩放、颜色与运动

文字应能放大，布局在窄屏下允许自然换行，避免固定高度裁掉内容。文本与背景需有足够对比度；状态不能只靠红绿区分，同时提供标签或形状差异。

尊重用户减少动态效果的系统偏好。非必要动画可降低或关闭，避免闪烁内容和大范围视差。触控目标要留出足够间距，避免小屏幕上误触相邻操作。

六、单页应用中的焦点管理

路由切换后，浏览器焦点可能仍停留在已隐藏的旧页面控件。应用应在主要内容变化时将焦点移到新页面标题或主区域，并更新文档标题。打开新视图时不要让焦点落入不可见内容。

所有事件监听器与焦点陷阱都要在视图关闭时清理。浏览器返回、前进和表单重载场景也要验证焦点位置与屏幕阅读顺序。

七、可操作的检查流程

1. 只使用键盘完成整份表单，观察焦点是否清晰且顺序合理。
2. 放大页面并检查字段、错误和按钮是否被遮挡。
3. 使用屏幕阅读器检查控件名称、必填状态和错误关联。
4. 关闭 CSS 后查看文档结构是否仍有合理顺序。
5. 检查对比度、减少动态效果设置和触控目标间距。

自动化工具可以发现部分结构问题，但无法代替完整键盘流程和真实辅助技术检查。测试要尽量包含实际页面状态，而非只检查静态首屏。

八、常见问题

1. 不用占位文字代替字段标签。
2. 不用 tabindex 大于零强行排列焦点。
3. 不把焦点移到被隐藏或已销毁的元素。
4. 不以颜色作为唯一错误或成功信号。
5. 不为静态信息添加会频繁播报的实时区域。

九、总结

表单可访问性建立在原生语义、完整键盘路径、清楚错误说明和正确焦点管理之上。响应缩放、对比度与运动偏好后，再结合键盘和辅助技术实际检查，才能确认不同用户都能完成页面任务。