Link Examples

Important Note About Use of This Example

Note: This is an illustrative example of one way of using ARIA that conforms with the ARIA specification.

There may be support gaps in some browser and assistive technology combinations, especially for mobile/touch devices. Testing code based on this example with assistive technologies is essential before considering use in production systems.
The ARIA and Assistive Technologies Project is developing measurements of assistive technology support for APG examples.
Robust accessibility can be further optimized by choosing implementation patterns that maximize use of semantic HTML and heeding the warning that No ARIA is better than Bad ARIA.

The examples below demonstrate three variations of the design pattern for link. The link pattern is used when it is necessary for elements other than the HTML a element to have link behaviors.

Note: Use the HTML a element to create links whenever possible. Browsers provide valuable functionality for native HTML links, e.g., open the target in a new window and copy the target URL to the system clipboard.

Examples

Number	Description	Link
1	`span` element with text content.	W3C website
2	`img` element with `alt` attribute.
3	CSS `:before` content property on a `span` element.

Keyboard Support

Key	Function
`enter`	Activates the link.

Role, Property, State, and Tabindex Attributes

Role	Attribute	Element	Usage
`link`		`span` `img`	Examples 1 and 3: Identifies the `span` element as a `link`. Example 2: Identifies the `img` element as a `link`.
	`tabindex="0"`	`span`, `img`	Includes the link element in the page tab sequence.
	`alt`	`img`	Example 2: Defines the accessible name of the link.
	`aria-label`	`span`	Example 3: Defines the accessible name of the link.

Javascript and CSS Source Code

CSS: link.css
Javascript: link.js

HTML Source Code

Link 1

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

Link 2

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

Link 3

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