Link
A Link is a clickable element that navigates users to another webpage, document, or section within the same page.
Anatomy
- Text label
- Open in new / external icon
Options
With open in new Icon
When denoting that a link will open in a new tab, or when the link opens an external site, use the "open in new" icon, regardless of which appearance the link uses.
Accessibility
Annotate generic links
It is generally preferable the link does not use generic labels. If it does, an annotation for the link should be made in handoffs, either to a heading if one is available or as a custom label if there is not one.
Annotate a generic link using a headline
When a link is generic and a headline (or table column) is available, associate it with the heading. In development, the link is given an aria-labelledby. Refer to W3C's guidelines on how to implement this.
Annotate a generic link using a custom label
When a link is generic and has no label available, annotate a custom label for the link for screenreaders. In development, the link is given an aria-label. Refer to W3C's guidelines on how to implement this.