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:
Marina Mosti is a full-stack web developer with over 14 years of experience in the field. She enjoys mentoring other women on JavaScript and her favorite framework, Vue.
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