Link

Use Links to navigate between pages, locations within the same page, and more.

Examples

Web Component

Accessibility

Keyboard Navigation

Key	Function
`Tab`	Moves focus to the next focusable element
`Shift + Tab`	Moves focus to the previous focusable element
`Enter`	Activates the link

For comprehensive details on keyboard support for buttons, refer to our Keyboard Control Guide.

Visit WebAIM for keyboard techniques.

Always start with the a tag for links. This tag is inherently designed to create hyperlinks, allowing users to navigate from one page or section to another.
Ensure every link has a valid href attribute. This attribute should contain the URL or anchor link the user will navigate to when the link is activated.
When using target="_blank" to open links in a new tab, add rel="noopener noreferrer" for security reasons and to protect user privacy.
Use ARIA roles and properties correctly to ensure assistive technologies can accurately convey the link's purpose. Avoid redundant roles like role="link" on anchor elements.
Avoid generic text like "click here" or "read more." Instead, use meaningful descriptions that convey the purpose of the link without needing surrounding content for context.
For links with generic text, use aria-describedby or aria-labelledby to associate the link with additional contextual text, providing more clarity on the link's purpose.

Clear Link Text: Design with descriptive text for links. Avoid generic phrases like "click here," ensuring users understand the link's destination.
Visual Distinction: Ensure links are visually distinct from regular text through color, underlining, or other styling cues to indicate interactiveness.
Contrast Ratios: Maintain high contrast ratios between link text and its background to ensure readability for users with visual impairments.
Indicate Link Behavior: Visually indicate if a link will open in a new window or tab, using icons or text. This informs users of the expected behavior.
Consistent Styling: Apply consistent styles for links across the application or website to avoid confusion about what is clickable.

Find live examples in the A11y style guide.

Roles and attributes

Below are some key considerations to ensure that our components are fully accessible in various scenarios within your interfaces. These points outline the necessary roles and attributes to keep in mind.

Role	Attribute	Element	Usage
`link`	-	`span`,`img`	Identifies the `span`/`img` element as a link.
-	`tabIndex="0"`	`span`,`img`	Includes the link element in the page Tab sequence.
-	`alt`	`img`	Defines the accessible name of the link.
-	`aria-label`	`span`	Defines the accessible name of the link.

Resources

W3 Link Example: Contains comprehensive details regarding the accessibility behavior of the link.
A11y Style Guide: Gives core recommendations for accessible links.
Mozilla Resources for Developers: Find examples of accessible links.

Other recommendations

Explore additional accessibility tips in the general Accessibility Guide.

WCAG 2.2 Guidelines

Non-text Content: All non-text content that is presented to the user has a text alternative that serves the equivalent purpose. (Level A)
Info and Relationships: Information, structure, and relationships conveyed through presentation can be programmatically determined or are available in text. (Level A)
Headings and Labels: Headings and labels describe topic or purpose. (Level AA)
Labels or Instructions: Labels or instructions are provided when content requires user input. (Level A)
Name, Role, Value: For all user interface components (including but not limited to: form elements, links and components generated by scripts), the name and role can be programmatically determined; states, properties, and values that can be set by the user can be programmatically set; and notification of changes to these items is available to user agents, including assistive technologies. (Level A)