React站点中NVDA误将不可点击logo识别为可点击如何解决？

该问题由三类原因共同导致：

• 原生可交互元素误用：Create React App 默认生成的站点中，logo 图片被包裹在带href属性的<a>标签内，<a>属于原生可交互可点击元素，NVDA 会默认将其识别为可点击元素。如果你已经移除了外层<a>标签仍有该问题，可参考后续两类成因。
• CSS 样式触发判定：如果 logo 或其上层容器设置了cursor: pointer样式，NVDA 会将带有该样式的元素统一判定为可点击元素，即便元素没有绑定任何点击事件。
• React 事件委托机制影响：React 17+ 版本会将所有组件内绑定的点击类事件委托挂载到 ReactDOM.render 对应的根 DOM 节点上，NVDA 检测可点击元素时会向上遍历所有祖先节点，只要祖先节点绑定了 click 类事件监听器，就会标记当前节点为可点击，纯展示元素也会被误判。

可根据实际场景选择以下一种或多种组合方案，修复后 NVDA 不会再播报 clickable 标识：

• 替换可交互容器：删除 logo 外层的<a>、<button>等原生可交互容器，改用<div>、<span>等普通非交互标签包裹 logo，同时移除 logo 及其上层容器绑定的所有无用点击事件。
• 调整 CSS 样式：删除 logo 及其上层容器的cursor: pointer样式，设置为cursor: default；如果 logo 完全不需要响应任何指针交互，可以直接添加pointer-events: none样式，该属性会告知浏览器忽略该元素的所有指针事件，NVDA 会直接跳过可点击判定。
• 补充无障碍属性：给 logo 的<img>标签添加role="img"明确元素为图片角色，根据 logo 用途设置 alt 属性：如果是纯装饰性 logo 设置alt=""，如果是品牌 logo 保留正常 alt 文本即可，明确的角色标识会避免 NVDA 误判为交互元素。

内容的提问来源于stack exchange，提问作者dominic-smith