Problem: Disabled fields and buttons aren’t accessible or discoverable
Problem: Disabled fields and buttons aren’t accessible or discoverable.
Here a 4 ways to avoid using "disabled".
Scenario 1: The form is loading, and the fields can't be interacted with until loading is complete.
Solution: Don't disable fields. Instead, hide the form and show a loading indicator until the form is ready.
Scenario 2: We want to keep the user from submitting a form until all fields are properly filled out.
Solution: Keep the submit button enabled. Display a helpful validation message when the submit button is clicked that explains how to fix the validation issue.
Scenario 3: A form field can't be used until a previous field is complete.
Solution: Hide the form field until the previous form field is completed. Animate the field in after the previous field is completed.
Scenario 4: The user doesn't have rights to click this button, or the feature is turned off.
Solution: Hide the button. Or, show it and keep it enabled. When the user clicks it, provide a helpful message that explains how the user can enable the feature.
These solutions are accessible and discoverable.
There’s a long list of wonderful blog posts that explain why disabled is a problem.
Here are two examples.
https://www.smashingmagazine.com/2021/08/frustrating-design-patterns-disabled-buttons/
https://axesslab.com/disabled-buttons-suck/