Accessibility

Accessible button requirements

Keep these considerations in mind if you are modifying the design system or creating a custom component.

General guidelines

Ensure that the button is large enough to be easily clicked or tapped, with enough space around it to avoid accidental clicks. It's commonly recommended that you should use a minimum touch target size of 48px x 48px to ensure that buttons are easily clickable on both desktop and mobile devices.

WCAG guidelines

1.4.3 Contrast (Minimum)

Ensure that there is sufficient contrast between the button background and text or icon on the button, to make it easy to read for users with low vision or colour blindness (W3C, 2018).

1.4.1 Use of Color

Buttons should have an underline on hover so that colour alone is not the only visual means of conveying information, indicating an action, prompting a response, or distinguishing a visual element (W3C, 2018).

2.1 Keyboard Accessible

Ensure that global alerts are operable by providing keyboard accessibility. Users should be able to navigate and interact with alerts using only a keyboard, without requiring a mouse or other pointing device. This includes ensuring that all interactive elements within the alert are keyboard accessible (W3C, 2018).

2.4.7 Focus Visible

This guideline requires that all interactive elements, including buttons, have a visible focus indicator that is easy to see and identify. This allows users who navigate using a keyboard or other assistive technology to know where they are on the page (W3C, 2018).

3.2.4 Consistent Identification

The intent of this Success Criterion is to ensure consistent identification of functional components that appear repeatedly within a set of Web pages. For example, buttons that perform the same function should look the same throughout the website or application (W3C, 2018).

4.1.2 Name, Role, Value

Use semantic HTML markup for buttons, including the appropriate <button> element and the "type" attribute. Use descriptive names or labels for buttons, so that assistive technology can identify the button and its function (W3C, 2018).

4.1.3 Status Messages

Use visual and/or auditory feedback to provide status messages to users, such as when a button is clicked or an action is taken (W3C, 2018).