Synonyms: Cross-reference, reference, hypertext link, hyper link

See also: Button, Menu, Image Map

Links allow navigation to a defined location (see DIN EN ISO 9241-161: 8.23).

A link has a text or graphic label (e.g. an icon). Links usually have a visual indicator to identify the link as such, this applies to text links in particular. An underline and a different color are typically used as visual indicators for text links.

Figure 29: Text in normal font and black, link in bold, underlined and colored
No.PropertyDescriptionClassificationReference
454ContrastIf the link has a text label, it must have a contrast ratio of at least 4.5:1 with respect to the background.MustEN 301 549: 9.1.4.3, 11.1.4.3
455ContrastIf the link has a graphic label, it must have a contrast ratio of at least 3:1 with respect to the background.MustEN 301 549: 9.1.4.11, 11.1.4.11
456ContrastIf the link is only identifiable as a link on the basis of its text color, the contrast ratio between the color of neighboring text contents and the text color of the link must be at least 3:1.MustEN 301 549: 9.1.4.1, 11.1.4.1
457ContrastIf the link is only identifiable as a link due to a graphic element (e.g. underline or icon), the contrast ratio between the graphic element and the background color must be at least 3:1.MustEN 301 549: 9.1.4.11, 11.1.4.11
458ContrastIf the status of the link is communicated in graphical form, the contrast ratio between the graphic element and the background color must be at least 3:1.

Note: The status also refers to the following information:

  • linked document format (e.g. PDF),
  • link destination (e.g. internal or external links),
  • link type (e.g. link to a phone number or email address),
  • position in the application (for example, link to the current page).

MustEN 301 549: 9.1.4.11, 11.1.4.11
459LabelThe visible label of the link must correspond to or be contained in the link name which is communicated to the Accessibility API (see Label).MustEN 301 549 9.2.5.3, 11.2.5.3
460LabelThe purpose of the link must be determinable from the link label or the programmatically linked link context.

Note 1: In the case of desktop applications, e.g. a tooltip, a label of a group or a description can be considered the link context as long as they are programmatically linked with the link.

Note 2: In the case of Web applications, text in the same paragraph or sentence, in the same list entry or a parent list entry, in the section header, in the same table cell, or in an associated column or row heading is considered to be a programmatically determinable link context.

MustEN 301 549: 11.2.4.4
461LabelIt should be possible to determine the purpose of the link from the link label.

Note: This is important because the programmatically determinable link context often cannot be determined, or can be determined only with difficulty, using the screen reader. This applies to the link overview in particular which the screen reader is able to display.

ShouldWCAG 2.1: 2.4.9 (AAA)
462LabelIf the link has a graphic label, the link should have a tooltip with a text label.ShouldWCAG 2.1: 3.3.5 (AAA); DIN EN ISO 9241-143: 9.6.11
463LabelIf the link refers to a destination in another program or document format, reference should be made to it on the link.ShouldWCAG 2.1: 3.2.5 (AAA)
464Web: ConsistencyIf a list of links is used for navigation, the links on each screen should be displayed in the same relative order and receive the keyboard focus (see Consistency).MustEN 301 549: 9.3.2.3
465Desktop: ConsistencyIf a list of links is used for navigation, the links on each screen should be displayed in the same relative order and receive the keyboard focus (see Consistency).ShouldWCAG 2.1: 3.2.3 (AA)
466PositionIf a list of links is used for navigation, then the link to the current page or to the area in which the current page is located should be marked.ShouldWCAG 2.1: 2.4.8 (AAA)
467Focus visibilityIf the link receives the keyboard focus, the focus indicator must be visible (see Focus indicator).MustEN 301 549: 9.2.4.7, 11.2.4.7
No.PropertyDescriptionClassificationReference
468Use of the keyboardIt must be possible to access, operate and exit the link with the keyboard (see Use of the keyboard table, below).MustEN 301 549: 9.2.1.1, 11.2.1.1, 9.2.1.2, 11.2.1.2
469Use of the keyboardWhen enabling links within pages, the linked element must be focused. It is not sufficient if the linked element is only scrolled into the visible area.MustEN 301 549: 9.2.1.1, 11.2.1.1, 9.2.4.3, 11.2.4.3
470Web: Use of the keyboardIt must be possible to skip areas of content with links that occur on several pages using the keyboard (see Practical tip: efficient keyboard navigation).

Note: This applies to the navigation links at the top of the page in particular.

MustEN 301 549: 9.2.4.1
471Use of the keyboardIf a window contains areas with several links, a mechanism should be implemented for skipping these page areas with the keyboard (see Practical tip: efficient navigation).ShouldDIN EN ISO 9241-171: 9.3.16, 9.3.17
472Use of the keyboardConsecutive links with the same link destination should be avoided.

Note: This applies, among others, to tiles, in which both the heading and a text at the end (e.g. “read more”) are frequently linked, as well as to links that have a text and graphic label.

ShouldWCAG 2.1: 2.4.9 (AAA)
473UpdatesWhen a link is focused, no change of context may occur.MustEN 301 549: 9.3.2.1, 11.3.2.1
474Click areaIf the link is not located within continuous text, the click area of the link should be at least 24 x 24 px (see Use of the pointing device).ShouldWCAG 2.2: 2.5.8 (AA)
ActionKeyClassification
Focusing of the linkTABRequired
Exiting the linkTABRequired
Enabling the linkENTERRequired
Permalink "Use of the pointing device: link"
ActionKeyClassification
Enabling the linkLeft clickRequired
No.PropertyDescriptionClassificationReference
475RoleThe role of the link must be communicated to the Accessibility API (see Accessibility API).MustEN 301 549: 9.4.1.2, 11.4.1.2, 11.5.2.5
476StatusThe status of the link must be communicated to the Accessibility API (see Element status).

Note: This also applies to information

  • about the linked document format (e.g. PDF),
  • about the link destination (e.g. internal or external links),
  • about the link type (e.g. link to a phone number or email address),
  • about the position in the application (for example, link to the current page),

provided that this information is communicated in visual form.

MustEN 301 549: 9.4.1.2, 11.4.1.2, 11.5.2.5
477NameThe link must have a concise and expressive Accessible Name.

Note: If the Accessible Name is not expressive, the programmatically perceptible link context can also be used to communicate the purpose of the link.

MustEN 301 549: 9.2.4.4, 11.2.4.4, 9.2.4.6, 11.2.4.6, 9.4.1.2, 11.4.1.2, 11.5.2.5
478NameIf the link has a description, it must be communicated as an Accessible Description.MustEN 301 549: 9.2.4.4, 11.2.4.4, 9.4.1.2, 11.4.1.2, 11.5.2.5
479OperationIt must be possible to access, operate and exit the link with assistive technology (see Accessibility API).MustEN 301 549: 9.4.1.2, 11.4.1.2, 11.5.2.12, 11.5.2.17
480UpdateUpdates concerning the Accessible Name or status of the link must be communicated to the Accessibility API (see Accessibility API).MustEN 301 549: 9.4.1.2, 11.4.1.2, 11.5.2.15
481Desktop: PositionThe size and position of the link must be communicated to the Accessibility API (see Focus indicator).MustEN 301 549: 11.5.2.5, 11.5.2.13
Permalink "Practical tip: links in Web applications"
  • JAWS: [label] link | link this page | visited link | send link email | FTP link
  • NVDA: [label] link | visits link
  • Windows Narrator: link [label] value [URL]

Note:

  • JAWS and NVDA distinguish between visited and unvisited links.
  • With JAWS, the link type of some links is perceptible (link to email and FTP addresses, page-internal links).
  • With Windows Narrator, the link type is perceptible on most links, as the URL is output as the value of the link. The output of the URL is not correct, however, which means that “http://” is output as “http skeptical smiley”.

The link should be implemented with the HTML element <a href=URL>. The href attribute is required.

Label:

  • The labeling of the link should take place using the text content.
  • In the case of graphic links, the labeling takes place using the alternative text of the graphic or aria-label. It should be noted that the link label does not describe the graphic, but the purpose of the link. If the content of the graphic is also relevant, the graphic should not be linked, but the link should be located before or after the graphic.
  • The labeling of the links should be concise. For example: In the case of a tile with a heading, graphic, teaser text, keywords, etc., it is not necessary for the entire tile to be linked, but just the heading.
  • The labeling of the links should be unambiguous and expressive. Links labeled “Click here” or “Further information” are not considered expressive. The label should either be expressive (e.g. “Further information on accessibility”), or the description should explain the purpose of the link (by referring to the relevant context of the link with aria-describedby, for example).

Status and type:

  • Links cannot be marked as disabled (disabled). Links which are not operable can be marked with the <a> element without the href attribute.
  • In the case of links that are used for page navigation, aria-current=page can be used to mark the link that refers to the current page.
  • Links that are used to show and hide areas should be marked with aria-expanded to communicate the status of the areas (shown or hidden).
  • Links that open with a pop-up should be marked with aria-haspopup.
  • Unless the link opens a new Web page in the current browser window, a visual reference should be made to the deviating link destination (e.g. the link opens a page in the new browser window, the link refers to a PDF document).
  • If the links have a graphic reference that refers to the type of link (e.g. link to an external page, link opens a page in the new browser window, link refers to a PDF document, linked email address), this information should also be perceptible with assistive technology. The type of link is generally a secondary piece of information, which means that it should not be output as part of the label, but as a description (e.g. using title or aria-describedby attribute), or at least only at the end of the label.

Further information: 4.6 Links - HTML Standard (whatwg.org) (External Link)

If the link is not implemented with the HTML element, in addition to the notes on HTML links, it is necessary to take account of the following:

  • The role is communicated with role=link.
  • Disabled links can be marked with aria-disabled.
  • The communication of the information that a link has already been visited or that it consists of a page-internal link is not possible with ARIA links.
  • The links should be visually marked (with an icon or underline, for example) so that their role is also perceptible when using Windows Contrast Adjustment.

Further information: link role - Accessible Rich Internet Applications (WAI-ARIA) 1.2 (w3.org), Link Pattern | APG | WAI | W3C

Information about this article

You are welcome to send feedback by email about our handout!