aria-readonly用法及注意事项详解
2026-05-08 19:08:03
0浏览
收藏
在HTML中，`aria-readonly`并非功能开关，而是一份专为屏幕阅读器等辅助技术撰写的“语义说明书”，它仅传达“此内容不可编辑”的意图，却完全不阻止用户输入、粘贴或修改——若脱离原生`readonly`属性或JavaScript事件拦截，就会导致界面行为与无障碍提示严重割裂；因此，真正可靠的只读体验必须坚持“行为控制（如`readonly`或`contenteditable="false"`）+ 语义同步（`aria-readonly="true"`）+ 后端校验”三层协同，尤其在自定义组件和动态状态切换场景中，忽视这一原则不仅削弱可访问性，更可能让残障用户陷入困惑甚至操作失败。
aria-readonly 不是替代 readonly 的属性
aria-readonly 是 ARIA 规范中用于辅助技术（如屏幕阅读器）传达“只读”语义的属性，但它**不改变任何交互行为**。浏览器不会因此阻止输入、禁用聚焦或影响表单提交逻辑。它只负责告诉辅助工具：“这个字段当前不可编辑”。如果你没加原生 readonly 或没拦截事件，用户照常能输、能粘贴、能删——而屏幕阅读器却在说“只读”，这就造成语义与行为严重错位。
什么时候必须配对使用 aria-readonly 和 readonly
典型场景是自定义组件：比如用 div + contenteditable="false" 模拟输入框，或富文本编辑器（TinyMCE/CKEditor）切换只读模式时。这些元素没有原生 readonly 属性支持，但需让 NVDA、JAWS、VoiceOver 正确识别状态。
- 原生
或