Skip to content

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

Back to Top