Form input error messages accessibility
✅solved
front-end
front-endhttps://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Attributes/aria-errormessage#:~:text=Often%20times%2C%20you%20will%20want,to%20make%20the%20object%20valid.
I just read this today. My question is when you use this and aria-live with spa frameworks like react or angular would I need to take extra precautions?
As far as I understand react rerenders the whole component on state change so that might make aria-live behave weirdly if the whole form re renders.
React won't create new elements for everything but I'm not sure if the state change only changes the text or destroys the whole element to create new one
Also some examples on framework tutorials conditionally render the element that will contain the error message, instead of only updating the text content and attributes. Does that bypass accessibility concerns?
I just read this today. My question is when you use this and aria-live with spa frameworks like react or angular would I need to take extra precautions?
As far as I understand react rerenders the whole component on state change so that might make aria-live behave weirdly if the whole form re renders.
React won't create new elements for everything but I'm not sure if the state change only changes the text or destroys the whole element to create new one
Also some examples on framework tutorials conditionally render the element that will contain the error message, instead of only updating the text content and attributes. Does that bypass accessibility concerns?
MDN Web Docs
The aria-errormessage attribute on an object identifies the element(s) that provides an error message for that object.
A friendly place for developers to meet other devs, ask questions, get help, and just have a good time 🙂.
36,263Members
Resources
Similar Threads
Was this page helpful?
