Links & Buttons

Must haves

1. Use links for navigating to a new page.
2. Use buttons for taking an action on the current page.
3. Use semantic html, i.e., <button> or <a href="...">. You get accessibility features for free with these, including keyboard access and the correct role being communicated to assistive technology.
   1. If you need to go custom, make it keyboard accessible by adding tabindex="0" and apply the correct ARIA role, i.e., role="link" or role="button". Ensure buttons respond to both Enter and Spacebar keys.
4. Ensure each link and button has text that is unique on the page (ex: “Read more” occurring 10 times on the page is not unique.)
5. Ensure when you tab to links and buttons, there is a clear visible focus indicator. Leave the default outline state of all browsers intact, and avoid adjusting the CSS style for focus state.
6. Ideally, your design system includes different visual styles for buttons that require more or less prominence, for example, in the example above for the Timeout Modal, the primary button is displayed with a solid teal style, while the secondary button is displayed with white button and teal outline. This helps the user’s eyes discern between the two interaction options.

Learn more about accessible links [Google Doc]

Visual example

Default	Hover / Focus	Disabled

Do and Don't