Description
This technique demonstrates how to use the link role and describes the effect it has on browsers and assistive technology.
The link role is used to identify an element that creates a hyperlink to a resource that is in the application or external. When this role is added to an element, tab can be used to change focus to the link, and space or enter used to execute the link.
<a> elements rather than the link role, as native elements are more widely supported by older user agents and assistive technology. Native <a> elements also support keyboard and focus requirements by default, without need for additional customization.The tabindex attribute may optionally be used with this role to directly specify the position of the element in the tab order.
Possible effects on user agents and assistive technology
When the link role is added to an element, or such an element becomes visible, the user agent should do the following:
- Expose the element as having a link role in the operating system's accessibility API.
- Fire an accessible link event using the operating system's accessibility API if it supports it.
Assistive technology products should listen for such an event and notify the user accordingly:
- Screen readers should announce the text of the link or its label when it is focused, along with the fact that it is a link. ARIA links should be included in the screen reader's “List Links” function just like ordinary links, and actions in this dialogue list, such as “Activate Link” or “Move to Link”, should perform the same as they do with ordinary links.
- Screen magnifiers may enlarge links.
Note: Opinons may differ on how assistive technology should handle this technique. The information provided above is one of those opinions and therefore not normative.
Examples
Example 1: Adding the role in the HTML code
The snippet below shows how the link role is added directly into the html source code.
<div role="link">A link</div>
Example 2: Accessible link build from an application using span
<script type="text/javascript">
sap = {ui:{keycodes:{SPACE:32, ENTER:13 }}};
//handles clicks and keydowns on the link
function navigateLink(evt) {
if (evt.type=="click" ||
evt.keyCode == sap.ui.keycodes.SPACE ||
evt.keyCode == sap.ui.keycodes.ENTER) {
var ref = evt.target != null ? evt.target : evt.srcElement;
if (ref) window.open(ref.getAttribute("href"),"_blank");
}
}
</script>
<body role="application">
<h3>Simple Link build with a span</h3>
<span href="https://www.w3c.org" onkeydown="navigateLink(event)" onclick="navigateLink(event)" tabindex="0" id="link1" role="link" class="link">
Activate this link using the space bar or enter key
</span>
</body>
Working Examples:
- https://codetalks.org/source/widgets/link/link.html
- https://codetalks.org/source/widgets/link/link.sample.html
Notes
If pressing the link triggers an action but does not change browser focus or navigate to a new page, you might wish to consider using the button role instead of the link role.
ARIA attributes used
Related ARIA techniques
- button role
Compatibility
TBD: Add support information for common UA and AT product combinations
Additional resources
-
ARIA Best Practices - Link Role: https://www.w3.org/TR/wai-aria-practices/#link