Vue项目中ARIA标签无法被NVDA自动朗读相关问题咨询

问题1：ARIA功能在谷歌浏览器中是默认开启的吗？是否需要安装扩展或做其他类似配置才能启用？ #

ARIA功能在谷歌浏览器中是默认开启的，不需要额外安装扩展或做特殊配置。你遇到的不自动朗读问题和浏览器的ARIA开关无关，是属性使用逻辑和匹配场景的问题。

问题2：针对上述代码，是否需要编写额外的script后端代码或配置data数据块才能让ARIA属性生效？ #

大部分基础静态ARIA属性不需要额外编写后端代码或者配置data块就能生效，但你代码中用到的aria-busy、aria-live这类针对动态内容的属性，需要在对应状态更新时同步修改属性值，才能触发屏幕阅读器的朗读逻辑，纯静态写死属性是不会触发自动朗读的。

问题3：上述Vue标记语言代码中还有哪些明显的错误或可补充的配置，可以让ARIA功能正常运行？ #

现有代码存在多个属性使用错误，调整后即可正常触发朗读：

• 存在属性冲突：你同时给同一个元素加了role="alertdialog"和aria-live="assertive"，两个属性的适用场景完全冲突。alertdialog本身是模态弹窗角色，自带强制打断朗读的特性，不需要额外加aria-live属性，aria-live仅适用于非模态的动态内容提示场景。
• aria-busy属性值写死为true：这个属性是用来标识当前元素内容正在加载中，等内容加载完成后必须把值修改为false，才会触发屏幕阅读器朗读最终内容，你一直设为true，NVDA会默认这个区域内容还没就绪，不会主动朗读。
• 标签内容冗余：你同时给b-form-group设置了label属性和aria-label属性，屏幕阅读器会优先读取aria-label的内容，直接覆盖label的文字，如果你不需要隐藏可见的表单标签，不需要额外加aria-label，避免内容重复或者冲突。
• aria-describedby对应元素缺失：你配置了aria-describedby="local-id-live-feedback"，但当前代码里没有id为local-id-live-feedback的元素，这个属性会直接失效，要么补充对应的描述元素，要么删掉这个无效属性。
• 触发逻辑不符合规则：如果你要自动朗读的是页面初始加载就有的固定内容，不需要用aria-live或者alertdialog，只要标签语义正确，NVDA在页面加载完成后会按顺序朗读页面内容；如果是动态加载的内容才需要用live区域，且只有在内容更新的瞬间才会触发朗读，页面初始渲染静态内容的话live区域不会主动触发朗读。

内容的提问来源于stack exchange，提问作者JosephDoggie