You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Describe the bug
If a component has validation then there needs to be a method to inform assistive technology users of any errors and how to correct them.
Level A 4.1.3: Status Messages - In content implemented using mark-up languages, status messages can be programmatically determined through role or properties such that they can be presented to the user by assistive technologies without receiving focus.
Success Criterion 3.3.1 Error Identification Level A
If an input error is automatically detected, the item that is in error is identified and the error is described to the user in text.
Expected behaviour
If a Input has validation on the input then there needs to be a method to inform assistive technology users of any errors and how to correct them.
My thoughts are aria-invalid="true" attribute should be dynamically added or change from false, then error message needs to be programmatically linked to the input via a aria-describeby and aria-live attribute should be used.
Describe the bug
If a component has validation then there needs to be a method to inform assistive technology users of any errors and how to correct them.
Level A 4.1.3: Status Messages - In content implemented using mark-up languages, status messages can be programmatically determined through role or properties such that they can be presented to the user by assistive technologies without receiving focus.
Success Criterion 3.3.1 Error Identification Level A
If an input error is automatically detected, the item that is in error is identified and the error is described to the user in text.
Expected behaviour
If a Input has validation on the input then there needs to be a method to inform assistive technology users of any errors and how to correct them.
My thoughts are aria-invalid="true" attribute should be dynamically added or change from false, then error message needs to be programmatically linked to the input via a aria-describeby and aria-live attribute should be used.
Additional context
This article proved me some good insight into accessible form validation - https://www.smashingmagazine.com/2023/02/guide-accessible-form-validation/#required-fields
The text was updated successfully, but these errors were encountered: