Link

Success Criteria:

Description Purpose is clear
Role Identifies itself as a link
Relationships Has a valid href pointing to a uri
State n/a
Focus Is visibly focusable with tab / swipe
Action Enter key / double tap

Keyboard & Screenreader Support

Tab / swipe Focuses the link
Enter / double tap Activates the link

Native Element

You should use a native <a href=""> element rather than some <custom-element> because it will be read with the correct role, and keyboard support is built in for free.

Description

  • Inner text should describe the purpose of the link.
  • aria-label can also be used (as a last resort)

Role

  • Is natively a link

Relationships

  • href="/some-url/" is required to be focusable

State

  • Can declare it has been visited

Focus

  • Is natively focusable
  • Focus must be visible

Actions

  • tab / swipe
  • enter / double tap

Custom Element

Avoid making links from a <custom-element> because by default, it will not be read as a link, isn't focusable, and has no keyboard support.

Description

  • Inner text should describe the purpose of the link.
  • aria-label can also be used (as a last resort)

Role Requires extra work

  • role="link" is now required

Relationships

  • n/a

State

  • Cannot declare it has been visited

Focus Requires extra work

  • tabindex="0" is necessary so tab key can focus
  • Focus must be visible

Actions Requires extra work

  • tab
  • enter