Link
How it works
The link Carbon component is primarily a native HTML hyperlink navigational
element. The Enter key activates the link and causes the user agent to move
focus to the link destination. When you use the disabled link component the ARIA
state is set to aria-disabled="true", which changes the appearance and the
tabindex="-1" which removes the link for the tab order. When the link becomes
active the ARIA state changes to aria-disabled="false" and the link is present
in the tab order.
Accessibility considerations
This component has been validated to meet the WCAG 2.0 AA and Section 508 accessibility guidelines, however changes made by the content owner can affect accessibility compliance. Be sure to review and follow the guidance in this section when updating or adding new content to this component.
- Link text is the visible label for the native HTML link and is used to provide the purpose of the link which is clear and easy to understand for all users.
- The alt attribute for the img element is used to describe the purpose of a graphical link with an image inside the link.
- The title attribute can be used to supplement the link text with any additional useful description.
Resources
Helpful resources for creating customized accessible implementations
- W3C WAI-ARIA Authoring Practices Link Design Pattern covers the usage of ARIA names, state and roles, as well as the expected keyboard interactions.
- IBM Accessibility Checklist - Checkpoint 2.4.4 Link Purpose (In Context) (WCAG Success Criteria 2.4.4)
Accessibility testing
Accessibility issues are tracked in the Carbon Component GitHub repository
Automated test
Automated test environment
Results
- macOS Mojave version 10.14.6 with VoiceOver
- Chrome version 77.0.3865.90
- Dynamic Assessment Plugin version 1.8.0.0 - IBM Accessibility WCAG 2.1 Sept. 2019 Ruleset
- Carbon React version 7.7.1
- Chrome version 77.0.3865.90
- Dynamic Assessment Plugin version 1.8.0.0 - IBM Accessibility WCAG 2.1 Sept. 2019 Ruleset
- Carbon React version 7.7.1
DAP test
- No violations
- No violations
macOS screen reader tests
Environment
Results
- macOS Mojave version 10.14.6 with VoiceOver
- Chrome version 77.0.3865.90
- Carbon React version 7.7.1
- Chrome version 77.0.3865.90
- Carbon React version 7.7.1
VoiceOver(VO) test:
- Tab to the link. VO announces, that you are on a link, and the link text.
- Press Control-Option-Space (or Enter) to navigate to the link destination.
- Note: Disabled link is not in the tab order as expected.
- macOS Mojave version 10.14.6 with VoiceOver
- Safari version 13.0.2
- Carbon React version 7.7.1
- Safari version 13.0.2
- Carbon React version 7.7.1
VoiceOver(VO) test:
- Press Control-Option-Right Arrow to read all content.
- Press Control-Option-Space to navigate to the link destination.
- Note: The link is not in the tab order and the Enter key does not navigate to the link destination.
Windows screen reader tests
Environment
Results
- Microsoft Windows 10
- Firefox version 67
- JAWS 19.1810.64
- Carbon React version 7.7.1
- Firefox version 67
- JAWS 19.1810.64
- Carbon React version 7.7.1
JAWS test:
- Navigate to an active link using the Tab key or Shift-Tab keys and JAWS announces, "Link example link".
- Navigate to an active link using the Arrow keys. JAWS announces, "Link link example".
- It is not possible to Tab to the disabled link, but using the Arrow keys JAWS announces, "Unavailable disabled link".
- Microsoft Windows 10
- Chrome version 71.0.3578.98 (Official Build) (64-bit)
- JAWS version 19.1810.64
- Carbon React version 7.7.1
- Chrome version 71.0.3578.98 (Official Build) (64-bit)
- JAWS version 19.1810.64
- Carbon React version 7.7.1
JAWS test:
- Navigate to an active link using the Tab key or Shift-Tab keys and JAWS announces, "Link example link".
- Navigate to an active link using the Arrow keys. JAWS announces, "Link link example".
- It is not possible to Tab to the disabled link, but using the Arrow keys JAWS announces, "Unavailable disabled link".
- Microsoft Windows 10
- Chrome version 71.0.3578.98 (Official Build) (64-bit)
- NVDA version 2018.4.1
- Carbon React version 7.7.1
- Chrome version 71.0.3578.98 (Official Build) (64-bit)
- NVDA version 2018.4.1
- Carbon React version 7.7.1
NVDA test:
- Navigate to an active link using the Tab key or Shift-Tab keys and NVDA announces, "Link example link".
- Navigate to an active link using the Arrow keys. NVDA announces, "Link link example".
- It is not possible to Tab to the disabled link, but using the Arrow keys JAWS announces, "Unavailable disabled link".
Android screen reader tests
Environment
Results
- Android version 9 with Talkback
- Chrome version 71.0.3578.98 (Official Build) (64-bit)
- Carbon React version 7.7.1
- Chrome version 71.0.3578.98 (Official Build) (64-bit)
- Carbon React version 7.7.1
Talkback test:
- Navigate to an active link by swiping left or right, or press the Alt-Leftor Alt-Right keys and Talkback announces, "Link example link".
- Navigate to the disabled link. Talkback announces, "Disabled link link disabled".
iOS screen reader tests
Environment
Results
- iOS version 13.1.3 with VoiceOver
- Safari version 13.1.3
- Carbon React version 7.7.1
- Safari version 13.1.3
- Carbon React version 7.7.1
VoiceOver test:
- Navigate to an active link by swiping left or right, or press the Left-Arrow or Right-Arrow keys and VO announces, "Link example link".
- Navigate to the disabled link. VO announces, "Disabled link dimmed link".