EA-R13

Empty Link

This rule is an error and tests the following accessibility guidelines:

WCAG 1.1.1 Meaningful link text (Level A)

This is an error that should be corrected manually.

Description

This rule checks that each link has a non-empty accessible name.

Explanation

This link has no content and no target (href-attribute).

Applicability

This rule applies to any HTML element that is an inheriting semantic link included in the accessibility tree.

Expectation

Each target element has an accessible name that is not empty ("").

Assumptions

The rule assumes that all links are user interface components as defined by WCAG 2. When the link role is used on elements that do not behave as links, failing this rule might not mean that the success criteria are failed.

Accessibility Support

There are assistive technologies that do not support using the title attribute for an accessible name, or in which this feature can be disabled.
For area elements that have an href attribute, but are not nested inside a map element, there are differences between browsers and assistive technology on if the area is included in the accessibility tree.
Implementation of Presentational Roles Conflict Resolution varies from one browser or assistive technology to another. Depending on this, some semantic link elements can fail this rule with some technology but users of other technologies would not experience any accessibility issue.
Accessibility support for some elements inheriting the semantic role of link (e.g. elements with doc-* attributes) may vary depending on the assistive technology in use.

Background

Related Rules

Link in context is descriptive

Bibliography

Tip

Remove empty links.

Examples

Passed

Example 1 - Passed

This a element has an accessible name from its content.

Open in new Tab

<a href="https://www.w3.org/WAI"> Web Accessibility Initiative (WAI) </a>

Example 2 - Passed

This div element has an explicit semantic role of link and an accessible name from its content.

Open in new Tab

<div role="link" onclick="openLink(event)" onkeyup="openLink(event)" tabindex="0">
	Web Accessibility Initiative (WAI)
</div>
<script>
	function openLink(event) {
		if (event.type === 'click' || ['Enter', ' '].includes(event.key)) {
			window.location.href = 'https://www.w3.org/WAI/'
		}
	}
</script>

Example 3 - Passed

This button element has an explicit semantic role of link and an accessible name from its content.

Open in new Tab

<button role="link" onclick="window.location.href='https://www.w3.org/WAI/'">Click me for WAI!</button>

Example 4 - Passed

This a element has an accessible name via aria-label

Open in new Tab

<a href="https://www.w3.org/WAI"
	><img src="/test-assets/shared/w3c-logo.png" aria-label="Web Accessibility Initiative"
/></a>

Example 5 - Passed

This a element has an accessible name via title.

Open in new Tab

<a href="https://www.w3.org/WAI" title="Web Accessibility Initiative"
	><img src="/test-assets/shared/w3c-logo.png" alt=""
/></a>

Failed

Example 1 - Failed

This a element has an empty accessible name.

Open in new Tab

<a href="http://www.w3.org/WAI"></a>

Example 2 - Failed

This a element with an image has an empty accessible name. The image is decorative and is marked as such with an empty alt attribute value.

Open in new Tab

<a href="https://www.w3.org/WAI"><img src="/test-assets/shared/w3c-logo.png" alt=""/></a>

Example 3 - Failed

This a element with an image has an empty accessible name. The image is decorative because it has a role attribute value of presentation.

Open in new Tab

<a href="http://www.w3.org/WAI"><img src="/test-assets/shared/w3c-logo.png" role="presentation"/></a>

Example 4 - Failed

This a element with an image has an empty accessible name. The image is decorative because it has a role attribute value of none.

Open in new Tab

<a href="http://www.w3.org/WAI"><img src="/test-assets/shared/w3c-logo.png" role="none"/></a>

Example 5 - Failed

This a element with an img with an empty title has an empty accessible name.

Open in new Tab

<a href="https://www.w3.org/WAI"><img src="/test-assets/shared/w3c-logo.png" title=""/></a>

Inapplicable

Example 1 - Inapplicable

This a element does not have a semantic role of link because it has been changed to button.

Open in new Tab

<a href="https://www.w3.org/WAI" role="button">
	Web Accessibility Initiative (WAI)
</a>

Example 2 - Inapplicable

This a element is not included in the accessibility tree due to display: none.

Open in new Tab

<a href="https://www.w3.org/WAI" style="display: none;"><img src="/test-assets/shared/w3c-logo.png"/></a>

Example 3 - Inapplicable

This a element is not included in the accessibility tree due to visibility: hidden.

Open in new Tab

<a href="https://www.w3.org/WAI" style="visibility: hidden;">Some text</a>

Eye-Able Audit -sääntö 13

Empty Link

Description

Explanation

Applicability

Expectation

Assumptions

Accessibility Support

Background

Related Rules

Bibliography

Tip

Examples

Passed

Example 1 - Passed

Example 2 - Passed

Example 3 - Passed

Example 4 - Passed

Example 5 - Passed

Failed

Example 1 - Failed

Example 2 - Failed

Example 3 - Failed

Example 4 - Failed

Example 5 - Failed

Inapplicable

Example 1 - Inapplicable

Example 2 - Inapplicable

Example 3 - Inapplicable

Acknowledgments

Digitaalinen saavutettavuutesi alkaa tästä.

Tietoa Eye-Able®:sta

Tutustu

Pikalinkit

Hyödyllistä tietoa

Ota yhteyttä