HTML无障碍访问入门：alt、label、aria属性与表单可用性优化

无障碍访问不是少数人的特殊需求，而是让网页对更多用户更好用。视力受限用户可能依赖读屏软件，行动不便用户可能主要使用键盘，移动端用户可能在强光、弱网、单手操作等环境中访问页面。HTML 写得清楚，页面可用性就会更稳。

对入门开发者来说，最值得先掌握的是图片 alt、表单 label、合适的按钮和链接语义，以及必要时使用 aria 属性补充说明。本文围绕这些基础点，讲清无障碍访问在日常页面里该怎么落地。

从语义开始

无障碍优化的第一步不是堆 ARIA，而是使用正确的 HTML 元素。标题就用标题标签，按钮就用按钮元素，链接就用链接元素，表单控件要有明确标签。浏览器和辅助技术天然理解这些语义。

推荐：button 表示操作按钮
data-action：submit

不推荐：用普通 div 假装按钮

如果用普通元素模拟按钮，就需要额外处理键盘聚焦、回车触发、空格触发、角色说明等问题。能用原生元素解决时，优先使用原生元素。

图片 alt

alt 是图片的替代文本。当图片无法加载，或者用户使用读屏软件浏览页面时，alt 会帮助用户理解图片内容。

图片：产品控制台截图
alt：服务器监控面板显示 CPU、内存和带宽使用情况

好的 alt 不是机械描述“这是一张图片”，而是说明图片传达的信息。如果图片只是装饰，没有实际信息，可以使用空 alt，让读屏软件跳过它。

装饰图处理

装饰图不需要被读屏软件反复朗读，比如分割线、背景纹理、纯装饰图标。它们可以设置为空替代文本。

装饰图 alt：空字符串
用途：让辅助技术跳过无信息图片

如果图标本身承担功能，比如搜索图标按钮、删除图标按钮，就不能简单跳过。此时应该给按钮提供清晰文本或可访问名称。

label 和表单

表单控件必须让用户知道应该填写什么。label 可以把文本说明和输入框关联起来，用户点击标签文字时也能聚焦到对应输入框。

label for：email
input id：email
说明：邮箱地址

如果没有 label，读屏软件可能只读出“编辑框”，用户不知道该输入什么。占位符 placeholder 不能替代 label，因为用户输入后占位符会消失。

错误提示

表单错误提示要明确告诉用户哪里错了、怎么改。只把边框变红是不够的，因为颜色对部分用户不可见，也无法被读屏软件可靠理解。

错误提示示例：邮箱格式不正确，请输入 name@example.com 这样的邮箱地址。

如果使用 JavaScript 动态显示错误，建议把错误文本放在输入框附近，并通过明确的文本说明。复杂表单可以在提交失败后把焦点移动到第一个错误位置，减少用户寻找成本。

键盘可用性

很多用户并不使用鼠标。页面里的链接、按钮、表单控件、弹窗关闭按钮，都应该能通过键盘访问和操作。按 Tab 键时，焦点顺序应该符合页面阅读顺序。

不要随意移除焦点样式。有些 CSS 会写 outline: none，这会让键盘用户不知道当前焦点在哪里。如果需要自定义样式，可以改得更美观，但不要让焦点消失。

aria 的定位

aria 属性可以补充语义，但不应该替代正确 HTML。常见用法包括给图标按钮提供名称、给展开折叠组件说明状态、给动态区域提示更新等。

图标按钮可访问名称：aria-label="关闭弹窗"
展开状态：aria-expanded="true"
关联控制区域：aria-controls="menuPanel"

ARIA 的原则是：能不用就不用，能用原生 HTML 就优先用原生 HTML。错误使用 ARIA 可能比不用更糟，因为它会向辅助技术传递错误信息。

按钮和链接区别

链接用于跳转到另一个地址，按钮用于执行一个动作。比如“查看文章详情”通常是链接，“提交表单”“打开弹窗”“删除项目”通常是按钮。

不要为了样式方便，把所有东西都写成链接或都写成按钮。语义选对后，键盘行为、读屏提示和默认交互都会更符合用户预期。

标题层级

清晰的标题层级可以帮助用户快速理解页面结构。一个页面通常从主标题开始，再用二级标题、三级标题组织内容。不要只为了字号大小跳级使用标题。

页面标题：h1
主要章节：h2
章节内部小节：h3

读屏用户经常通过标题列表快速浏览页面。如果标题层级混乱，用户会很难判断内容关系。

颜色和对比度

文字和背景要有足够对比度。浅灰文字、低对比按钮、只靠颜色区分状态，都会影响可读性。错误状态除了红色，还应该配合文字或图标说明。

链接也不建议只靠颜色和普通文本区分，可以保留下划线或明显的悬停、聚焦样式。移动端按钮要有足够点击区域，避免用户误触。

常见错误

第一种错误是图片没有 alt，或者所有图片都写同一个无意义描述。第二种错误是表单只有 placeholder，没有 label。第三种错误是移除焦点样式。第四种错误是用 div 模拟按钮却没有键盘支持。

还有一种常见误区是把 ARIA 当万能补丁。页面结构本身混乱时，先修 HTML 语义，再考虑 ARIA。无障碍不是最后加一层属性，而是从结构设计时就开始考虑。

检查清单

上线前可以快速检查：图片是否有合适 alt；装饰图是否被跳过；表单控件是否有关联 label；错误提示是否清楚；键盘能否访问主要操作；焦点样式是否可见；标题层级是否合理；按钮和链接语义是否正确。

这些基础优化成本不高，却能显著提升页面质量。对 SEO、可维护性、移动端体验和真实用户可用性来说，无障碍访问都不是额外负担，而是更扎实的前端基本功。