Vuelidate makes it very simple for developers to handle even the most complex cases of form validation, but what about accessibility UX? Let's take...
For further actions, you may consider blocking this person and/or reporting abuse
Nice article, Marina. I share your interest in both Vue and accessibility. A couple of observations. Live regions are supposed to announce changes only when that the region contains content that is already present in the DOM on page load. If you use v-if, the new content is inserted into the DOM only when there is an error, and the announcement will not work. If you create a live region container, and use v-show instead of v-if; the live region will work. e.,g.,
This field is required.
Since you are already using aria-describedby, one could also take a slightly different, arguably simpler approach. As you point out, focusing on the input will cause the screen reader to read the aria-describedby message. Instead of doing the above, you could make the content of the aria-describedby message dynamic, using a method. The method would return an empty string if there is no error, and the error message if there is an error. This way, then you can dispense with the live region, and let aria-describedby do the work for you.
I wrote an article on this subject a few months ago:
Accessible Form Validation Messages with ARIA and Vue.js
Thanks for the info Peter, v-if is indeed a nice solution once its paired with a method/computed in this scenario
I've been looking for this autofocus... you killed it!
v-model.lazy would do the job for the email input field I guess?
We definitely need more articles about accessibility like this. Thanks for sharing.
Great catch Guillaume. Sometimes when im writing im trying to find examples that fit the subject best, and I wanted to cover $touch. Thanks for reading!