Inline Link
Use the inline link component when your link is in a paragraph or sentence. Link should navigate you to a new page or to further information.
On this page
Use Cases
The user should be able to:
- Navigate to a different page
- Jump to an element on the same page
- Link to emails or phone numbers
- Navigate to a different site
- Focus on a link
Interaction and Style
Link vs Buttons
A link takes you somewhere, a button performs an action. To make sure you’re accessible remember to use the semantically correct component. To find out more about the difference read our blog post on links vs buttons.
- Use Links for navigation
- Use buttons for actions
- Use buttons to submit forms
- Use buttons to open and close menus, modals, or expandable panels
- Style links as buttons
- Style buttons as links
- Use links for actions
Relevant WCAG Requirements
Use of Color
Color is not used as the only visual means of conveying information, indicating an action, prompting a response, or distinguishing a visual element.
WCAG 2.1 Understanding 1.4.1Contrast (Minimum)
Text and images of text must have a contrast ratio of at least 4.5:1...
WCAG 2.1 Understanding 1.4.3Link Purpose (In Context)
The purpose of each link can be determined from the link text alone or from the link text together with its programmatically determined link context, except where the purpose of the link would be ambiguous to users in general.
WCAG 2.1 Understanding 2.4.4Name, 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.
WCAG 2.1 Understanding 4.1.2Concurrent Input Mechanisms
Web content does not restrict use of input modalities available on a platform except where the restriction is essential, required to ensure the security of the content, or required to respect user settings.
WCAG 2.1 Understanding 2.5.6Label in Name
For user interface components with labels that include text or images of text, the name contains the text that is presented visually.
WCAG 2.1 Understanding 2.5.3Link Purpose (Link Only)
A mechanism is available to allow the purpose of each link to be identified from link text alone, except where the purpose of the link would be ambiguous to users in general.
WCAG 2.1 Understanding 2.4.9Focus Order
If a Web page can be navigated sequentially and the navigation sequences affect meaning or operation, focusable components receive focus in an order that preserves meaning and operability.
WCAG 2.1 Understanding 2.4.3Keyboard
Ensure all functionality of the content is operable through a keyboard interface. This allows users who can't use a mouse or touchscreen to navigate and use your content.
WCAG 2.1 Understanding 2.1.1
Keyboard Navigation
| Key | Action |
|---|---|
| Tab | Focuses on the inline link. |
| Enter | Activates the link. |
Questions?
Connect with the DLS Team on Slack or by email.
Resources
Check out additional resources.