From 5b6cdb47c64e58494412efb85594d49cd1017c59 Mon Sep 17 00:00:00 2001 From: Giacomo Petri Date: Fri, 22 Mar 2024 14:48:50 +0100 Subject: [PATCH] Update Links with identical accessible names and context serve equivalent purpose rule (#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 * 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 * Update _rules/links-with-identical-names-and-context-serve-equivalent-purpose-fd3a94.md Co-authored-by: Jean-Yves Moyen * 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 * 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 * Update links-with-identical-names-and-context-serve-equivalent-purpose-fd3a94.md * Apply suggestions from code review Co-authored-by: Jean-Yves Moyen * 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 * 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 * Update spelling-ignore.yml * Update _rules/links-with-identical-names-and-context-serve-equivalent-purpose-fd3a94.md Co-authored-by: Wilco Fiers * 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 * Update _rules/links-with-identical-names-and-context-serve-equivalent-purpose-fd3a94.md Co-authored-by: Jean-Yves Moyen * Update _rules/links-with-identical-names-and-context-serve-equivalent-purpose-fd3a94.md Co-authored-by: Jean-Yves Moyen * Update links-with-identical-names-and-context-serve-equivalent-purpose-fd3a94.md --------- Co-authored-by: Carlos Duarte Co-authored-by: Jean-Yves Moyen Co-authored-by: Wilco Fiers Co-authored-by: Carlos Duarte --- __tests__/spelling-ignore.yml | 1 + ...context-serve-equivalent-purpose-fd3a94.md | 179 +++++++++++++----- .../contact-us.html | 168 ++++++++++++++++ test-assets/shared/chat.png | Bin 0 -> 1070 bytes test-assets/shared/phone.png | Bin 0 -> 1150 bytes 5 files changed, 305 insertions(+), 43 deletions(-) create mode 100644 test-assets/links-with-identical-names-serve-equivalent-purpose-b20e66/contact-us.html create mode 100644 test-assets/shared/chat.png create mode 100644 test-assets/shared/phone.png diff --git a/__tests__/spelling-ignore.yml b/__tests__/spelling-ignore.yml index 81316f10c55..c8a08a39404 100644 --- a/__tests__/spelling-ignore.yml +++ b/__tests__/spelling-ignore.yml @@ -237,6 +237,7 @@ - focusability - unitless - luminance +- disambiguated # Parts of Unicode - 000A diff --git a/_rules/links-with-identical-names-and-context-serve-equivalent-purpose-fd3a94.md b/_rules/links-with-identical-names-and-context-serve-equivalent-purpose-fd3a94.md index 7674e95ef74..99f745fb62e 100755 --- a/_rules/links-with-identical-names-and-context-serve-equivalent-purpose-fd3a94.md +++ b/_rules/links-with-identical-names-and-context-serve-equivalent-purpose-fd3a94.md @@ -19,6 +19,7 @@ input_aspects: acknowledgments: authors: - Carlos Duarte + - Giacomo Petri previous_authors: - Anne Thyme Nørregaard funding: @@ -38,21 +39,25 @@ 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 -- have the same [programmatically determined link context][]. +- 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 -When followed, the links in each set of target elements resolve to the [same resource][] or to [equivalent resources](#equivalent-resource). +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 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. -- 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. -- 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]) +- 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](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]). +- 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 @@ -62,10 +67,15 @@ There are no accessibility support issues known. 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](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. + +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]. + ### Bibliography - [Understanding Success Criterion 2.4.4: Link Purpose (In Context)](https://www.w3.org/WAI/WCAG22/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/WCAG22/#dfn-ambiguous-to-users-in-general) ## Test Cases @@ -207,11 +217,9 @@ These two SVG `a` and HTML `a` elements have the same [accessible name][], same ``` -### Failed - -#### Failed Example 1 +#### Passed Example 9 -These two HTML `a` elements have the same [accessible name][] and [context][programmatically determined link context] but go to different resources. +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. ```html @@ -223,80 +231,149 @@ These two HTML `a` elements have the same [accessible name][] and [context][prog ``` +### 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 + +

+ To get in touch with us, you can either contact us via chat or contact us by phone. +

+ +``` + #### Failed Example 2 -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. +These two HTML `a` elements have the same [accessible name][] and [context][programmatically determined link context], but go to different resources. ```html -
- Learn more (Contact us) and get in touch ( - Contact us) -
+

W3C pages for ACT:

+

ACT rules

+

Community group for ACT:

+

ACT rules

``` #### Failed Example 3 -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. +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

- Learn more (Contact us: + Contact Us + Contact Us +

+ +``` + +#### 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. + +```html + +
+ Contact us + + Chat + Phone + + + Contact Us + Contact Us + +
+ +``` + +#### Failed Example 5 + +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. + +```html + +
+ Contact us + + Chat + Phone + + + Contact Us + Contact Us + +
+ +``` + +#### Failed Example 6 + +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. + +```html + +
+ Contact us + + Chat + Phone + + + Contact us) and get in touch (Contact Us + Contact us) -

+ onclick="location='/test-assets/links-with-identical-names-serve-equivalent-purpose-b20e66/contact-us.html?page=2'">Contact Us + +
``` -#### Failed Example 4 +#### Failed Example 7 These two SVG `a` elements have the same [accessible name][] and [context][programmatically determined link context] but link to different resources. ```html

- - - + + Contact us + + - - - - ACT rules - + +

``` -#### Failed Example 5 +#### Failed Example 8 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

- Learn more (Contact us) and get in touch (Contact us) + Contact us + + Chat + Phone + + + Contact Us + Contact Us +

``` @@ -392,8 +469,23 @@ These two HTML `a` elements have the same [accessible name][] but different [pro
Read more about the W3C internationalization
``` +#### 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 + +

+ We are on social media: + ACT rules + +

+ +``` + [accessible name]: #accessible-name 'Definition of accessible name' [document]: https://dom.spec.whatwg.org/#concept-document 'Definition of document' +[equivalent resource]: #equivalent-resource 'Definition of Equivalent Resource' [explicit role]: #explicit-role 'Definition of explicit role' [included in the accessibility tree]: #included-in-the-accessibility-tree 'Definition of included in the accessibility tree' [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 [sc244]: https://www.w3.org/TR/WCAG22/#link-purpose-in-context 'Success Criterion 2.4.4: Link Purpose (In Context)' [semantic role]: #semantic-role 'Definition of semantic role' [shadow tree]: https://dom.spec.whatwg.org/#shadow-tree 'Definition of shadow tree' +[web page]: #web-page-html 'Definition of HTML web page' [web page (html)]: #web-page-html 'Definition of web page (HTML)' [html or svg elements]: #namespaced-element diff --git a/test-assets/links-with-identical-names-serve-equivalent-purpose-b20e66/contact-us.html b/test-assets/links-with-identical-names-serve-equivalent-purpose-b20e66/contact-us.html new file mode 100644 index 00000000000..156807a007b --- /dev/null +++ b/test-assets/links-with-identical-names-serve-equivalent-purpose-b20e66/contact-us.html @@ -0,0 +1,168 @@ + + + + + About - Chat with us + + + +
+ + + + +
+ + + diff --git a/test-assets/shared/chat.png b/test-assets/shared/chat.png new file mode 100644 index 0000000000000000000000000000000000000000..05768ff6072938f26fb866fa779931b635c3e3ac GIT binary patch literal 1070 zcmeAS@N?(olHy`uVBq!ia0vp^AAtB02Q!d#e!q7vkTMSN32}8V@L^zJWnyAtWMl@C zOiau`03m@&fDDK@BO^!wScJ*e?@=+3C0G*V7tCN#u;9S|fDaA=4<=mL(4df@p}EJ7 zfq{9Zr;B4q1>>8$?6)3k@w7f{b`ZPaH|KBuw`((hMt3FIsJ_@E?P2%*81p*sN!|N4 zOj13Vdukc;hM0#JQm!SQx%8o72H#PZ?^hz*jl=J3c`-pO=6aaym0Ja_MzYhEYV6HF z>ipfRYxc_rYaZ?mZQssUZC5mB?y9zck9XH7p84Ts!Xf#QTq7uBbDA9u>b+`ttSH{`oEYx37-)&`|Qls%!7TZ4W0d;gjS~E%m5a5*c1_ zH2IP2`CkWC@pHe;ZN28h85K1D5sO)erKHH~wN;zeT^IExLHV zx7D|OY}+ft3yvACUUq1$+~$P}@43Vt%-DPE{S0L;h22fsf6mEfAKSTf&cpC>*8Jmt zoEqg%8J@1cE!uOPmkk)awG|DEP0k9L0 zKf3L_PyU%W!}=e+?E4=*ERXsl)PFyUubG(m0Y;#W8k;!p(j&8teN99<&EG5fFmLQA zp6(~*(QEPFz~%6Sg5r+jb5!ll#MwOFy-G3U&xQ;J?t77?725Z*#U69~RlE6MFK0*K zpKH=9Z%nGcbC2U%+iNk|OHH$1tvNhX`<>wBg)<&Bs%_>=p2pTb%a=W2=OJBByUS|4%k zXJTYJh%*hu`I{K|y*(Agsg1byH8Jvedul9%15|b$!l{e6#}tQsRhaWzs3AH|1e9NduR&KaSWcWelF{r5}E*! CWami$ literal 0 HcmV?d00001 diff --git a/test-assets/shared/phone.png b/test-assets/shared/phone.png new file mode 100644 index 0000000000000000000000000000000000000000..c48f15d84af392a5e2249c67102c735c3c7d462e GIT binary patch literal 1150 zcmV-^1cCdBP)r!(Wlz9!gF4 z8(OqS5*z-W!yd?qesJw z&xQq(Q4z2KR~sZC$PE&P5s|TjX*@W#(AgJ$3m6YcPN_mpspu&kdP-eS313QIO8faz z(pWGx?4j$0_|z-4Lu~;F6yxCr)E4RkTOi+QUEnrT8>T7o`Hy+GH4vr)L2WWq+Z6BQ z$5Iv;_|8(*li>`awI z$m{F&+vJpno>G-ln#NCFSp1Qb)WX4BqjOk4+R@zjnQ94cRjR#P=vuS!<4vv1+V~nI zKJ*8vLT-?{+#p4~M3u{iA=e5umz#D&Zra^$^mMs((utSoM$ZMc9S6UmR%IvD0({^# zPPK}JBzLV1f?71-Fm@8uvLVZTAscd^F$-R#Rk1z@IMw1C-MFbuZQ6Ols}wn-DOO_n zi)_ZrL^-2F&M3K>QM=TPaB4Mn0H&PL?P^B2KuK?)gvX1Kk?b@Ld7zT*Y4*l4b$zxtMXKEPt+c}unMPGeNsmUO*tmP^1fu^3(Vmb&2+EJo*^S{NIPk_q|U0Y67_yHQD*f#WG zJ{pfv+0a|oqk+dLW072c_9-1;G+LmK@5l*nX0jMr_-YC zBoP>06dR!%NtcODyX0nC`JJ8gDJP!iOAqq!UZ4p?9aWW0)l6&NO=o^@i|3>hPY)!Z zlr9rf%5GvxrK*y}T}v$#Y?WfDfY;TY$N7 z?bSYrz#rY5zouF31Mx;4bPGiOT12*5Pr*Kc#2*VhKd0=>C+!#L!Pa4nh`TVKwqKwP zHN0|GlTpCwB(ddH-4`4 z-+ijFvT)M7%~I__)Qo?mk6@3Zo(X@+Jy~=X@Hl$^jZ2@S1e2hKQ0*yv3p)2JVmJDZ Q0RR9107*qoM6N<$f->|3