Include a11y guidance for disable buttons

[BethFox]

on this page: /service-pattern-library/buttons.html

For disabled buttons we already discourage them, but we should give guidance if people do use them to ensure they're coded correctly.

Suggested additional text: If you are including a disabled button, be sure to code it correctly so that visually impaired users will be able to perceive that there is a button but it's not active. You can do this by including the aria-disabled="true"

[connorscarolyns]

@BethFox how does this sound... Disabled buttons have poor contrast and can confuse some users, so avoid them if possible.

When possible use an active button and, if clicked, display an error explaining why clicking the button won't work. If users are often triggering this error there may be an issue with the interface, consider completing user research to determine the exact reason for the problem.

Only use disabled-buttons if research shows it makes the user interface easier to understand.

If you are including a disabled button, be sure to code it correctly so that visually impaired users will be able to perceive that there is a button but it's not active. You can do this by including the aria-disabled="true"

[connorscarolyns]

completed