NVDA 无法使用 Vuetify 读取 Firefox 中的按钮

Question

我的应用程序中使用 NVDA 作为屏幕阅读器的客户遇到了严重问题。

我用我使用 NVDA + 我的网站完成的测试作为序言：
Chrome：我的网站运行完美，但 NVDA 不会读取浏览器本身。
Edge：我的网站和浏览器都可以工作，但客户有其他问题并且不会使用它。

在 Firefox 中，除非我按下按钮，否则不会读取按钮（这违背了目的）。 我尝试过将按钮标签直接添加到 HTML 中，并且它会被读取，因此问题肯定出在 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>

我尝试过使用简单的按钮甚至

<v-btn>

标签来更改

<div>

标签。 我尝试过添加一个角色，甚至添加各种（和许多无意义的）咏叹调标签。

Answer 1

您应该使用属性

tabindex=0

，以便按钮可以聚焦。使用

role="button"

定义按钮以告诉屏幕阅读器它是一个按钮也是有意义的。

更多信息请参阅 https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/button_role

您的情况：

<v-btn
   rounded="0"
   class="mt-2 bg-white-custom me-3 text-body-2"
   @click.stop="tornaAlSito()"
   aria-label="Torna al sito"
   title="Torna al sito"
   role="button"
   tabindex="0"
>
   Torna al sito
</v-btn>

此选项必须在 NVDA 中打开（这是德语，抱歉，意思是：打开鼠标跟踪）