Update Links with identical accessible names and context serve equivalent purpose rule #2007
There are no files selected for viewing
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -42,7 +42,8 @@ This rule applies to any set of two or more [HTML or SVG elements][] for which a | |
| - 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][]; and | ||
| - the purpose of the elements is not [ambiguous to users in general](https://www.w3.org/TR/WCAG21/#dfn-ambiguous-to-users-in-general). | ||
|
|
||
| **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][]. | ||
|
|
||
|
|
@@ -54,8 +55,7 @@ When followed, the links in each set of target elements resolve to the [same res | |
|
|
||
| ## 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. | ||
|
There was a problem hiding this comment. This is pretty difficult to read, would you mind trying to simplify the language of these? There was a problem hiding this comment. I'm happy to make those changes, but the existing content is currently structured this way.
|
||
| - This rule assumes that assistive technologies are exposing all links on the page in the same way no matter which [document tree](https://dom.spec.whatwg.org/#document-trees) 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]) | ||
|
|
||
| ## Accessibility Support | ||
|
|
@@ -68,10 +68,13 @@ This rule is designed specifically for [2.4.4 Link Purpose (In Context)][sc244], | |
|
|
||
| This rule specifically targets links within the exact same context. 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 was not really possible and was left out of this rule. | ||
|
|
||
| Elements that are [inheriting semantic][] `link` nodes within each test target are distinguishable each other by some user. This means that this rule applies to links with identical accessible names and context that are not [ambiguous to users in general](https://www.w3.org/TR/WCAG21/#dfn-ambiguous-to-users-in-general), which is 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. | ||
giacomo-petri marked this conversation as resolved.
Show resolved
Hide resolved
|
||
|
|
||
| ### Bibliography | ||
|
|
||
| - [Understanding Success Criterion 2.4.4: Link Purpose (In Context)](https://www.w3.org/WAI/WCAG21/Understanding/link-purpose-in-context.html) | ||
| - [HTML Specification - URL parsing](https://html.spec.whatwg.org/#resolving-urls) | ||
| - [Ambiguous to users in general](https://www.w3.org/TR/WCAG21/#dfn-ambiguous-to-users-in-general) | ||
giacomo-petri marked this conversation as resolved.
Show resolved
Hide resolved
|
||
|
|
||
| ## Test Cases | ||
|
|
||
|
|
@@ -217,92 +220,120 @@ These two SVG `a` and HTML `a` elements have the same [accessible name][], same | |
|
|
||
| #### Failed Example 1 | ||
|
There was a problem hiding this comment. I'm reluctant to add this example TBH. This is first and foremost a 1.1.1 issue. Informative images are missing a text alternative. I think that this then results in a 2.4.4 failure is kind of incidental. In the same way that putting aria-hidden on the text of a link makes it a 1.3.1 issue, but that then also fits under 2.4.4. This feels a bit more like a "gotcha" test case for tools than something that actually adds something important edge case. Even if we do keep the example I would prefer not to see it as the first one, as its far from the most obvious failure you can see get under this criterion. There was a problem hiding this comment. I'm fine moving the example below, but I don't agree that the 2.4.4 is "incidental" here. If we have an empty link due to child image with empty alt attribute such as:
the empty link is still failing 2.4.4. Of course it's "incidental" to the empty alt attribute and the image is failing 1.1.1, but both the issues are valid and should be triggered by tools. There was a problem hiding this comment. I don't mind having one or two examples of images in here. I don't think the examples should be exclusively about images. The far more common scenario is with just link text. I think the examples we had before did a better job of demonstrating that problem than the new examples do. There was a problem hiding this comment. Suggested failure examples without images: <p>W3C pages for ACT:</p>
<p><a href="//">ACT Rules</a></p>
<p>Community group for ACT:</p>
<p><a href="//Different">ACT Rules</a></p><p>
To reach us you can <a href="">Contact</a> us via e-mail, or <a href="">contact</a> us on Facebook.
</p> |
||
|
|
||
| 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 | ||
| <html lang="en"> | ||
| <p> | ||
| <h2>Contact us:</h2> | ||
| <a href="https://act-rules.github.io/" 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="https://www.w3.org/community/act-r/" 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 2 | ||
|
|
||
| These two HTML `a` elements have the same [accessible name][] and [context][programmatically determined link context], but go to different resources. | ||
giacomo-petri marked this conversation as resolved.
Show resolved
Hide resolved
|
||
|
|
||
| ```html | ||
| <html lang="en"> | ||
| <div> | ||
| <span style="text-align:center;">Contact us</span> | ||
| <span style="display:flex; justify-content:space-around;"> | ||
| <img src="/test-assets/shared/chat.png" alt="Chat" style="width:50%;"> | ||
| <img src="/test-assets/shared/phone.png" alt="Phone" style="width:50%;"> | ||
| </span> | ||
| <span style="display:flex; justify-content:space-around;"> | ||
| <a href="https://act-rules.github.io/">Contact Us</a> | ||
| <a href="https://www.w3.org/community/act-r/">Contact Us</a> | ||
|
There was a problem hiding this comment. Actually, also wondering what happens with browsers that show the link URL when hovering them (e.g., Chrome shows it in the bottom left corner of the window). I do personally use that info sometimes, essentially to disambiguate links before clicking 🤔 There was a problem hiding this comment. That's an interesting point to consider while proceeding with your suggested proposal for expectation:
as "visual information on the page" might be not enough clear and might include also the browser visual experience (e.g. as you said Chrome shows the URL on hover or focus). We might say something like:
With "within the content" we restrict the scope to the visual presentation of the HTML content, preventing people to include visual browsers functionalities that give suggestions/hint. I'm not really concerned about the hover functionality, as it behaves consistently with assistive technologies as well; for example, using VO, if you press ctrl+opt+shift+U you can listen the href attribute. Similarly, if you use VoiceControl, you can say "Move mouse to $number" to display the Chrome "hint" with url info. On the other hand, how many users are aware about that? And, even if the URL is different and might help differentiating the destinations, there might be url structures that are more or less complex to be understood, especially for non-expert people; if you think about something like: or
or
they are very different in terms of understanding. There was a problem hiding this comment. Good point. Maybe that should be an assumption (that reading the URL as per hovering in a browser or invoking some shortcut in a screen reader isn't enough to disambiguate as far as WCAG is concerned). There was a problem hiding this comment.
TODO: There was a problem hiding this comment. Added examples with query parameters to emphasize ambiguity. |
||
| </span> | ||
| </div> | ||
| </html> | ||
| ``` | ||
|
|
||
| #### Failed Example 3 | ||
|
|
||
| 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. | ||
giacomo-petri marked this conversation as resolved.
Show resolved
Hide resolved
|
||
|
|
||
| ```html | ||
| <html lang="en"> | ||
| <div> | ||
| <span style="text-align:center;">Contact us</span> | ||
| <span style="display:flex; justify-content:space-around;"> | ||
| <img src="/test-assets/shared/chat.png" alt="Chat" style="width:50%;"> | ||
| <img src="/test-assets/shared/phone.png" alt="Phone" style="width:50%;"> | ||
| </span> | ||
| <span style="display:flex; justify-content:space-around;"> | ||
| <a href="/test-assets/links-with-identical-names-serve-equivalent-purpose-b20e66/about/contact.html">Contact Us</a> | ||
| <a href="/test-assets/links-with-identical-names-serve-equivalent-purpose-b20e66/admissions/contact.html">Contact Us</a> | ||
| </span> | ||
|
There was a problem hiding this comment. I'm not sure the chat/phone disambiguation is good enough given the links. There was a problem hiding this comment. I've added 2 blocks in /test-assets/links-with-identical-names-serve-equivalent-purpose-b20e66/contact-us.html file to manage this scenario. I've created similar breadcrumbs, similar services navigation, similar headings but different content, to reflect the failure description. |
||
| </div> | ||
| </html> | ||
| ``` | ||
|
|
||
| #### Failed Example 4 | ||
|
|
||
| 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. | ||
giacomo-petri marked this conversation as resolved.
Show resolved
Hide resolved
|
||
|
|
||
| ```html | ||
| <html lang="en"> | ||
| <div> | ||
| <span style="text-align:center;">Contact us</span> | ||
| <span style="display:flex; justify-content:space-around;"> | ||
| <img src="/test-assets/shared/chat.png" alt="Chat" style="width:50%;"> | ||
| <img src="/test-assets/shared/phone.png" alt="Phone" style="width:50%;"> | ||
| </span> | ||
| <span style="display:flex; justify-content:space-around;"> | ||
| <span | ||
| role="link" | ||
| tabindex="0" | ||
| onclick="location='/test-assets/links-with-identical-names-serve-equivalent-purpose-b20e66/about/contact.html'">Contact Us</a> | ||
giacomo-petri marked this conversation as resolved.
Show resolved
Hide resolved
|
||
| <span | ||
| role="link" | ||
| tabindex="0" | ||
| onclick="location='/test-assets/links-with-identical-names-serve-equivalent-purpose-b20e66/admissions/contact.html'">Contact Us</a> | ||
giacomo-petri marked this conversation as resolved.
Show resolved
Hide resolved
|
||
| </span> | ||
| </div> | ||
| </html> | ||
| ``` | ||
|
|
||
| #### Failed Example 5 | ||
|
|
||
| These two SVG `a` elements have the same [accessible name][] and [context][programmatically determined link context] but link to different resources. | ||
|
|
||
| ```html | ||
| <html lang="en"> | ||
| <p> | ||
| <svg enable-background="new 0 0 264 120" viewBox="0 -20 264 140" xmlns="http://www.w3.org/2000/svg"> | ||
| <text>Contact us</text> | ||
| <a href="https://act-rules.github.io/" aria-label="Contact Us"> | ||
| <path d="m212.0806 68.0717c-10.3917 10.3852-22.4311 20.3239-27.1905 15.5646-6.8075-6.8075-11.0088-12.7418-26.0285-.6696-15.0132 12.0657-3.4792 20.1139 3.1182 26.7047 7.6149 7.6149 36.0001.407 64.0571-27.6434 28.0504-28.057 35.2386-56.4422 27.6172-64.0571-6.5974-6.604-14.6062-18.1314-26.6719-3.1182-12.0723 15.0132-6.1444 19.2145.6761 26.0285 4.7397 4.7593-5.1925 16.7988-15.5777 27.1905z"/> | ||
| </a> | ||
| <a href="https://www.w3.org/community/act-r/" aria-label="Contact Us"> | ||
| <path d="m105 7.5h-90c-8.2576 0-15 6.7497-15 15v52.5c0 8.2498 6.7424 15 15 15h30l30 22.5v-22.5h30c8.2498 0 15-6.7502 15-15v-52.5c0-8.2503-6.7502-15-15-15zm-80.7903 52.5c-6.2132 0-11.255-5.0372-11.255-11.25 0-6.2132 5.0418-11.25 11.255-11.25 6.2128 0 11.245 5.0418 11.245 11.25 0 6.2077-5.0322 11.25-11.245 11.25zm35.7953 0c-6.2128 0-11.255-5.0372-11.255-11.25 0-6.2132 5.0423-11.25 11.255-11.25 6.2132 0 11.245 5.0368 11.245 11.25 0 6.2128-5.0317 11.25-11.245 11.25zm35.7958 0c-6.2132 0-11.2555-5.0372-11.2555-11.25 0-6.2132 5.0423-11.25 11.2555-11.25 6.2128 0 11.2445 5.0368 11.2445 11.25 0 6.2128-5.0318 11.25-11.2445 11.25z"/> | ||
| </a> | ||
| </svg> | ||
| </p> | ||
| </html> | ||
| ``` | ||
|
|
||
| #### Failed Example 6 | ||
|
|
||
| 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. | ||
|
|
||
| ```html | ||
| <html lang="en"> | ||
| <p> | ||
| <span style="text-align:center;">Contact us</span> | ||
| <span style="display:flex; justify-content:space-around;"> | ||
| <img src="/test-assets/shared/chat.png" alt="Chat" style="width:50%;"> | ||
| <img src="/test-assets/shared/phone.png" alt="Phone" style="width:50%;"> | ||
| </span> | ||
| <span style="display:flex; justify-content:space-around;"> | ||
| <a href="/test-assets/links-with-identical-names-serve-equivalent-purpose-b20e66/index.html">Contact Us</a> | ||
| <a href="/test-assets/links-with-identical-names-serve-equivalent-purpose-b20e66/redirect1.html">Contact Us</a> | ||
| </span> | ||
| </p> | ||
| </html> | ||
| ``` | ||
|
|
@@ -398,6 +429,34 @@ These two HTML `a` elements have the same [accessible name][] but different [pro | |
| <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 | ||
| <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> | ||
WilcoFiers marked this conversation as resolved.
Show resolved
Hide resolved
|
||
| </p> | ||
| </html> | ||
| ``` | ||
|
|
||
| #### Inapplicable Example 8 | ||
|
|
||
| These two HTML `a` elements have the same [accessible name][] and [context][programmatically determined link context], but are ambiguous to users in general. | ||
|
|
||
| ```html | ||
| <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> | ||
| ``` | ||
|
|
||
| [accessible name]: #accessible-name 'Definition of accessible name' | ||
| [document]: https://dom.spec.whatwg.org/#concept-document 'Definition of document' | ||
| [explicit role]: #explicit-role 'Definition of explicit role' | ||
|
|
||
|
There was a problem hiding this comment. Where did these images come from? Are we free to use these? Please add credit for these images to the acknowledgement section. There was a problem hiding this comment. Images have been created by UsableNet designers and I have the approval to publish them. Please, let me know if something else is needed. |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I'm having second thoughts about this. The definition is
I don't think this is objective. I agree it is unambiguous, so we might rewrite the rule in a way that moves this condition from the applicability to the expectation (and update the examples accordingly).
What do you think?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
@carlosapaduarte ,
I agree, even more considering that the definition of "ambiguous to users in general" is far away from our definition of "programmatically determined link context".
On it
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
My suggestion would be to update the current expectation to something like
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
The we don't even need the exception in the first bullet:
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.