前端可访问性：日常开发中的实用检查清单

可访问性并不是上线前额外补做的功能。选择正确的 HTML 元素、保留清晰的键盘焦点、提供可理解的错误提示，就能解决大量基础问题。

优先使用语义元素#

能用 button 时不要用可点击的 div。按钮天然支持键盘操作、焦点和禁用状态，也能被辅助技术正确识别。页面结构使用 header、nav、main 和标题层级，可以帮助用户快速理解内容。

完整走一遍键盘操作#

暂时放下鼠标，只使用 Tab、Shift + Tab、Enter 和方向键操作页面。检查焦点是否可见、顺序是否合理、弹窗打开后焦点是否进入弹窗，以及关闭后是否回到原位置。

不要只依赖颜色传达状态#

错误输入不能只把边框变红，还应提供文字说明。图表除了颜色，还可以使用形状、线型或文字标签进行区分。这样不仅帮助色觉障碍用户，在强光或低质量屏幕下也更清晰。

为表单提供明确提示#

每个输入框都应有可识别的标签。占位文字会在输入后消失，不能代替标签。错误信息需要说明哪里出错、如何修正，并与对应输入框建立关联。

把检查放进开发流程#

自动化工具可以发现缺少替代文字、对比度不足等常见问题，但无法判断文案是否易懂、键盘流程是否自然。工具检查与人工操作需要结合使用。

可访问性做得好，通常也意味着页面结构更清晰、交互更稳定，对所有用户都有帮助。