diff --git a/third_party/aria-practices/src/content/patterns/link/examples/link.html b/third_party/aria-practices/src/content/patterns/link/examples/link.html index 1c1754389b6fa..d243cdac4f3c7 100644 --- a/third_party/aria-practices/src/content/patterns/link/examples/link.html +++ b/third_party/aria-practices/src/content/patterns/link/examples/link.html @@ -2,47 +2,13 @@ - Link Examples - - - - - - - - - -
-

Link Examples

- -
-

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

-
- -
-

Examples

- @@ -81,140 +47,5 @@
- -
- -
-

Keyboard Support

- - - - - - - - - - - - - -
KeyFunction
enterActivates the link.
-
- -
-

Role, Property, State, and Tabindex Attributes

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
RoleAttributeElementUsage
linkspan
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.
altimgExample 2: Defines the accessible name of the link.
aria-labelspanExample 3: Defines the accessible name of the link.
-
- -
-

Assistive Technology Support

-

Learn how to interpret and use assistive technology support data

-

Example 1: Link on a span Element with Text Content

- -

Example 2: Link on an img Element with alt Attribute

- -

Example 3: Link on a span Element with CSS :before Content Property

- -
- -
-

JavaScript and CSS Source Code

- -
- -
-

HTML Source Code

-

Link 1

-

To copy the following HTML code, please open it in CodePen.

- -
- -

Link 2

-

To copy the following HTML code, please open it in CodePen.

- -
- -

Link 3

-

To copy the following HTML code, please open it in CodePen.

- -
- - -
- -