Links vs buttons
If it goes somewhere, it’s
- When the user clicks a link, they are taken to a different location in the site.
- Either another page or even another area of the same page
- A link can look like a big shiny button but it must be coded as
If it does something, it’s a
- Buttons cause an action to occur on the same page
- Submit a form (even when submission takes you to a new page)
- Open a menu
- Launch a modal
- Expand details
- A button can look like a link, but it must be coded as a
Use semantic HTML with common sense names
This semantic HTML contains all accessibility features by default.
Name links logically
- Do not use a heading with a generic link below.
- Instead, make the heading a link or programmatically associate the link with the heading using
Making a link with no
- Do not put anything but a URI in the
- A link with no
href will not be focusable with the keyboard without
role="link" to ensure screen reader reads the role
Avoid custom elements
This custom button requires extra attributes and keyboard event listeners.
Repeating text links
Sometimes the design will call for multiple links with the same text label. In a case like this,
aria-label can be used to name each link’s purpose.
Don’t duplicate the visible text name in the aria-label
Do not repeat the inner text content of a link in the
- Do not use
- When screen readers read the href, it becomes confusing and nonsensical
Don’t use “#” in href
- If it’s unavoidable to have a disabled link present you’ll need these attributes for the screen reader.
Product Card with multiple controls
This example demonstrates an approach taken for when the card may have multiple controls within it.
- Sunset Red
- Golden Canyon
For 36 months
down + tax
Full price $1,789,
Product Card as a single link
This card is a single link and does not consist of any other nested controls. Use of
aria-describedby to control how the card is announced by screen readers.