search

vuetifyjs / vuetify

🐉 Vue Component Framework
https://vuetifyjs.com
MIT License
39.89k stars 6.97k forks source link

[Bug Report][2.7.0] v-snackbar is not consistently detected on multiple screen readers #19513

Open cjoulain opened 7 months ago

cjoulain commented 7 months ago

Environment

Vuetify Version: 2.7.0 Vue Version: 2.7.7 Browsers: Chrome 123.0.0.0 OS: Mac OS 10.15.7

Steps to reproduce

We use v-snackbar in combination with our event listeners to send live notifications such as "Message sent to email@example.com". Recent WebAIM surveys reveal that JAWS, NVDA, and Voiceover are the most popular screen readers in usage and we conduct our accessibility testing with these voice output technologies. Currently, JAWS and NVDA do not detect v-snackbar. Voiceover is sometimes is able to narrate the contents of v-snackbar and sometimes not. Since we're striving for WCAG compliance (in particular 4.1.3 Status Messages), do you have any suggestions for how to resolve? We currently use Vuetify 2.7 but have also tested the component on Vuetify 3. Please see this Loom: https://www.loom.com/share/ef27ae7640dc479bb7e4fbc7f06ae7c4

Expected Behavior

v-snackbar is narrated across the top 3 screen readers in both Vuetify 2 and 3

Actual Behavior

v-snackbar is inconsistently detected by the top 3 screen readers or not detected at all in either Vuetify 2 and 3

Reproduction Link

https://codepen.io/cj-bc/pen/gOyGveY

Other comments

Please feel free to reach out to me on the Vuetify Discord (cj.here).

KaelWD commented 7 months ago

Apparently screenreaders aren't supposed to read live regions as they're inserted, only on updates: https://github.com/nvaccess/nvda/issues/14591 https://github.com/w3c/aria/issues/1216