Creating links using role=link

Authoring Practice Design Patten for 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
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.
Content
  • 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.
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

HTML Code

HTML source code is generated by scripting using ID references.

First Example: span element with text content

Second Example: img element

Third Example: Content

Fourth Example: Background image