Skip to content

Latest commit

 

History

History
309 lines (215 loc) · 6.59 KB

link-has-name-c487ae.md

File metadata and controls

309 lines (215 loc) · 6.59 KB
Raw
id name rule_type description accessibility_requirements input_aspects authors
c487ae
Links have an accessible name
atomic
Each link has an accessible name
wcag20:4.1.2 wcag20:2.4.4 wcag20:2.4.9
forConformance failed passed inapplicable
true
not satisfied
further testing needed
further testing needed
forConformance failed passed inapplicable
true
not satisfied
further testing needed
further testing needed
forConformance failed passed inapplicable
true
not satisfied
further testing needed
further testing needed
DOM Tree
CSS Styling
Wilco Fiers
Anne Thyme Nørregaard

Applicability

The rule applies to any HTML element with the semantic role of link that is included in the accessibility tree.

Expectation

Each target element has an accessible name that is not only whitespace.

Assumptions

  • The rule assumes that all links are user interface components as defined by WCAG 2. When the link role is used incorrectly, this assumption may not be true.

Accessibility Support

For area elements that have a href attribute, but are not nested inside a map element, there are differences between browsers and assistive technology on whether the area is considered included in the accessibility tree or not.

Background

Test Cases

Passed

Passed Example 1

<a> element with accessible name through content.

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

Passed Example 2

Element with explicit role of link with accessible name through content.

<div role="link">Web Accessibility Initiative (WAI)</div>

Passed Example 3

Button with the role of link.

<button role="link">Click me!</button>

Passed Example 4

Accessible name for link via aria-label

<a href="http://www.w3.org/WAI"><img src="#" aria-label="This is a link"/></a>

Passed Example 5

Link named via title on link.

<a href="http://www.w3.org/WAI" title="This is a link"><img src="#"/></a>

Passed Example 6

Link named via title on image.

<a href="http://www.w3.org/WAI"><img src="#" title="This is a link"/></a>

Passed Example 7

Link with both image and text.

<a href="http://www.w3.org/WAI"><img src="#" />This is my link text</a>

Passed Example 8

Accessible name for link via aria-labelledby.

<a href="http://www.w3.org/WAI"><img src="#" aria-labelledby="id1"/></a>
<div id="id1">This is my link text</div>

Passed Example 9

When link is off screen.

<html>
	<style>
		.offScreenLink {
			position: absolute;
			left: -9999px;
			top: -9999px;
		}
	</style>
	<body>
		<a class="offScreenLink" href="http://www.w3.org/WAI"
			>Web Accessibility Initiative (WAI)</a
		>
	</body>
</html>

Passed example 10

area element with href attribute has accessible name.

<img
	src="planets.gif"
	width="145"
	height="126"
	alt="Planets"
	usemap="#planetmap"
/>

<map name="planetmap">
	<area shape="rect" coords="0,0,82,126" href="sun.htm" alt="Sun" />
</map>

Passed example 11

a element where accessible name does not only consist of whitespace.

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

Failed

Failed Example 1

Image link without accessible name.

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

Failed Example 2

Image link where image is marked as decorative.

<a href="http://www.w3.org/WAI"><img src="#" alt=""/></a>

Failed Example 3

Link with icon inserted via font-awesome.

<a href="http://www.w3.org/WAI"><i class="fa fa-download"></i></a>

Failed Example 4

Link with image that has empty title.

<a href="http://www.w3.org/WAI"><img src="#" title=""/></a>

Failed Example 5

Link with image that has empty aria-labelledby.

<a href="http://www.w3.org/WAI"><img src="#" aria-labelledy="id1"/></a>
<div id="id1"></div>

Failed Example 6

aria-labelledby references a non-existing id.

<a href="http://www.w3.org/WAI"><img src="#" aria-labelledby="id1"/></a>

Failed Example 7

Non-visible link.

<a href="http://www.w3.org/WAI" style="left: -9999px; position: absolute;">
	<img src="#" />
</a>

Failed example 9

Link is completely empty, but still shows up in focus order, so it should have an accessible name.

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

Failed example 10

area element with href attribute does not have accessible name.

<img
	src="planets.gif"
	width="145"
	height="126"
	alt="Planets"
	usemap="#planetmap"
/>

<map name="planetmap">
	<area shape="rect" coords="0,0,82,126" href="sun.htm" />
</map>

Failed example 11

a element where accessible name through content only consist of whitespace.

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

Inapplicable

Inapplicable Example 1

<a> element that has had its role changed.

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

Inapplicable Example 2

Not included in the accessibility tree due to display:none.

<a href="http://www.w3.org/WAI" style="display: none;"><img src="#"/></a>

Inapplicable Example 3

Not included in the accessibility tree due to visibility: hidden.

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

Inapplicable Example 4

Not included in the accessibility tree due to aria-hidden="true".

<a aria-hidden="true" href="http://www.w3.org/WAI">
	Web Accessibility Initiative (WAI)
</a>

Inapplicable example 5

area element without href attribute does not have role of link.

<area shape="rect" coords="0,0,82,126" />