Do not mix the usage of buttons and links
Follow the guidance above regarding when to use each. Remember buttons are for triggering actions, not navigating. Misuse causes confusion for keyboard and screen reader users, who may hear them announced by the wrong role.
Make sure button labels are unique and descriptive
Labels like “Click Here” and “Read More” don’t provide context. In addition, some screen reader users also navigate through a list of all the buttons on a page or screen. Therefore, all button labels should provide an indication of what will happen if activated. For examples of acceptable labels, see the content standards section on this page.
WCAG 2.1: 1.3.1 Info and Relationships
Icon-only buttons should be used carefully and only after checking for accessibility
The meaning of the icon must be visually self-evident (easily and universally understood). In addition, a programmatically associated semantic label (such as an aria-label attribute) should be added so it can be read by screen readers. If you’re in any doubt that an icon-only button will be understood, use accompanying text in your button label.
WCAG 2.1: 1.3.1 Info and Relationships
All buttons except tertiary should have a contrast ratio of 3:1 or greater against the background, regardless of breakpoint or orientation (except if inactive)
Providing good contrast ratio on buttons ensures that anyone with low vision can see them and perceive their function. If the button variant doesn’t achieve adequate contrast with the background when viewed at a specific breakpoint, and/or in a particular orientation, either change the background or consider using a different button variant. The tertiary button is an exception and should have a 4.5:1 contrast with its background at all times.
WCAG 2.1: 1.4.11 Non-text Contrast
Tertiary buttons require a 4.5:1 contrast ratio against the background
Greater contrast is required because the text is the only part of the button that is visible. These buttons are therefore considered similar to text and will require a higher contrast ratio.
WCAG 2.1: 1.4.3 Contrast (Minimum), 1.4.11 Non-text Contrast
When possible, use medium or large variant buttons, rather than small
Small buttons (24-pixel height) meet the minimum touch target requirements to ensure adequate accessibility for people with fine motor control difficulties or limited dexterity. Medium buttons (40-pixel height) are much closer to the recommended size of 44px-by-44px, and large buttons (48-pixel height) exceed it. The easier touch targets these larger sizes present for are therefore preferable.
WCAG 2.2 (Proposed): 2.5.8 Target Size (Minimum)