名称、角色、值

要求内容

页面上的每个交互元素——按钮、链接、表单字段、选项卡、滑块、自定义组件——都必须向辅助技术公开三项信息：

• 名称 — 该控件叫什么？（“提交”、“关闭对话框”、“音量”）
• 角色 — 它是哪种控件？（按钮、链接、复选框、选项卡、滑块）
• 值 / 状态 — 对于具有状态的组件：它是否已按下、展开、选中、被选择？当前值是多少？

这种公开必须是编程方式实现的——在 DOM 中设置，而非通过 CSS 绘制。屏幕阅读器、盲文显示器、语音控制软件和开关扫描器读取的是无障碍树，而不是像素。

如何满足

• 只要存在原生 HTML 元素，就优先使用它。<button> 自带正确的角色、焦点、键盘处理，以及从文本内容派生的无障碍名称——无需额外工作。
• 对于仅含图标的按钮，添加 aria-label（或视觉隐藏文本）。<button aria-label="关闭">×</button>。
• 对于表单输入，将 <label for> 与输入框的 id 关联，或将输入框置于 <label> 内部。占位符文本不能充当标签。
• 当必须使用 <div> 和 <span> 构建自定义组件时，添加 role="…"、管理 tabindex、处理 Enter 和 Space，并用 aria-pressed、aria-expanded、aria-checked、aria-selected、aria-valuenow 反映状态。
• 在浏览器的无障碍树检查器中运行已渲染页面（Chrome DevTools → 元素 → 无障碍），逐一读取每个控件：每个控件都应以名称 + 角色 + 状态的形式宣告。

常见失误

• <div onclick="…"> 样式化为按钮——没有角色、没有键盘支持、没有名称。屏幕阅读器会跳过它。语音控制无法说”点击保存”。
• <div role="button"> 没有 tabindex="0"、没有 Enter/Space 处理器——看起来可访问，实则不然。
• 仅含图标的按钮（<button><svg /></button>）没有 aria-label、aria-labelledby 或视觉隐藏文本。仅宣告为”按钮”。
• 用 <div> 和 JavaScript 构建的自定义下拉菜单，缺少 role="combobox"、aria-expanded、aria-controls，以及其下的 listbox/option 角色。
• 切换按钮（静音、收藏、关注）视觉上改变了状态，但从不更新 aria-pressed。视力正常的用户看到了变化；屏幕阅读器用户听不到任何区别。
• 表单输入旁有视觉标签，但没有 for/id 关联或包裹的 <label>。
• 用 <svg> 绘制的自定义复选框，隐藏了原生输入，且该输入的 :checked 状态从未反映到可见 UI——屏幕阅读器状态与视觉状态产生偏差。

为何重要

这是规范中被引用最多的成功准则。几乎所有”此网站无法使用屏幕阅读器”的投诉，最终都指向某处的 4.1.2 失误——通常是伪装成按钮的 <div>，或没有名称的图标按钮。这也是构建自定义组件成本的体现：每个原生 HTML 控件已经通过 4.1.2；每个手工制作的 <div> 组件都必须逐行赢得合规。最快的 4.1.2 审查方法是开启屏幕阅读器，用 Tab 键遍历页面并聆听——任何宣告为”空白”或仅宣告为”按钮”的内容都是发现项。