Skip to content

Link Examples

Link Examples

Read This First

The code in this example is not intended for production environments. Before using it for any purpose, read this to understand why.

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

About This Example

The examples below demonstrate three variations of the Link Pattern. 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.


Number Description Link
span element with text content. W3C website
img element with alt attribute. W3C Website
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
  • Examples 1 and 3: Identifies the span element as a link.
  • Example 2: Identifies the img element as a link.
tabindex="0" span,
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.

Assistive Technology Support

JavaScript and CSS Source Code

HTML Source Code

Link 1

Link 2

Link 3

Back to Top