Link Examples

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, 'http://www.w3.org/')"
      onkeydown="goToLink(event, 'http://www.w3.org/')">
  W3C website
</span>

Link 2

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

Link 3

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