Link
A hyperlink pattern for navigating to other pages or resources
Related WCAG criteria — click to view details
Code example
Common baseline
Applies to all design systemsUse native <a> or role="link"
Links must use a native <a href> element or have role="link" with keyboard support.
Descriptive accessible name
The link's purpose must be clear from its text or aria-label, without needing surrounding context.
Activate with Enter key
Links must be activatable using the Enter key.
Valid href attribute
Provide a valid href; do not use javascript:void(0) or "#" as the destination.
Warn users about new tab
Notify users when a link opens in a new tab, either in the text or via aria-label (e.g., "opens in new tab").
Visible focus indicator
Display a visible focus indicator when the link receives keyboard focus.
Visually distinct from surrounding text
Links should be visually distinguishable from surrounding text, not by color alone.
Do not use empty href or javascript:void(0)
These produce non-functional links; use a <button> for actions, or a real URL for navigation.
Do not omit alt text on image links
An image inside a link must have descriptive alt text; an empty alt="" will leave the link without an accessible name.
Additional checks
Use MUI Link component
Use MUI Link instead of a plain <a> tag to ensure consistent styles and accessibility.
Code sample
Implementation notes
- –MUI Link can integrate with routers like Next.js Link via the component prop.
- –Verify contrast ratio when changing the color prop.