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.
Presentation
Permalink "Presentation"| No. | Property | Description | Classification | Reference |
|---|---|---|---|---|
| 454 | Contrast | If the link has a text label, it must have a contrast ratio of at least 4.5:1 with respect to the background. | Must | EN 301 549: 9.1.4.3, 11.1.4.3 |
| 455 | Contrast | If the link has a graphic label, it must have a contrast ratio of at least 3:1 with respect to the background. | Must | EN 301 549: 9.1.4.11, 11.1.4.11 |
| 456 | Contrast | If 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. | Must | EN 301 549: 9.1.4.1, 11.1.4.1 |
| 457 | Contrast | If 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. | Must | EN 301 549: 9.1.4.11, 11.1.4.11 |
| 458 | Contrast | If 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:
| Must | EN 301 549: 9.1.4.11, 11.1.4.11 |
| 459 | Label | The visible label of the link must correspond to or be contained in the link name which is communicated to the Accessibility API (see 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. | Must | EN 301 549: 11.2.4.4 |
| 461 | Label | It 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. | Should | WCAG 2.1: 2.4.9 (AAA) |
| 462 | Label | If the link has a graphic label, the link should have a 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 |
Operation
Permalink "Operation"| No. | Property | Description | Classification | Reference |
|---|---|---|---|---|
| 468 | Use of the keyboard | It must be possible to access, operate and exit the link with the keyboard (see Use of the keyboard table, below). | Must | EN 301 549: 9.2.1.1, 11.2.1.1, 9.2.1.2, 11.2.1.2 |
| 469 | Use of the keyboard | When 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. | Must | EN 301 549: 9.2.1.1, 11.2.1.1, 9.2.4.3, 11.2.4.3 |
| 470 | Web: Use of the keyboard | It 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. | Must | EN 301 549: 9.2.4.1 |
| 471 | Use of the keyboard | If 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). | Should | DIN EN ISO 9241-171: 9.3.16, 9.3.17 |
| 472 | Use of the keyboard | Consecutive 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. | Should | WCAG 2.1: 2.4.9 (AAA) |
| 473 | Updates | When a link is focused, no change of context may occur. | Must | EN 301 549: 9.3.2.1, 11.3.2.1 |
| 474 | Click area | If 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). | Should | WCAG 2.2: 2.5.8 (AA) |
Use of the keyboard: link
Permalink "Use of the keyboard: link"| Action | Key | Classification |
|---|---|---|
| Focusing of the link | TAB | Required |
| Exiting the link | TAB | Required |
| Enabling the link | ENTER | Required |
Use of the pointing device: link
Permalink "Use of the pointing device: link"| Action | Key | Classification |
|---|---|---|
| Enabling the link | Left click | Required |
Programming/interfaces
Permalink "Programming/interfaces"| No. | Property | Description | Classification | Reference |
|---|---|---|---|---|
| 475 | Role | The role of the link must be communicated to the Accessibility API (see 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
provided that this information is communicated in visual form. | Must | EN 301 549: 9.4.1.2, 11.4.1.2, 11.5.2.5 |
| 477 | Name | The 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. | Must | EN 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 |
| 478 | Name | If the link has a description, it must be communicated as an Accessible Description. | Must | EN 301 549: 9.2.4.4, 11.2.4.4, 9.4.1.2, 11.4.1.2, 11.5.2.5 |
| 479 | Operation | It must be possible to access, operate and exit the link with assistive technology (see Accessibility API). | Must | EN 301 549: 9.4.1.2, 11.4.1.2, 11.5.2.12, 11.5.2.17 |
| 480 | Update | Updates concerning the Accessible Name or status of the link must be communicated to the Accessibility API (see Accessibility API). | Must | EN 301 549: 9.4.1.2, 11.4.1.2, 11.5.2.15 |
| 481 | Desktop: Position | The size and position of the link must be communicated to the Accessibility API (see Focus indicator). | Must | EN 301 549: 11.5.2.5, 11.5.2.13 |
Practical tip: links in Web applications
Permalink "Practical tip: links in Web applications"Screen reader output
Permalink "Screen reader output"- JAWS: [label] link | visited link
- NVDA: [label] link | visited 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”.
HTML
Permalink "HTML"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 thehrefattribute. - In the case of links that are used for page navigation,
aria-current=pagecan 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-expandedto 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
titleoraria-describedbyattribute), or at least only at the end of the label.
Further information: 4.6 Links - HTML Standard (whatwg.org) (External Link)
ARIA
Permalink "ARIA"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!