求助：NVDA在Firefox环境下无法读取Vuetify按钮的问题

问题现状 #

• Chrome：站点功能正常，但NVDA无法读取浏览器本身
• Edge：站点和浏览器均正常工作，但客户因其他问题不愿使用该浏览器
• Firefox：v-btn仅在被按下时才会被NVDA读取，替换为原生<button>标签则可正常读取，推测问题出在Vue或Vuetify层面

示例代码 #

<v-btn rounded="0" class="mt-2 bg-white-custom me-3 text-body-2" aria-label="Torna al sito" title="Torna al sito">
  Torna al sito
</v-btn>

排查与解决思路 #

1. 检查v-btn渲染后的实际DOM结构
   Vuetify的v-btn默认应渲染为原生<button>元素，但部分配置或版本问题可能导致渲染成<div>。在Firefox开发者工具中查看元素：

   • 若为<div>，需确保添加role="button"、tabindex="0"，并绑定Enter和Space键的点击触发事件，模拟原生按钮的交互行为。
   • 若为<button>，确认是否丢失了aria-label等无障碍属性。

2. 确保无障碍属性正确传递
   部分情况下Vuetify可能未正确将aria-label等属性传递到实际渲染的元素上，可尝试通过attrs绑定强制传递：

   <v-btn 
     rounded="0" 
     class="mt-2 bg-white-custom me-3 text-body-2"
     :attrs="{ 'aria-label': 'Torna al sito', title: 'Torna al sito' }"
   >
     Torna al sito
   </v-btn>
   

3. 验证Vuetify版本兼容性
   旧版本Vuetify在无障碍支持上可能存在缺陷，尝试升级至最新稳定版，同时查阅官方文档确认v-btn的无障碍实现规范。

4. 借助NVDA日志定位问题
   打开NVDA日志查看器（NVDA菜单 → 工具 → 日志查看器），聚焦v-btn时观察日志输出，确认NVDA是否接收到元素的无障碍信息，是否存在错误提示，以此缩小问题范围。

5. 排除自定义样式干扰
   移除bg-white-custom等自定义类，测试按钮是否能被正常读取，排查是否是样式导致元素可聚焦性或屏幕阅读器识别异常。

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