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 LabeltooltiplabelgroupdescriptiontooltipConsistencyFocus indicator
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 navigationUse of the pointing device
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 APIElement status
  • 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
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!