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
HTML Source Code
Link 1
Link 2
Link 3