ARIA Example: link role

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>
  <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>
  <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>
  <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>
  <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>