Link

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.

Label). | Must | EN 301 549 9.2.5.3, 11.2.5.3 | | @!460 | Label | The 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.

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.

tooltip with a text label. | Should | WCAG 2.1: 3.3.5 (AAA); DIN EN ISO 9241-143: 9.6.11 | | @!463 | Label | If the link refers to a destination in another program or document format, reference should be made to it on the link. | Should | WCAG 2.1: 3.2.5 (AAA) | | @!464 | Web: Consistency | If 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). | Must | EN 301 549: 9.3.2.3 | | @!465 | Desktop: Consistency | If 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). | Should | WCAG 2.1: 3.2.3 (AA) | | @!466 | Position | If 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. |Should | WCAG 2.1: 2.4.8 (AAA) | | @!467 | Focus visibility | If the link receives the keyboard focus, the focus indicator must be visible (see

Focus indicator). | Must | EN 301 549: 9.2.4.7, 11.2.4.7 |

Practical tip: efficient keyboard navigation).

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

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.

Use of the pointing device). | Should | WCAG 2.2: 2.5.8 (AA) |

Accessibility API). | Must | EN 301 549: 9.4.1.2, 11.4.1.2, 11.5.2.5 | | @!476 | Status | The 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.

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

Focus indicator). | Must | EN 301 549: 11.5.2.5, 11.5.2.13 |

• 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

Date:

15.01.2024

License:

CC-BY-SA 4.0

Version:

1.0

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