Disabling Submit to Ensure Validation
View the full library of accessibility solutions.
Two methods to disable form elements are used here:
- The conditional form field for the cat's name uses the disabled attribute.
- The disabled submit button does not use the disabled attribute. Instead it uses aria-disabled="true".
Using aria-disabled
Unlike the Cat's Name field which uses the disabled attribute, the Submit button uses the aria-disabled attribute so that:
- The submit button still receives focus ensuring there is no confusion for screen-reader users wondering where the submit button went.
- When focus is given to the submit button it announces the disabled state of the button.
- The focused submit button will be able to announce all error messages that are keeping it disabled (by utilizing aria-describedby) to increase understanding.
Remember to do the following:
- Dim the disabled submit button with css.
- Assign aria-describedby to the button with space delimited ids for all error messaging.
- Block the submit button from triggering an action while aria-disabled is equal to "true".
- When all form fields are filled out correctly change aria-disabled="false", remove the dimming css, and allow the submit button to trigger the submit javascript action(s).