Skip to content

Commit 5b6cdb4

Browse files
giacomo-petricarlosapaduarteJym77WilcoFiersCarlos Duarte
authored
Update Links with identical accessible names and context serve equivalent purpose rule (act-rules#2007)
* Update links-with-identical-names-and-context-serve-equivalent-purpose-fd3a94.md * Update links-with-identical-names-and-context-serve-equivalent-purpose-fd3a94.md * Update programmatically-determined-link-context.md * Add files via upload * Update links-with-identical-names-and-context-serve-equivalent-purpose-fd3a94.md * Update links-with-identical-names-and-context-serve-equivalent-purpose-fd3a94.md * Update links-with-identical-names-and-context-serve-equivalent-purpose-fd3a94.md * Update links-with-identical-names-and-context-serve-equivalent-purpose-fd3a94.md * Update links-with-identical-names-and-context-serve-equivalent-purpose-fd3a94.md * Update links-with-identical-names-and-context-serve-equivalent-purpose-fd3a94.md * Update links-with-identical-names-and-context-serve-equivalent-purpose-fd3a94.md * Update links-with-identical-names-and-context-serve-equivalent-purpose-fd3a94.md * Apply suggestions from code review Co-authored-by: Carlos Duarte <carlosapaduarte@gmail.com> * Update links-with-identical-names-and-context-serve-equivalent-purpose-fd3a94.md * Update programmatically-determined-link-context.md * Apply suggestions from code review Co-authored-by: Jean-Yves Moyen <jym@siteimprove.com> * Update _rules/links-with-identical-names-and-context-serve-equivalent-purpose-fd3a94.md Co-authored-by: Jean-Yves Moyen <jym@siteimprove.com> * Update links-with-identical-names-and-context-serve-equivalent-purpose-fd3a94.md * Update links-with-identical-names-and-context-serve-equivalent-purpose-fd3a94.md * Update links-with-identical-names-and-context-serve-equivalent-purpose-fd3a94.md * Apply suggestions from code review Co-authored-by: Carlos Duarte <carlosapaduarte@gmail.com> * Update links-with-identical-names-and-context-serve-equivalent-purpose-fd3a94.md * Add files via upload * Update links-with-identical-names-and-context-serve-equivalent-purpose-fd3a94.md * Update _rules/links-with-identical-names-and-context-serve-equivalent-purpose-fd3a94.md Co-authored-by: Carlos Duarte <carlosapaduarte@gmail.com> * Update links-with-identical-names-and-context-serve-equivalent-purpose-fd3a94.md * Apply suggestions from code review Co-authored-by: Jean-Yves Moyen <jym@siteimprove.com> * Update links-with-identical-names-and-context-serve-equivalent-purpose-fd3a94.md * Update contact-us.html * Update links-with-identical-names-and-context-serve-equivalent-purpose-fd3a94.md * Update links-with-identical-names-and-context-serve-equivalent-purpose-fd3a94.md * Update _rules/links-with-identical-names-and-context-serve-equivalent-purpose-fd3a94.md Co-authored-by: Jean-Yves Moyen <jym@siteimprove.com> * Update links-with-identical-names-and-context-serve-equivalent-purpose-fd3a94.md * Update links-with-identical-names-and-context-serve-equivalent-purpose-fd3a94.md fix typo * Update links-with-identical-names-and-context-serve-equivalent-purpose-fd3a94.md fix typo * Update _rules/links-with-identical-names-and-context-serve-equivalent-purpose-fd3a94.md Co-authored-by: Jean-Yves Moyen <jym@siteimprove.com> * Update spelling-ignore.yml * Update _rules/links-with-identical-names-and-context-serve-equivalent-purpose-fd3a94.md Co-authored-by: Wilco Fiers <WilcoFiers@users.noreply.github.com> * added comma * updated secondary requirements desc * Updates after confrontation with Wilco * Update _rules/links-with-identical-names-and-context-serve-equivalent-purpose-fd3a94.md Co-authored-by: Jean-Yves Moyen <jym@siteimprove.com> * Update _rules/links-with-identical-names-and-context-serve-equivalent-purpose-fd3a94.md Co-authored-by: Jean-Yves Moyen <jym@siteimprove.com> * Update _rules/links-with-identical-names-and-context-serve-equivalent-purpose-fd3a94.md Co-authored-by: Jean-Yves Moyen <jym@siteimprove.com> * Update links-with-identical-names-and-context-serve-equivalent-purpose-fd3a94.md --------- Co-authored-by: Carlos Duarte <carlosapaduarte@gmail.com> Co-authored-by: Jean-Yves Moyen <jym@siteimprove.com> Co-authored-by: Wilco Fiers <WilcoFiers@users.noreply.github.com> Co-authored-by: Carlos Duarte <caduarte@campus.ul.pt>
1 parent 40058d7 commit 5b6cdb4

File tree

5 files changed

+305
-43
lines changed

5 files changed

+305
-43
lines changed

__tests__/spelling-ignore.yml

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -237,6 +237,7 @@
237237
- focusability
238238
- unitless
239239
- luminance
240+
- disambiguated
240241

241242
# Parts of Unicode
242243
- 000A

_rules/links-with-identical-names-and-context-serve-equivalent-purpose-fd3a94.md

Lines changed: 136 additions & 43 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,7 @@ input_aspects:
1919
acknowledgments:
2020
authors:
2121
- Carlos Duarte
22+
- Giacomo Petri
2223
previous_authors:
2324
- Anne Thyme Nørregaard
2425
funding:
@@ -38,21 +39,25 @@ This rule applies to any set of two or more [HTML or SVG elements][] for which a
3839
- the elements are in the same [web page (HTML)][]; and
3940
- the elements are [included in the accessibility tree][included in the accessibility tree]; and
4041
- the elements have [matching][] [accessible names][accessible name] that are not empty (`""`); and
41-
- have the same [programmatically determined link context][].
42+
- the elements have the same [programmatically determined link context][].
4243

4344
**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][].
4445

4546
## Expectation
4647

47-
When followed, the links in each set of target elements resolve to the [same resource][] or to [equivalent resources](#equivalent-resource).
48+
For each pair of links in each target set, one of the following is true:
49+
50+
- both links resolve to the [same resource][]; or
51+
- both links resolve to [equivalent resources][equivalent resource]; or
52+
- there is no visual information within the [web page][] to let users know that both links resolve to [non-equivalent resources][equivalent resource].
4853

4954
**Note**: Resolving the links includes potential redirects, if the redirects happen instantly.
5055

5156
## Assumptions
5257

53-
- This rule assumes that the purpose of the links with identical [accessible names][accessible name] and [context][programmatically determined link context] would not be ambiguous to users in general, which is the exception mentioned in [Success Criterion 2.4.4 Link Purpose (In Context)][sc244]. 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.
54-
- 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 describe its purpose.
55-
- 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 same 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])
58+
- 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.
59+
- 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]).
60+
- 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.
5661

5762
## Accessibility Support
5863

@@ -62,10 +67,15 @@ There are no accessibility support issues known.
6267

6368
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.
6469

70+
Links that are [ambiguous to users in general](https://www.w3.org/TR/WCAG22/#dfn-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.
71+
72+
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].
73+
6574
### Bibliography
6675

6776
- [Understanding Success Criterion 2.4.4: Link Purpose (In Context)](https://www.w3.org/WAI/WCAG22/Understanding/link-purpose-in-context.html)
6877
- [HTML Specification - URL parsing](https://html.spec.whatwg.org/#resolving-urls)
78+
- [Ambiguous to users in general](https://www.w3.org/TR/WCAG22/#dfn-ambiguous-to-users-in-general)
6979

7080
## Test Cases
7181

@@ -207,11 +217,9 @@ These two SVG `a` and HTML `a` elements have the same [accessible name][], same
207217
</html>
208218
```
209219

210-
### Failed
211-
212-
#### Failed Example 1
220+
#### Passed Example 9
213221

214-
These two HTML `a` elements have the same [accessible name][] and [context][programmatically determined link context] but go to different resources.
222+
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](https://www.w3.org/TR/WCAG22/#dfn-ambiguous-to-users-in-general). Thus all readers are unsure about the destination and the person with a disability is not at any disadvantage.
215223

216224
```html
217225
<html lang="en">
@@ -223,80 +231,149 @@ These two HTML `a` elements have the same [accessible name][] and [context][prog
223231
</html>
224232
```
225233

234+
### Failed
235+
236+
#### Failed Example 1
237+
238+
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.
239+
240+
```html
241+
<html lang="en">
242+
<p>
243+
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.
244+
</p>
245+
</html>
246+
```
247+
226248
#### Failed Example 2
227249

228-
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.
250+
These two HTML `a` elements have the same [accessible name][] and [context][programmatically determined link context], but go to different resources.
229251

230252
```html
231253
<html lang="en">
232-
<div>
233-
Learn more (<a href="/test-assets/links-with-identical-names-serve-equivalent-purpose-b20e66/about/contact.html"
234-
>Contact us</a
235-
>) and get in touch (
236-
<a href="/test-assets/links-with-identical-names-serve-equivalent-purpose-b20e66/admissions/contact.html"
237-
>Contact us</a
238-
>)
239-
</div>
254+
<p>W3C pages for ACT:</p>
255+
<p><a href="https://act-rules.github.io/">ACT rules</a></p>
256+
<p>Community group for ACT:</p>
257+
<p><a href="https://www.w3.org/community/act-r/">ACT rules</a></p>
240258
</html>
241259
```
242260

243261
#### Failed Example 3
244262

245-
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.
263+
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.
246264

247265
```html
248266
<html lang="en">
249267
<p>
250-
Learn more (<span
268+
<h2>Contact us:</h2>
269+
<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>
270+
<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>
271+
</p>
272+
</html>
273+
```
274+
275+
#### Failed Example 4
276+
277+
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.
278+
279+
```html
280+
<html lang="en">
281+
<div>
282+
<span style="text-align:center;">Contact us</span>
283+
<span style="display:flex; justify-content:space-around;">
284+
<img src="/test-assets/shared/chat.png" alt="Chat" style="width:50%;">
285+
<img src="/test-assets/shared/phone.png" alt="Phone" style="width:50%;">
286+
</span>
287+
<span style="display:flex; justify-content:space-around;">
288+
<a href="/test-assets/links-with-identical-names-serve-equivalent-purpose-b20e66/contact-us.html?page=60e950cff70bf1ec60a702086748ab4dec361514">Contact Us</a>
289+
<a href="/test-assets/links-with-identical-names-serve-equivalent-purpose-b20e66/contact-us.html?page=c1d4e0f067462f4b28716f028d9213a25eb82f28">Contact Us</a>
290+
</span>
291+
</div>
292+
</html>
293+
```
294+
295+
#### Failed Example 5
296+
297+
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.
298+
299+
```html
300+
<html lang="en">
301+
<div>
302+
<span style="text-align:center;">Contact us</span>
303+
<span style="display:flex; justify-content:space-around;">
304+
<img src="/test-assets/shared/chat.png" alt="Chat" style="width:50%;">
305+
<img src="/test-assets/shared/phone.png" alt="Phone" style="width:50%;">
306+
</span>
307+
<span style="display:flex; justify-content:space-around;">
308+
<a href="/test-assets/links-with-identical-names-serve-equivalent-purpose-b20e66/contact-us.html?page=3">Contact Us</a>
309+
<a href="/test-assets/links-with-identical-names-serve-equivalent-purpose-b20e66/contact-us.html?page=4">Contact Us</a>
310+
</span>
311+
</div>
312+
</html>
313+
```
314+
315+
#### Failed Example 6
316+
317+
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.
318+
319+
```html
320+
<html lang="en">
321+
<div>
322+
<span style="text-align:center;">Contact us</span>
323+
<span style="display:flex; justify-content:space-around;">
324+
<img src="/test-assets/shared/chat.png" alt="Chat" style="width:50%;">
325+
<img src="/test-assets/shared/phone.png" alt="Phone" style="width:50%;">
326+
</span>
327+
<span style="display:flex; justify-content:space-around;">
328+
<span
251329
role="link"
252330
tabindex="0"
253-
onclick="location='/test-assets/links-with-identical-names-serve-equivalent-purpose-b20e66/about/contact.html'"
254-
>Contact us</span
255-
>) and get in touch (<span
331+
onclick="location='/test-assets/links-with-identical-names-serve-equivalent-purpose-b20e66/contact-us.html?page=1'">Contact Us</span>
332+
<span
256333
role="link"
257334
tabindex="0"
258-
onclick="location='/test-assets/links-with-identical-names-serve-equivalent-purpose-b20e66/admissions/contact.html'"
259-
>Contact us</span
260-
>)
261-
</p>
335+
onclick="location='/test-assets/links-with-identical-names-serve-equivalent-purpose-b20e66/contact-us.html?page=2'">Contact Us</span>
336+
</span>
337+
</div>
262338
</html>
263339
```
264340

265-
#### Failed Example 4
341+
#### Failed Example 7
266342

267343
These two SVG `a` elements have the same [accessible name][] and [context][programmatically determined link context] but link to different resources.
268344

269345
```html
270346
<html lang="en">
271347
<p>
272-
<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
273-
<a href="https://act-rules.github.io/" aria-label="ACT rules">
274-
<circle cx="50" cy="40" r="35" />
348+
<svg enable-background="new 0 0 264 120" viewBox="0 -20 264 140" xmlns="http://www.w3.org/2000/svg">
349+
<text>Contact us</text>
350+
<a href="/test-assets/links-with-identical-names-serve-equivalent-purpose-b20e66/contact-us.html?page=1" aria-label="Contact Us">
351+
<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"/>
275352
</a>
276-
277-
<a href="https://www.w3.org/community/act-r/">
278-
<text x="50" y="90" text-anchor="middle">
279-
ACT rules
280-
</text>
353+
<a href="/test-assets/links-with-identical-names-serve-equivalent-purpose-b20e66/contact-us.html?page=2" aria-label="Contact Us">
354+
<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"/>
281355
</a>
282356
</svg>
283357
</p>
284358
</html>
285359
```
286360

287-
#### Failed Example 5
361+
#### Failed Example 8
288362

289363
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.
290364

291365
```html
292366
<html lang="en">
293367
<p>
294-
Learn more (<a href="/test-assets/links-with-identical-names-serve-equivalent-purpose-b20e66/index.html"
295-
>Contact us</a
296-
>) and get in touch (<a
297-
href="/test-assets/links-with-identical-names-serve-equivalent-purpose-b20e66/redirect1.html"
298-
>Contact us</a
299-
>)
368+
<span style="text-align:center;">Contact us</span>
369+
<span style="display:flex; justify-content:space-around;">
370+
<img src="/test-assets/shared/chat.png" alt="Chat" style="width:50%;">
371+
<img src="/test-assets/shared/phone.png" alt="Phone" style="width:50%;">
372+
</span>
373+
<span style="display:flex; justify-content:space-around;">
374+
<a href="/test-assets/links-with-identical-names-serve-equivalent-purpose-b20e66/index.html">Contact Us</a>
375+
<a href="/test-assets/links-with-identical-names-serve-equivalent-purpose-b20e66/redirect1.html">Contact Us</a>
376+
</span>
300377
</p>
301378
</html>
302379
```
@@ -392,8 +469,23 @@ These two HTML `a` elements have the same [accessible name][] but different [pro
392469
<div><a href="https://www.w3.org/International/">Read more</a> about the W3C internationalization</div>
393470
```
394471

472+
#### Inapplicable Example 7
473+
474+
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].
475+
476+
```html
477+
<html lang="en">
478+
<p>
479+
We are on social media:
480+
<a href="https://act-rules.github.io/">ACT rules</a>
481+
<a aria-hidden="true" href="https://www.w3.org/community/act-r/">ACT rules</a>
482+
</p>
483+
</html>
484+
```
485+
395486
[accessible name]: #accessible-name 'Definition of accessible name'
396487
[document]: https://dom.spec.whatwg.org/#concept-document 'Definition of document'
488+
[equivalent resource]: #equivalent-resource 'Definition of Equivalent Resource'
397489
[explicit role]: #explicit-role 'Definition of explicit role'
398490
[included in the accessibility tree]: #included-in-the-accessibility-tree 'Definition of included in the accessibility tree'
399491
[inheriting semantic]: #inheriting-semantic 'Definition of Inheriting Semantic Role'
@@ -403,5 +495,6 @@ These two HTML `a` elements have the same [accessible name][] but different [pro
403495
[sc244]: https://www.w3.org/TR/WCAG22/#link-purpose-in-context 'Success Criterion 2.4.4: Link Purpose (In Context)'
404496
[semantic role]: #semantic-role 'Definition of semantic role'
405497
[shadow tree]: https://dom.spec.whatwg.org/#shadow-tree 'Definition of shadow tree'
498+
[web page]: #web-page-html 'Definition of HTML web page'
406499
[web page (html)]: #web-page-html 'Definition of web page (HTML)'
407500
[html or svg elements]: #namespaced-element

0 commit comments

Comments
 (0)