ARIA Example: link role

This page requires updates as described in issue 228.

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


<div id="ex1">
  <span tabindex="0"
      role="link"
      onclick="goToLink(event, 'http://www.w3.org/')"
      onkeydown="goToLink(event, 'http://www.w3.org/')">
     W3C website
  </span>
</div>

Second Example: img element


<div id="ex2">
  <img tabindex="0"
     onclick="goToLink(event, 'http://www.w3.org/')"
     onkeydown="goToLink(event, 'http://www.w3.org/')"
     role="link"
     src="images/w3c-logo.png"
     alt="W3C Website">
</div>

Third Example: Content


<div id="ex3">
  <span aria-label="W3C website"
      tabindex="0"
      role="link"
      class="w3c1"
      onclick="goToLink(event, 'http://www.w3.org/TR/wai-aria-practices/')"
      onkeydown="goToLink(event, 'http://www.w3.org/TR/wai-aria-practices/')">
  </span>
</div>

Fourth Example: Background image


<div id="ex4">
  <span aria-label="W3C website"
      tabindex="0"
      role="link"
      class="w3c2"
      onclick="goToLink(event, 'http://www.w3.org/TR/wai-aria-practices/')"
      onkeydown="goToLink(event, 'http://www.w3.org/TR/wai-aria-practices/')">
  </span>
</div>