New Rule: inline link in paragraph is distinguishable be4d0c #1010

carlosapaduarte · 2019-11-07T09:17:07Z

New rule

Blocked: waiting for decision on how to handle states in rules

Need for Final Call:
This will require a 2 weeks Final Call << new rule, or substantial changes affecting a large number of test cases, if in doubt, use this. >>

Pull Request Etiquette

When creating PR:

Make sure you requesting to pull a branch (right side) to the develop branch (left side).

After creating PR:

Add yourself (and co-authors) as "Assignees" for PR.
Add label to indicate if it's a Rule, Definition or Chore.
Close the issue that the PR resolves (and make sure the issue is referenced in the top of this comment)
Optionally request feedback from anyone in particular by assigning them as "Reviewers".

How to Review And Approve

Go to the “Files changed” tab
Here you will have the option to leave comments on different lines.
Once the review is completed, find the “Review changes” button in the top right, select “Approve” (if you are really confident in the rule) or "Request changes" and click “Submit review”.
Make sure to also review the proposed Final Call period. In case of disagreement, the longer period wins.

kasperisager

Some initial feedback. Looking good so far! 👌

pages/glossary/text-style-properties.md

_rules/inline_link_in_paragraph_is_distinguishable_be4d0c.md

kasperisager · 2019-11-11T13:25:56Z

pages/glossary/distinguishing-styles.md

+
+- they have [distinguishing borders](#distinguishing-borders)
+- they have [distinguishing box-shadows](#distinguishing-box-shadows)
+- they have different `background-image`,


What's meant by "different"? Are two images with the same URI different, whether it be a data URI or a URL? Do they have to contain different byte sequences? Do they have to subjectively differ in what they depict?

We've added an assumption to the definition.

_rules/inline_link_in_paragraph_is_distinguishable_be4d0c.md

WilcoFiers

OK, so I don't know if I caught it all, but I caught a bunch. :-)

WilcoFiers · 2019-11-12T11:53:57Z

_rules/inline_link_in_paragraph_is_distinguishable_be4d0c.md

+This rule applies to any HTML element which:
+
+- has the [semantic role][] of ['link'][link] or a [semantic role][] that inherits from the ['link'][link] role; and
+- is a [descendant][] of a `p` element; and


Why is this limited to p elements? Wouldn't this apply just as well to td or li or even just div elements? It seems to me like you didn't quite capture the essence of what you need to test. I think we should come up with a definition of inline links.

The initial version used "block of text" which we found to be ambiguous. So we opted to focus this rule on paragraphs (it's even in the name). When we get this done, we can then move to another "blocks of text".

We're including li and td but leaving out div because you can have all content of a page being a descendant of the same div.

_rules/inline_link_in_paragraph_is_distinguishable_be4d0c.md

WilcoFiers · 2019-11-12T11:57:46Z

_rules/inline_link_in_paragraph_is_distinguishable_be4d0c.md

+- An icon immediately before, after or in the link denoting it as a link
+- Text immediately before, after or in the link denoting it as a link
+- a [distinguishing style][] compared to the other text not based on color alone
+- a different color compared to the rest of the text in the paragraph that has at least a 3:1 [contrast ratio](https://www.w3.org/TR/WCAG21/#dfn-contrast-ratio) difference with the rest of the text and a [distinguishing style][] both when the target element [gains focus][gain focus] and the target element is [hovered][]


This is assuming the rest of the text has a single color.

That is correct. If the rest of the text has more than one color then color can't be a distinguishing factor. Need to add that assumption to the text of the expectation.

WilcoFiers · 2019-11-12T11:58:19Z

_rules/inline_link_in_paragraph_is_distinguishable_be4d0c.md

+- An icon immediately before, after or in the link denoting it as a link
+- Text immediately before, after or in the link denoting it as a link
+- a [distinguishing style][] compared to the other text not based on color alone
+- a different color compared to the rest of the text in the paragraph that has at least a 3:1 [contrast ratio](https://www.w3.org/TR/WCAG21/#dfn-contrast-ratio) difference with the rest of the text and a [distinguishing style][] both when the target element [gains focus][gain focus] and the target element is [hovered][]


This needs a definition that describes what the color of text is.

Even if the text is all of the same color?

WilcoFiers · 2019-11-12T12:01:12Z

_rules/inline_link_in_paragraph_is_distinguishable_be4d0c.md

+
+## Assumptions
+
+This rule assumes that the link is distinguishable from the rest of the text with color, which means it fails SC 1.4.1 when there is not another way to distinguish it.


I don't understand this assumption. The expectation tests for color.

The expectation is indeed testing for color, but it needs to be a contrast ratio of at least 3:1 for the expectation to be met.

If we leave this assumption out of it; there could be a scenario where the link is not(!) a different color from the rest of the text and this rule would fail it even though it should not fail the SC. (Because you should only fail this SC if you communicate something with color without communicating it in a different way.

Does that help you understand this assumption?

indeed, if the link is the same color as the surrounding text, this rule is not applicable (it's an odd gap in WCAG since in those cases it's deemed that the link is indistinguishable for all sighted users, not just those with color deficiency/vision impairment that requires at least a 3:1 contrast - though paradoxically keyboard/AT users are advantages because THEY can get to the links without any problem)

WilcoFiers · 2019-11-12T12:23:18Z

pages/glossary/distinguishing-styles.md

@@ -0,0 +1,11 @@
+--
+title: Distinguishing Styles


Instead of having this definition use three other definitions, I think this should be a single definition. I don't think we currently have a use for those three as separate definitions. Even if at some point in the future we need it, we can split it out then.

Even if don't have another use for these defintions, it is much easier to read the definitions if they are split like this. Don't you think that it makes it worth to have them split?

I also prefer the split up version, but it's mainly a personal choice.

pages/glossary/distinguishing-styles.md

pages/glossary/hovered.md

pages/glossary/distinguishing-styles.md

WilcoFiers · 2019-11-12T12:36:27Z

_rules/inline_link_in_paragraph_is_distinguishable_be4d0c.md

+
+- An icon immediately before, after or in the link denoting it as a link
+- Text immediately before, after or in the link denoting it as a link
+- a [distinguishing style][] compared to the other text not based on color alone


The distinguishing style definition compares two elements, here you are comparing the link element to text nodes. I don't think that works. Do you mean to compare the link element to the parent element of the text node? If so, there are a bunch of problems with the distinguishing style definition that needs to be worked through. For example:

<style> * { box-shadow: #F00 0 0 5px; color: black; } a { text-decoration: none; } </style> <p>Lorem ipsum <a href="">dolar sit amet</a> consectetur.</p>

This link is still distinguishable, because it's shadow is an inline one, whereas the shadow of the rest of the text is on the block.

Updated the expectation (and assumptions) for

comparing elements instead of element and text nodes

usage of border and box-shadow as distinguishing factors

Rule updated based on changes requested

DagfinnRomen

Some editorials.

_rules/inline_link_in_paragraph_is_distinguishable_be4d0c.md

DagfinnRomen · 2019-12-04T18:11:27Z

_rules/inline_link_in_paragraph_is_distinguishable_be4d0c.md

+</html>
+```
+
+### Inapplicable


I do not see the need to remove the underline from examples 3 - 6. By keeping the underline, the test cases focus on the relevant parts of the (in)applicability.

I would suggest adding an inapplicable test case with a link that is not distunguised using colour. I see that this is handled as an assumption and may not need its own test case?

_rules/inline_link_in_paragraph_is_distinguishable_be4d0c.md

kasperisager · 2019-12-10T12:43:26Z

_rules/inline_link_in_paragraph_is_distinguishable_be4d0c.md

+
+Each target element has either:
+
+- content (such as an image or text) inside, or immediately before or after the test target, that identifies it as a link; or


I think this could be made a little more unambiguous.

What exactly do you think it's ambiguous here?

content (such as an image or text) inside [...]

"Content" by itself is pretty broad and open to interpretation. Given that the rule explicitly refers to "content [...] that identifies [the link] as a link", on second thought I don't think that's an issue though.

[...] immediately before or after the test target [...].

In visual order or in tree order?

_rules/inline_link_in_paragraph_is_distinguishable_be4d0c.md

kasperisager · 2019-12-10T13:53:36Z

_rules/inline_link_in_paragraph_is_distinguishable_be4d0c.md

+- a `box-shadow` style property with a color value different from `transparent` or the `background-color` of the target element; or
+- a `border` style property with a color value different from `transparent` or the `background-color` of the target element; or
+- a different color, compared to the color of the other descendant visible text nodes of the same _ancestor_ element (if all have the same color), that has at least a 3:1 [contrast ratio](https://www.w3.org/TR/WCAG21/#dfn-contrast-ratio) and a [distinguishing style][] both when the target element [gains focus][focused] and the target element is [hovered][]; or
+- a different background color, compared to the background color of the other descendant visible text nodes of the same _ancestor_ element (if all have the same background color), that has at least a 3:1 [contrast ratio](https://www.w3.org/TR/WCAG21/#dfn-contrast-ratio) and a [distinguishing style][] both when the target element [gains focus][focused] and the target element is [hovered][].


The terms "color" and "background color" are not defined. I imagine we'd want to use the definitions of "foreground color" and "background color" from #833?

The expectation is currently unclear on at least two important points:

How to deal with short-/longhands? We inconsistently refer to both a shorthand (border) and a longhand (box-shadow) property. I'm thinking we'd want to only ever refer to longhands as these are what conformant implementations of CSS must expand to anyway (https://drafts.csswg.org/css-cascade/#shorthand and https://drafts.csswg.org/cssom/#concept-declarations-specified-order).

How to deal with semi-transparent border and box shadow colors in which case alpha compositing comes into play? One of the points about the definitions of "foreground color" and "background color" as defined by New rule: Text nodes have minimal contrast #833 was to avoid having to explicitly deal with alpha compositing at the rule level. If we refer to specific CSS properties, there's not really a way around this as I see it though.

The (foreground and background) color definitions in #833 might return multiple colors. Initially, I thought that would be a problem for this rule. But given that there is an assumption stating that if multiple colors are in use then color can't be a distinguishing factor then that problem goes away and I believe I can rewrite the expectation using #833 definitions.

Agreed with using only longhand properties. Replaced border-color by the corresponding longhand properties.

danistr

Agree with the comments so far. Approve probably when applied

Updated based on requested changes

daniel-montalvo

I think @joao-vicente was referring to @danistr , your input would be very much appreciated since you requested some changes.

From my side, just a couple of things that called my attention.

_rules/inline_link_in_paragraph_is_distinguishable_be4d0c.md

daniel-montalvo · 2020-01-22T09:38:41Z

_rules/inline_link_in_paragraph_is_distinguishable_be4d0c.md

+```html
+<html>
+	<head>
+		<title>Passed example 2 for rule be4d0c</title>


Maybe I am missing something, but why are the head and title elements needed for Passed example 2 and not for passed example 1. If there is the need to have specific styles, they could be added using the <style> element. I think this is what @WilcoFiers means here. We use to include only the HTML/CSS/JavaScript chunk of code that is necessary for the example to be interpreted and understood.

Requested changes made

carlosapaduarte · 2021-01-18T17:58:06Z

With the PR w3c/wcag#1500 having been merged we are free to continue working this rule. I've updated it to expect that the styles are different in every state (hover or focused) and kept it as considering hue only for applicability (and color for expectation).

@WilcoFiers @Jym77 @daniel-montalvo this is ready for another round of reviews.

changes made

Jym77

Mostly suggesting to wait a bit until we decide how to handle states.

_rules/inline-link-in-paragraph-is-distinguishable-be4d0c.md

Jym77 · 2021-01-19T13:52:47Z

_rules/inline-link-in-paragraph-is-distinguishable-be4d0c.md


 ## Expectation 2

 Either the test target does not match the [`:any-link` pseudo-class](https://drafts.csswg.org/selectors-4/#any-link-pseudo), or Expectation 1 holds for each [link history state][] with a **different hue**.

+## Expectation 3
+
+Expectation 1 holds irrespectively of the test target being [focused][] or [hovered][].


Just to make it clear, I understand that this requires the 4 states to be valid, correct?

Jym77 · 2021-01-19T13:55:15Z

_rules/inline-link-in-paragraph-is-distinguishable-be4d0c.md


 ## Expectation 2

 Either the test target does not match the [`:any-link` pseudo-class](https://drafts.csswg.org/selectors-4/#any-link-pseudo), or Expectation 1 holds for each [link history state][] with a **different hue**.

+## Expectation 3
+
+Expectation 1 holds irrespectively of the test target being [focused][] or [hovered][].


It's not fully clear how Expectation 2 and 3 work together.
I guess the intend is to have correct indication in the 8 possible states?

I suggest we wait until Thursday's join call to figure what to do.

Correct once again. I split the "state handling" part of the rule into 2 different expectations to make it easier to read (given that the 2 dimensions link/visited and hover/focus are independent).

But with Expectation 3 referring only to Expectation 1, it is not clear that, say :visited and :focus should be OK.

(also, hover/focus are actually 2 independent dimensions, if we want one expectation per dimension, we could split them)

I was thinking that just as soon as I sent my message.
Probably the best way to handle this is move expectation 3 to expectation 2, and then have expectation 3 (link/visited) requesting expectation 2 to hold.

But I agree that it's best to leave this to after Thursday's meeting.

Jym77 · 2021-01-19T13:56:15Z

_rules/inline-link-in-paragraph-is-distinguishable-be4d0c.md

+For each test target there exists at least one element with a [distinguishable style][] from each **non-link line text** elements for which one of the following is true:
+
+- the element is a [visible][] [inclusive descendant][] of the test target; or
+- the element is [ancestor][] of the test target that is not simultaneously an [ancestor][] of the **non-link line text** elements.


Suggested change

- the element is [ancestor][] of the test target that is not simultaneously an [ancestor][] of the **non-link line text** elements.

- the element is an [ancestor][] of the test target that is not simultaneously an [ancestor][] of the **non-link line text** elements.

Jym77 · 2021-01-19T13:56:40Z

_rules/inline-link-in-paragraph-is-distinguishable-be4d0c.md

+For each test target there exists at least one element with a [distinguishable style][] from each **non-link line text** elements for which one of the following is true:
+
+- the element is a [visible][] [inclusive descendant][] of the test target; or
+- the element is [ancestor][] of the test target that is not simultaneously an [ancestor][] of the **non-link line text** elements.


Suggested change

- the element is [ancestor][] of the test target that is not simultaneously an [ancestor][] of the **non-link line text** elements.

- the element is an [ancestor][] of the test target that is not simultaneously an [ancestor][] of the **non-link line text** elements.

Jym77 · 2021-01-19T13:57:19Z

_rules/inline-link-in-paragraph-is-distinguishable-be4d0c.md

+For each test target there exists at least one element with a [distinguishable style][] from each **non-link line text** elements for which one of the following is true:
+
+- the element is a [visible][] [inclusive descendant][] of the test target; or
+- the element is [ancestor][] of the test target that is not simultaneously an [ancestor][] of the **non-link line text** elements.


Suggested change

- the element is [ancestor][] of the test target that is not simultaneously an [ancestor][] of the **non-link line text** elements.

- the element is an [ancestor][] of the test target that is not simultaneously an [ancestor][] of the **non-link line text** elements.

Jym77 · 2021-01-19T14:00:46Z

🙈 Gaaaaaah Github was trigger-happy today. Sorry.

Co-authored-by: Jean-Yves Moyen <jym@siteimprove.com>

kasperisager · 2021-06-25T11:57:08Z

It just dawned on me that this rule doesn't yet seem like it would accept a difference in cursor presented as a distinguishing style. Consider the following example:

<style>
  a {
    color: black;
  }

  a:hover {
    text-decoration: none;
  }
</style>

<p>Hello <a href="https://example.com">world</a></p>

When the above link is hovered, the text decoration disappears, which is extremely common. When hovered, the link therefore doesn't seem like it would be considered distinguishable from the surrounding text by the rule. However, the cursor by default changes to a "pointer", prompting for an action and serving as a distinguishing feature for the link.

Thoughts?

Jym77 · 2021-06-25T12:14:03Z

The ACT rule never considered the pointer change as good enough… If we do, we can basically stop testing on hover…

kasperisager · 2021-06-25T12:28:19Z

Well, it's still possible to do crazy things like this:

<style>
  a {
    color: black;
  }

  a:hover {
    text-decoration: none;
    cursor: default;
  }
</style>

<p>Hello <a href="https://example.com">world</a></p>

Now the cursor doesn't change on hover 😔

Edit: This is already being discussed here: w3c/wcag#1761

carlosapaduarte added the Rule Use this label for a new rule that does not exist already label Nov 7, 2019

carlosapaduarte assigned carlosapaduarte and ShadowBB Nov 7, 2019

ShadowBB changed the title ~~Create inline_link_in_paragraph_is_distinguishable_ be4d0c.md~~ [WIP] New Rule: inline link in paragraph is distinguishable be4d0c Nov 7, 2019

carlosapaduarte added the reviewers wanted label Nov 7, 2019

carlosapaduarte changed the title ~~[WIP] New Rule: inline link in paragraph is distinguishable be4d0c~~ New Rule: inline link in paragraph is distinguishable be4d0c Nov 7, 2019

ShadowBB assigned danistr Nov 7, 2019

ShadowBB requested a review from danistr November 7, 2019 13:47

ShadowBB unassigned danistr Nov 7, 2019

ShadowBB requested review from DagfinnRomen, jeeyyy and kasperisager November 7, 2019 13:49

carlosapaduarte requested a review from WilcoFiers November 11, 2019 13:16

kasperisager previously requested changes Nov 11, 2019

View reviewed changes

WilcoFiers previously requested changes Nov 12, 2019

View reviewed changes

carlosapaduarte requested review from WilcoFiers and kasperisager November 26, 2019 11:09

DagfinnRomen reviewed Dec 4, 2019

View reviewed changes

kasperisager previously requested changes Dec 10, 2019

View reviewed changes

danistr reviewed Jan 7, 2020

View reviewed changes

carlosapaduarte requested review from kasperisager, DagfinnRomen and danistr January 11, 2020 16:38

daniel-montalvo self-requested a review January 20, 2020 13:22

daniel-montalvo previously requested changes Jan 22, 2020

View reviewed changes

carlosapaduarte requested a review from daniel-montalvo January 22, 2020 10:32

carlosapaduarte added 7 commits January 18, 2021 16:01

Merge branch 'develop' into inline_link_in_paragraph_is_distinguishable

8180548

clarify that expectation must hold when the link is hovered or focused

c8c4d9e

clarify expectation 1

1128a9f

update examples to meet expectation 3

a720cfc

clarify definition of different hue

5c395de

Update distinguishable-colors.md

9a12699

Update text-style-properties.md

a5981ed

carlosapaduarte requested a review from Jym77 January 18, 2021 17:55

carlosapaduarte added 2 commits January 18, 2021 18:00

Delete inspection-states.md

397d827

Update spelling-ignore.yml

b44dad6

Jym77 requested changes Jan 19, 2021

View reviewed changes

Apply suggestions from code review

0f6d655

Co-authored-by: Jean-Yves Moyen <jym@siteimprove.com>

carlosapaduarte requested a review from WilcoFiers January 19, 2021 15:04

reorder expectations

ef61374

kasperisager mentioned this pull request Jan 25, 2021

Update SIA-R62 according to latest ACT-R draft Siteimprove/alfa#668

Closed

1 task

trying out using states

4b64bba

Jym77 removed the reviewers wanted label Mar 11, 2021

kasperisager mentioned this pull request Jun 29, 2021

G183: Change mouse Pointer = hovering over the link causes a visual enhancement? w3c/wcag#1761

Open

carlosapaduarte added the Blocked Blocked by another PR/Issue label Mar 1, 2022

tbostic32 mentioned this pull request Apr 21, 2022

Stateful Applicability and Expectation #1836

Open

This was referenced Sep 8, 2022

Error field is not identified using color differences only #1914

Closed

Update act-rules-format.md for mapping secondary accessibility requirements w3c/wcag-act#531

Merged


		## Assumptions

		This rule assumes that the link is distinguishable from the rest of the text with color, which means it fails SC 1.4.1 when there is not another way to distinguish it.


		Each target element has either:

		- content (such as an image or text) inside, or immediately before or after the test target, that identifies it as a link; or

	- the element is [ancestor][] of the test target that is not simultaneously an [ancestor][] of the non-link line text elements.
	- the element is an [ancestor][] of the test target that is not simultaneously an [ancestor][] of the non-link line text elements.

New Rule: inline link in paragraph is distinguishable be4d0c #1010

Are you sure you want to change the base?

New Rule: inline link in paragraph is distinguishable be4d0c #1010

Uh oh!

Conversation

carlosapaduarte commented Nov 7, 2019 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Pull Request Etiquette

When creating PR:

After creating PR:

How to Review And Approve

Uh oh!

kasperisager left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

WilcoFiers left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

carlosapaduarte Nov 19, 2019 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

DagfinnRomen left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

carlosapaduarte commented Nov 7, 2019 •

edited

Loading

carlosapaduarte Nov 19, 2019 •

edited

Loading