Accessibility Guidelines for saving changes to boolean controls in a web app
We currently have some settings pages in a web app where there is a list of controls with checkboxes, so you can enable/disable certain features. We also have a save option below these that is disabled until a change is made to the previous checkboxes.
We are trying to conform this form to be more accessible and the current approach is to simply not disable the save option, but throw an error if no change has been made and a success message on a successful change.
This doesn't seem like it makes the form more usable but only helps to get around the accessibility rule that a submit button shouldn't be disabled. However, from an interaction perspective, the affordance of the disabled look of a button lets a user know that their work isn't complete.
There's 3 possible solutions I've come up with for this scenario:
- Maintain a READ view of these controls where no action can be taken unless clicking EDIT to change the controls. in EDIT mode, the checkbox options are available as well as SAVE & CANCEL and **SAVE* would be disabled until a change was made (not sure if this passes accessibility, but at least makes the idea that you are "editing these fields and must save it" more deliberate).
- Style the button like a disabled button but use HTML to treat it like a regular button. If clicking the button, we can display a warning that states "You did not make any changes. Please change some controls in order to save".
- Change the checkboxes to be a switch-style component that simply autosaves, which takes the "Save" button out of the equation.
If any accessibility inclined people have thoughts on which of these options (or some alternate that I didn't think about) would improve the usability of this scenario while making it accessible, please let me know.