Links with identical accessible names and same context serve equivalent purpose
Applicability
This rule applies to any set of two or more [HTML or SVG elements][] for which all the following are true:
the elements are [inheriting semantic][] link nodes; and
the elements are in the same [web page (HTML)][]; and
the elements are [included in the accessibility tree][included in the accessibility tree]; and
the elements have [matching][] [accessible names][accessible name] that are not empty (""); and
the elements have the same [programmatically determined link context][].
Note: The test target for this rule is the full set of link elements that share the same [matching][] [accessible name][] and [programmatically determined link context][].
Expectation
For each pair of links in each target set, one of the following is true:
both links resolve to the [same resource][]; or
both links resolve to [equivalent resources][equivalent resource]; or
there is no visual information within the [web page][] to let users know that both links resolve to [non-equivalent resources][equivalent resource].
Note: Resolving the links includes potential redirects, if the redirects happen instantly.
Assumptions
This rule assumes that, within the context of the test subject, the description provided by the [accessible name][] of a link can only accurately describe one resource (notably, homonyms alone are not used as link names). Thus, if two or more links have the same [accessible name][] but resolve to different resources, at least one of them does not accurately describe its purpose.
This rule assumes that assistive technologies are exposing all links on the page in the same way no matter which document tree they are in. If an assistive technology requires the user to "enter" an iframe or a [shadow tree][] before exposing its links, then it is possible for two links to have identical name and context but resolve to different resources without failing [Success Criterion 2.4.4 Link Purpose (In Context)][sc244] (if said links are in separate [documents][document] or [shadow trees][shadow tree]).
This rule assumes that reading the URL, such as from the status bar when the link is focused, is not considered part of the context, and therefore, it does not disambiguate links.
Accessibility Support
There are no accessibility support issues known.
Background
There is a difference between two contexts being the same and being identical. This rule specifically targets links within the same context. The same context means exactly the same set of DOM nodes. Identical (but not the same) contexts might have a different set of DOM nodes, but those DOM nodes have equivalent content - such as text content, attribute values, and so on. This difference is similar to the difference in some programming languages between pointer equivalence and deep object equivalence. Links with identical name that are in identical (but not the same) contexts also fail [2.4.4 Link Purpose (In Context)][sc244]. However, defining "identical context" unambiguously has been deemed infeasible at this time, and so has been left out of this rule.
Links that are ambiguous to users in general are covered by the exception mentioned in Success Criterion 2.4.4 Link Purpose (In Context). If the links are ambiguous to users in general, users of assistive technologies are not at a disadvantage when viewing the links, which makes it more of a general user experience concern than an accessibility issue.
Pages with links that are not [ambiguous to users in general][], but are ambiguous to some users are likely to fail [success criterion 1.3.1 Info and Relationships][sc131] if the disambiguation information is conveyed through presentation, but not semantically. Moreover, when this information is non-text content, such a page is likely to fail [success criterion 1.1.1 Non-text Content][sc111].
These two HTML a elements have the same [accessible name][] and [context][programmatically determined link context] and link to the [same resource][].
<html lang="en">
<p>
Learn more (<a href="/test-assets/links-with-identical-names-serve-equivalent-purpose-b20e66/index.html">About us</a
>) and get in touch (
<a href="/test-assets/links-with-identical-names-serve-equivalent-purpose-b20e66/index.html">About us</a>)
</p>
</html>
Passed Example 2
These two HTML a elements have the same [accessible name][] and [context][programmatically determined link context], and resolve to the [same resource][] after an instant redirect.
<html lang="en">
<div>
Learn more (<a href="/test-assets/links-with-identical-names-serve-equivalent-purpose-b20e66/index.html">About us</a
>) and get in touch (<a href="/test-assets/links-with-identical-names-serve-equivalent-purpose-b20e66/redirect.html"
>About us</a
>)
</div>
</html>
Passed Example 3
These two HTML a elements have the same [accessible name][] and [context][programmatically determined link context], and resolve to identical resources.
<html lang="en">
<p>
Learn more (<a href="/test-assets/links-with-identical-names-serve-equivalent-purpose-b20e66/index.html">About us</a
>) and get in touch (<a
href="/test-assets/links-with-identical-names-serve-equivalent-purpose-b20e66/index-copy.html"
>About us</a
>)
</p>
</html>
Passed Example 4
These two HTML a elements have the same [accessible name][] and [context][programmatically determined link context], and resolve to pages that serve the same purpose because the content section is the same.
<html lang="en">
<p>
Learn more (<a href="/test-assets/links-with-identical-names-serve-equivalent-purpose-b20e66/about/contact.html"
>Contact us</a
>) and get in touch (
<a href="/test-assets/links-with-identical-names-serve-equivalent-purpose-b20e66/careers/contact.html">Contact us</a
>)
</p>
</html>
Passed Example 5
These two HTML a elements have the same [accessible name][] and [context][programmatically determined link context], and go to pages that fulfill the same purpose in relation to the link because they contain the same relevant information.
<html lang="en">
<p>
Learn more (<a href="/test-assets/links-with-identical-names-serve-equivalent-purpose-b20e66/page1.html">Call us</a
>) and get in touch (<a href="/test-assets/links-with-identical-names-serve-equivalent-purpose-b20e66/page2.html"
>Call us</a
>)
</p>
</html>
Passed Example 6
These two HTML a elements have the same [accessible name][] and [context][programmatically determined link context], and go to pages that use different layouts but have the same purpose.
<html lang="en">
<p>
Learn more (<a href="/test-assets/links-with-identical-names-serve-equivalent-purpose-b20e66/page1.html"
>Contact us</a
>) and get in touch (<a href="/test-assets/links-with-identical-names-serve-equivalent-purpose-b20e66/page3.html"
>Contact us</a
>)
</p>
</html>
Passed Example 7
These two HTML span elements have an [explicit role][] of link, the same [accessible name][], the same [context][programmatically determined link context], and link to the [same resource][].
<html lang="en">
<p>
<span
role="link"
tabindex="0"
onclick="location='/test-assets/links-with-identical-names-serve-equivalent-purpose-b20e66/index.html'"
>
My university
</span>
<span
role="link"
tabindex="0"
onclick="location='/test-assets/links-with-identical-names-serve-equivalent-purpose-b20e66/index.html'"
>
My university
</span>
</p>
</html>
Passed Example 8
These two SVG a and HTML a elements have the same [accessible name][], same [context][programmatically determined link context] and link to the [same resource][].
These two HTML a elements have the same [accessible name][] and [context][programmatically determined link context], but resolve to different resources. However, the purpose of these links is ambiguous to users in general. Thus all readers are unsure about the destination and the person with a disability is not at any disadvantage.
<html lang="en">
<p>
We are on social media:
<a href="https://act-rules.github.io/">ACT rules</a>
<a href="https://www.w3.org/community/act-r/">ACT rules</a>
</p>
</html>
Failed
Failed Example 1
These two HTML a elements have the same [accessible name][] and are nested within the same [context][programmatically determined link context], but go to different resources.
<html lang="en">
<p>
To get in touch with us, you can either
<a href="/test-assets/links-with-identical-names-serve-equivalent-purpose-b20e66/contact-us.html?page=1"
>contact us</a
>
via chat or
<a href="/test-assets/links-with-identical-names-serve-equivalent-purpose-b20e66/contact-us.html?page=2"
>contact us</a
>
by phone.
</p>
</html>
Failed Example 2
These two HTML a elements have the same [accessible name][] and [context][programmatically determined link context], but go to different resources.
<html lang="en">
<p>W3C pages for ACT:</p>
<p><a href="https://act-rules.github.io/">ACT rules</a></p>
<p>Community group for ACT:</p>
<p><a href="https://www.w3.org/community/act-r/">ACT rules</a></p>
</html>
Failed Example 3
These two HTML a elements have the same [accessible name][] and [context][programmatically determined link context]. They are visually distinguishable thanks to the relationships conveyed through CSS, but go to different resources.
<html lang="en">
<p>
<h2>Contact us:</h2>
<a href="/test-assets/links-with-identical-names-serve-equivalent-purpose-b20e66/contact-us.html?page=1" style="display:inline-block; background: url(/test-assets/shared/chat.png) 0 / 40px no-repeat; padding: 20px 0 20px 50px;">Contact Us</a>
<a href="/test-assets/links-with-identical-names-serve-equivalent-purpose-b20e66/contact-us.html?page=2" style="display:inline-block; background: url(/test-assets/shared/phone.png) 0 / 40px no-repeat; padding: 20px 0 20px 50px; margin-left: 40px;">Contact Us</a>
</p>
</html>
Failed Example 4
These two HTML a elements have the same [accessible name][] and [context][programmatically determined link context], but go to different resources. Their purpose is disambiguated for sighted users by the alignment of the links with the images above.
These two HTML a elements have the same [accessible name][] and [context][programmatically determined link context]. They link to web pages that are similar, but have different information in their content. Their purpose is disambiguated for sighted users by the alignment of the links with the images above.
These two HTML span elements have an [explicit role][] of link, same [accessible name][] and [context][programmatically determined link context], but link to resources that offer different content. Their purpose is disambiguated for sighted users by the alignment of the links with the images above.
These two HTML a elements with the same [accessible name][] and [context][programmatically determined link context] resolve to the [same resource][] after redirect, but the redirect is not instant.
These two HTML a elements have different [accessible names][accessible name].
Note: It is a best practice for [Success Criterion 2.4.4: Link Purpose (In Context)][sc244] that identical links have identical [accessible names][accessible name]. This is however not a requirement.
These two HTML a elements have the same [accessible name][] and link to the [same resource][] but different [programmatically determined link contexts][programmatically determined link context].
<html lang="en">
<ul>
<li>
To learn more about us:
<a href="/test-assets/links-with-identical-names-serve-equivalent-purpose-b20e66/index.html">Contact us</a>
</li>
<li>
To get in touch with us:
<a href="/test-assets/links-with-identical-names-serve-equivalent-purpose-b20e66/index.html">Contact us</a>
</li>
</ul>
</html>
Inapplicable Example 4
These two span elements do not have a [semantic role][] of link.
<html lang="en">
<p>
Learn more (<span
onclick="location='/test-assets/links-with-identical-names-serve-equivalent-purpose-b20e66/page1.html'"
>Contact Us </span
>) and get in touch (<span
onclick="location='/test-assets/links-with-identical-names-serve-equivalent-purpose-b20e66/page2.html'"
>Contact Us </span
>)
</p>
</html>
Inapplicable Example 5
These two HTML a elements have the same [accessible name][] and link to the [same resource][] but different [programmatically determined link contexts][programmatically determined link context]. Even though the two contexts in this example are identical, they are not the same. That is: even though they have equivalent content, they do not consist of the same DOM elements.
<html lang="en">
<div>
You can learn more in the
<a href="/test-assets/links-with-identical-names-serve-equivalent-purpose-b20e66/index.html">Contact us</a> page.
</div>
<div>
You can learn more in the
<a href="/test-assets/links-with-identical-names-serve-equivalent-purpose-b20e66/index.html">Contact us</a> page.
</div>
</html>
Inapplicable Example 6
These two HTML a elements have the same [accessible name][] but different [programmatically determined link contexts][programmatically determined link context] because the div elements place them in different display blocks.
<div><a href="https://www.w3.org/WAI/">Read more</a> about the W3C WAI</div>
<div><a href="https://www.w3.org/International/">Read more</a> about the W3C internationalization</div>
Inapplicable Example 7
These two HTML a elements have the same [accessible name][] and [context][programmatically determined link context], but the second one is not [included in the accessibility tree][included in the accessibility tree].
<html lang="en">
<p>
We are on social media:
<a href="https://act-rules.github.io/">ACT rules</a>
<a aria-hidden="true" href="https://www.w3.org/community/act-r/">ACT rules</a>
</p>
</html>