Buttons
Accessibility and semantic
Alway wrap your label into a span.mc-button__label
tag
Use aria-label="button purpose"
using only an icon without text.
<button type="button" class="mc-button mc-button--icon-only mc-button--icon-medium-m" aria-label="my button purpose"> <!-- Your icon html tag --></button>
Use the right tag for the right purpose :
<a>
for links
<button type="submit" form="form_id">
to submit a form (you
should prefer it to input type submit)
<button>
for any other actions
When designing a form, with a logic that enables or disables the submit button following the business rules, it is
recommended to use aria-disabled="true"
instead of disabled="true"
.
The main advantage is the button stays focusable, letting any person with an assistive technology to discover
the existence of the button, even when it is disabled.
It is then the responsibility of the developer to manage the submission of the form,
as aria-disabled="true"
let the possibility to the user to use the button, and therefore submit the form.
A few resources about this pattern: