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. W3C Website
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

HTML Source Code

Link 1

Link 2

Link 3