Creating links using role=link

Note: When using HTML use the <a> element. It is recommended that authors not re-purpose other elements to create links.

Example Links

Technique Link Accessibility Features Source Code
span element with text content W3C website
  • span element with role="link".
  • span element has onclick event to handle mouse clicks.
  • span element has onkeydown event to handle keyboard support.
  • span element has tabindex="0" to become part of tab order of the page.
  • Accessible name (e.g. what a screen reader will say) from child text content of span element.
img element W3C Website
  • img element with alt attribute.
  • img element has onclick event to handle mouse clicks.
  • img element has onkeydown event to handle keyboard support.
  • img element has tabindex="0" to become part of tab order of the page.
  • Accessible name from alt attribute.
Background Image
  • span element with background image and with role="link".
  • span element has onclick event to handle mouse clicks.
  • span element has onkeydown event to handle keyboard support.
  • span element has tabindex="0" to become part of tab order of the page.
  • Accessible name from aria-label attribute.

Keyboard Support

Key Function
Enter/Return Activate link

ARIA Roles, Properties and States

Role Property/State Component Usage
link span Identify element with the link behavior
aria-label span Define accessible name for link.

Source Code