CODEWITHSUNDEEP
vue.jsvuetify.jsaccessibilitynvda
Luca Tacchino
Luca Tacchino

Reputation: 21

NVDA doesn't read buttons in Firefox using Vuetify

I'm having a serious problem with a customer using NVDA as his screen reader with my application.

I preface this with the tests I've done using NVDA + my site:
Chrome: my site works perfectly, but NVDA won't read the browser itself.
Edge: my site and the browser both work, but customer has other issues and won't use it.

In Firefox my buttons aren't read unless I press them (which defeats the purpose). I've tried adding a button tag directly to the HTML and it gets read, so the problem must lie in Vue or Vuetify.

This is an example for a button I'm using:

<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>

I've tried changing the <v-btn> tag with a simple button and even a <div> tag. I've tried adding a role to it and even various (and many nonsensical) aria tags.

Upvotes: 2

Views: 124

Answers (2)

Luca Tacchino
Luca Tacchino

Reputation: 21

After many tries the problem appeared to be Vuetify. Even on their site it won't be read by NVDA on Firefox. I've opted to remove Vuetify and write my frontend again without any library.

Upvotes: 0

tom
tom

Reputation: 10539

You should use the attribute tabindex=0 so that the button can be focussed. It also makes sense to define the button with role="button" to tell the screen reader that it is a button.

Further information on https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/button_role

In your case:

<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>

This option must be switched on in NVDA (it's in German, sorry, it means something like: switch on mouse tracking)

enter image description here

Upvotes: 0

Related Questions