NVDA读屏朗读只读输入框仍提示“可编辑”的解决办法求助

算力阿峰

2026-7-24

解决NVDA读屏对React只读表单字段误读“可编辑”的问题

换用非交互元素展示：如果字段仅用于内容展示，直接用<div>或<span>替代<input>/<textarea>，配合aria-label标注内容含义，彻底避免读屏识别为可编辑控件。示例代码：
```
<div aria-label="用户姓名">张三</div>
```
强化只读语义标记：若必须保留表单元素，除设置readOnly外，添加aria-readonly="true"明确只读语义，多数场景下可修正NVDA的误读逻辑。注意不要同时使用disabled属性——disabled会让控件失去焦点能力，而readonly仅限制编辑、保留焦点权限。示例：
```
<input
  type="text"
  value="张三"
  readOnly
  aria-readonly="true"
  aria-label="用户姓名"
/>
```
用disabled替代（按需选择）：如果不需要字段支持焦点聚焦，可直接设置disabled属性，此时NVDA会直接提示“已禁用”或“只读”，但需注意该控件将无法被Tab键选中，需结合业务场景判断是否适用。示例：
```
<input
  type="text"
  value="张三"
  disabled
  aria-label="用户姓名"
/>
```
排查多余交互属性：检查React组件是否无意中继承了contenteditable="true"这类属性，或是第三方UI库默认配置导致读屏误判，删除所有多余的可编辑相关属性即可。