{"action":"created","issue":{"url":"https://api.github.com/repos/auto-wcag/auto-wcag/issues/92","repository_url":"https://api.github.com/repos/auto-wcag/auto-wcag","labels_url":"https://api.github.com/repos/auto-wcag/auto-wcag/issues/92/labels{/name}","comments_url":"https://api.github.com/repos/auto-wcag/auto-wcag/issues/92/comments","events_url":"https://api.github.com/repos/auto-wcag/auto-wcag/issues/92/events","html_url":"https://github.com/auto-wcag/auto-wcag/issues/92","id":313464187,"number":92,"title":"SC1-4-1-inline-links-distinguishable","user":{"login":"JenniferChadwick","id":38298041,"avatar_url":"https://avatars0.githubusercontent.com/u/38298041?v=4","gravatar_id":"","url":"https://api.github.com/users/JenniferChadwick","html_url":"https://github.com/JenniferChadwick","followers_url":"https://api.github.com/users/JenniferChadwick/followers","following_url":"https://api.github.com/users/JenniferChadwick/following{/other_user}","gists_url":"https://api.github.com/users/JenniferChadwick/gists{/gist_id}","starred_url":"https://api.github.com/users/JenniferChadwick/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/JenniferChadwick/subscriptions","organizations_url":"https://api.github.com/users/JenniferChadwick/orgs","repos_url":"https://api.github.com/users/JenniferChadwick/repos","events_url":"https://api.github.com/users/JenniferChadwick/events{/privacy}","received_events_url":"https://api.github.com/users/JenniferChadwick/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":{"login":"WilcoFiers","id":530687,"avatar_url":"https://avatars1.githubusercontent.com/u/530687?v=4","gravatar_id":"","url":"https://api.github.com/users/WilcoFiers","html_url":"https://github.com/WilcoFiers","followers_url":"https://api.github.com/users/WilcoFiers/followers","following_url":"https://api.github.com/users/WilcoFiers/following{/other_user}","gists_url":"https://api.github.com/users/WilcoFiers/gists{/gist_id}","starred_url":"https://api.github.com/users/WilcoFiers/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/WilcoFiers/subscriptions","organizations_url":"https://api.github.com/users/WilcoFiers/orgs","repos_url":"https://api.github.com/users/WilcoFiers/repos","events_url":"https://api.github.com/users/WilcoFiers/events{/privacy}","received_events_url":"https://api.github.com/users/WilcoFiers/received_events","type":"User","site_admin":false},"assignees":[{"login":"WilcoFiers","id":530687,"avatar_url":"https://avatars1.githubusercontent.com/u/530687?v=4","gravatar_id":"","url":"https://api.github.com/users/WilcoFiers","html_url":"https://github.com/WilcoFiers","followers_url":"https://api.github.com/users/WilcoFiers/followers","following_url":"https://api.github.com/users/WilcoFiers/following{/other_user}","gists_url":"https://api.github.com/users/WilcoFiers/gists{/gist_id}","starred_url":"https://api.github.com/users/WilcoFiers/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/WilcoFiers/subscriptions","organizations_url":"https://api.github.com/users/WilcoFiers/orgs","repos_url":"https://api.github.com/users/WilcoFiers/repos","events_url":"https://api.github.com/users/WilcoFiers/events{/privacy}","received_events_url":"https://api.github.com/users/WilcoFiers/received_events","type":"User","site_admin":false},{"login":"annethyme","id":15611692,"avatar_url":"https://avatars1.githubusercontent.com/u/15611692?v=4","gravatar_id":"","url":"https://api.github.com/users/annethyme","html_url":"https://github.com/annethyme","followers_url":"https://api.github.com/users/annethyme/followers","following_url":"https://api.github.com/users/annethyme/following{/other_user}","gists_url":"https://api.github.com/users/annethyme/gists{/gist_id}","starred_url":"https://api.github.com/users/annethyme/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/annethyme/subscriptions","organizations_url":"https://api.github.com/users/annethyme/orgs","repos_url":"https://api.github.com/users/annethyme/repos","events_url":"https://api.github.com/users/annethyme/events{/privacy}","received_events_url":"https://api.github.com/users/annethyme/received_events","type":"User","site_admin":false}],"milestone":null,"comments":11,"created_at":"2018-04-11T19:52:59Z","updated_at":"2018-05-10T14:50:27Z","closed_at":null,"author_association":"COLLABORATOR","body":"name: Inline links are distinguishable\r\n\r\ndescription: |\r\nThis rule checks that links that are embedded in a block of text and where color alone is used to identify them, have a sufficient color contrast with the surrounding text, and additional cues are given when the link receives focus or hover. \r\n\r\nsuccess_criterion:\r\n\r\n- 1.4.1 # Use of Color\r\n\r\ntest_aspects:\r\n\r\n- Dom Tree \r\n- CSS Styling\r\n\r\nauthors:\r\n- Wilco Fiers\r\n- Jennifer Chadwick\r\n- Anne Thyme Nørregaard\r\n\r\n## Test procedure\r\n\r\n### Applicability\r\n\r\nThe rule applies to any HTML or SVG element with the semantic role of link that lives up to the following criteria:\r\n- is [focusable][]\r\n- is [visible on the page][] when receiving focus\r\n- contains [non-empty][] [text content][] / [rendered text][]\r\n- is in a [block of text][] that has [non-empty][] [rendered text][] that is NOT contained in any link, and which does not exclusively consist of [separator characters][].\r\n\r\n@@@ breaks? (inapplicable test cases)\r\nlink has to be inline text and has to have inline text before or after it that is not itself a link or separator characters.\r\nOR\r\nlink is a part of text run contents that is not itself a link or separator characters \r\n@@@ look at CSS spec (CSS display model)\r\n\r\n- The link (or another element that contains all that link’s content) does not have a [distinguishing style](https://auto-wcag.github.io/auto-wcag/drafts/SC1-4-1-link-style-in-text.html#distinguishing-style), a [distinguishing border](https://auto-wcag.github.io/auto-wcag/drafts/SC1-4-1-link-style-in-text.html#distinguishing-border), or a background-image.\r\n\r\nWe need a definition for [block of text][], that we can refer to both from applicability and expectation 1.\r\nThe link’s nearest [block-like][] [ancestor][]...\r\nhas [non-empty][] [rendered text][] or [phrasing content]() with non-empty rendered text\r\nsomething about if multiple line breaks are used, then we consider \r\n\r\n### Expectation 1\r\n\r\nThe [color contrast][] between either the [color][] of the link and [adjacent][] [phrasing content][] /  [text content][] / [rendered text][] within its [nearest][] block-like ancestor or between the [background color][] of the link and any adjacent phrasing content within its nearest block-like ancestor is more than 3:1. \r\n\r\n### Expectation 2\r\n\r\nWhen the link receives focus, it has a distinguishing border, a background-image, or a distinguishing style.\r\n\r\n### Expectation 3\r\n\r\nWhen the mouse pointer triggers the link hover state, the link has a distinguishing border, a background-image, or a distinguishing style.\r\n\r\n## Assumptions\r\n\r\n- This test assumes that the 3:1 color contrast difference between link text and surrounding text is minimal to what would be sufficient to meet WCAG 2.0. This value is part of technique G183, but is not specified in the 1.4.1 success criterion. @@@ Align with algorithms\r\n- This tests assumes that one of the following shorthand CSS properties (or the related expanded properties e.g. background-color) is used to make the link visually evident: background, color, font, or text-decoration. @@@ Align with algorithms\r\n- This test assumes that any change in font is sufficiently distinguishable, and that fonts are loaded when they are present. @@@ Align with algorithms\r\n- Use of a border, of 1 or more pixels, not set to none, and not with a color of transparent, is assumed to be sufficiently distinguishable @@@ Align with algorithms\r\n\r\n## Accessibility Support\r\n\r\nThere are no major accessibility support issues known for this rule.\r\n\r\n## Background\r\n\r\n- [G183: Using a contrast ratio of 3:1 with surrounding text and providing additional visual cues on focus for links or controls where color alone is used to identify them](http://www.w3.org/TR/WCAG20-TECHS/G183.html) \r\n- [F73: Failure of Success Criterion 1.4.1 due to creating links that are not visually evident without color vision](https://www.w3.org/TR/2014/NOTE-WCAG20-TECHS-20140311/F73.html)\r\n- [C15: Using CSS to change the presentation of a user interface component when it receives focus](https://www.w3.org/TR/WCAG20-TECHS/C15.html) \r\n\r\n## Test Cases\r\n\r\n### Passed\r\n\r\n```html\r\n<p>This is a block of text with an embedded <a href=\"http://w3.org/WAI\">link text</a>.</p>\r\n```\r\n\r\n```html\r\n<head>\r\n<style>\r\np {\r\n    background-color: white;\r\n}\r\n\r\na:link {\r\n    color: blue;\r\n    text-decoration: none;\r\n}\r\n\r\na:hover {\r\n    text-decoration: underline;\r\n}\r\n\r\na:focus {\r\n    text-decoration: underline;\r\n}\r\n</style>\r\n</head>\r\n\r\n<body>\r\n\r\n<p>This is a block of text with an embedded <a href=\"http://w3.org/WAI\">link text</a>.</p>\r\n\r\n</body>\r\n```\r\n\r\n```html\r\n<head>\r\n<style>\r\np {\r\n    background-color: white;\r\n}\r\n\r\na:link {\r\n    color: blue;\r\n    text-decoration: none;\r\n}\r\n\r\na:hover {\r\n    text-decoration: underline;\r\n}\r\n</style>\r\n</head>\r\n\r\n<body>\r\n\r\n<p>A<a href=\"http://w3.org/WAI\"> link text</a></p>\r\n\r\n</body>\r\n```\r\n\r\n```html\r\n<head>\r\n<style>\r\np {\r\n    background-color: white;\r\n}\r\n\r\na:link {\r\n    color: blue;\r\n    text-decoration: none;\r\n}\r\n\r\na:hover {\r\n    border-bottom: 1px solid blue;\r\n}\r\n</style>\r\n</head>\r\n\r\n<body>\r\n\r\n<p>This is a block of text with an embedded <a href=\"http://w3.org/WAI\">link text</a>.</p>\r\n\r\n</body>\r\n```\r\n\r\n```html\r\n<head>\r\n<style>\r\np {\r\n    background-color: white;\r\n}\r\n\r\na:link {\r\n    color: blue;\r\n    text-decoration: none;\r\n    font-family: \"Times New Roman\", Times, serif;\r\n}\r\n\r\na:hover {\r\n    font-family: Arial, Helvetica, sans-serif;\r\n}\r\n</style>\r\n</head>\r\n\r\n<body>\r\n\r\n<p>This is a block of text with an embedded <a href=\"http://w3.org/WAI\">link text</a>.</p>\r\n\r\n</body>\r\n```\r\n\r\n```html\r\n<head>\r\n<style>\r\np {\r\n    background-color: white;\r\n}\r\n\r\na:link {\r\n    color: blue;\r\n    text-decoration: none;\r\n    font-weight: normal;\r\n}\r\n\r\na:hover {\r\n    font-weight: bold;\r\n}\r\n</style>\r\n</head>\r\n\r\n<body>\r\n\r\n<p>This is a block of text with an embedded <a href=\"http://w3.org/WAI\">link text</a>.</p>\r\n\r\n</body>\r\n```\r\n```html\r\n<head>\r\n<style>\r\np {\r\n    background-color: white;\r\n}\r\n\r\na:link {\r\n    color: blue;\r\n    text-decoration: none;\r\n    font-style: normal;\r\n}\r\n\r\na:hover {\r\n    font-style: italic;\r\n}\r\n</style>\r\n</head>\r\n\r\n<body>\r\n\r\n<p>This is a block of text with an embedded <a href=\"http://w3.org/WAI\">link text</a>.</p>\r\n\r\n</body>\r\n```\r\n\r\n```html\r\n<head>\r\n<style>\r\np {\r\n    background-color: white;\r\n}\r\n\r\na:link {\r\n    color: blue;\r\n    text-decoration: none;\r\n}\r\n\r\na:hover {\r\n    background-color: red;\r\n}\r\n</style>\r\n</head>\r\n\r\n<body>\r\n\r\n<p>This is a block of text with an embedded <a href=\"http://w3.org/WAI\">link text</a>.</p>\r\n\r\n</body>\r\n```\r\n\r\n```html\r\n<head>\r\n<style>\r\np {\r\n    background-color: white;\r\n}\r\n\r\na:link {\r\n    color: blue;\r\n    text-decoration: none;\r\n}\r\n\r\na:hover {\r\n    background-image: url(\"arrow.gif\");\r\n}\r\n</style>\r\n</head>\r\n\r\n<body>\r\n\r\n<p>This is a block of text with an embedded <a href=\"http://w3.org/WAI\">link text</a>.</p>\r\n\r\n</body>\r\n```\r\n\r\n```html\r\n<head>\r\n<style>\r\np {\r\n    background-color: white;\r\n}\r\n\r\nbutton {\r\n     background:none;\r\n     color:blue;\r\n     border:none; \r\n     padding:0;\r\n     font: inherit;\r\n     cursor: pointer;\r\n}\r\n\r\nbutton:hover {\r\n    text-decoration: underline;\r\n}\r\n</style>\r\n</head>\r\n\r\n<body>\r\n\r\n<p>This is a block of text with an embedded <button role=\"link\">button that acts like a link</button>.</p>\r\n\r\n</body>\r\n```\r\n\r\n### Failed\r\n\r\n@@@ split out <a> and a: link underlined\r\n```html\r\n<head>\r\n<style>\r\np {\r\n    background-color: white;\r\n}\r\n\r\na:link {\r\n    color: yellow;\r\n    text-decoration: none;\r\n}\r\n\r\na:hover {\r\n    text-decoration: underline;\r\n}\r\n</style>\r\n</head>\r\n\r\n<body>\r\n\r\n<p>This is a block of text with an embedded <a href=\"http://w3.org/WAI\">link text</a>.</p>\r\n\r\n</body>\r\n```\r\n\r\n```html\r\n<head>\r\n<style>\r\np {\r\n    background-color: white;\r\n}\r\n\r\na:link {\r\n    color: yellow;\r\n    text-decoration: none;\r\n}\r\n\r\na:focus {\r\n    text-decoration: underline;\r\n}\r\n</style>\r\n</head>\r\n\r\n<body>\r\n\r\n<p>This is a block of text with an embedded <a href=\"http://w3.org/WAI\">link text</a>.</p>\r\n\r\n</body>\r\n```\r\n\r\n```html\r\n<head>\r\n<style>\r\np {\r\n    background-color: white;\r\n}\r\n\r\na:link {\r\n    color: blue;\r\n    text-decoration: none;\r\n}\r\n\r\n</style>\r\n</head>\r\n\r\n<body>\r\n\r\n<p>This is a block of text with an embedded <a href=\"http://w3.org/WAI\">link text</a>.</p>\r\n\r\n</body>\r\n```\r\n\r\n\r\n### Inapplicable \r\n\r\n```html\r\n<head>\r\n<style>\r\np {\r\n    background-color: white;\r\n}\r\n\r\na:link {\r\n    color: blue;\r\n    text-decoration: none;\r\n}\r\n\r\na:hover {\r\n    text-decoration: underline;\r\n}\r\n</style>\r\n</head>\r\n\r\n<body>\r\n\r\n<p>This is a block of text with an embedded <a>a element without href attribute</a>.</p>\r\n\r\n</body>\r\n```\r\n\r\n```html\r\n<head>\r\n<style>\r\np {\r\n    background-color: white;\r\n}\r\n\r\na:link {\r\n    color: blue;\r\n    text-decoration: none;\r\n}\r\n\r\na:hover {\r\n    text-decoration: underline;\r\n}\r\n</style>\r\n</head>\r\n\r\n<body>\r\n\r\n<p>This is a block of text with an embedded <a href=\"http://w3.org/WAI\" role=\"button\">link that has had its role changed</a>.</p>\r\n\r\n</body>\r\n```\r\n\r\n```html\r\n<head>\r\n<style>\r\np {\r\n    background-color: white;\r\n}\r\n\r\na:link {\r\n    color: blue;\r\n    text-decoration: none;\r\n}\r\n\r\na:hover {\r\n    text-decoration: underline;\r\n}\r\n</style>\r\n</head>\r\n\r\n<body>\r\n\r\n<p style=\"display:none\">This is a non-visible block of text with an embedded <a href=\"http://w3.org/WAI\">link text</a>.</p>\r\n\r\n</body>\r\n```\r\n\r\n```html\r\n```html\r\n<head>\r\n<style>\r\np {\r\n    background-color: white;\r\n}\r\n\r\n@@@ fix styles here!\r\na:link {\r\n    color: blue;\r\n    text-decoration: none;\r\n}\r\n\r\na:hover {\r\n    text-decoration: underline;\r\n}\r\n</style>\r\n</head>\r\n\r\n<body>\r\n\r\n<p >This is a non-visible block of text with an embedded <div role=\"link\">link</div>.</p>\r\n\r\n</body>\r\n```\r\n\r\n```html\r\n<head>\r\n<style>\r\np {\r\n    background-color: white;\r\n}\r\n\r\na:link {\r\n    color: blue;\r\n    text-decoration: none;\r\n}\r\n\r\na:hover {\r\n    text-decoration: underline;\r\n}\r\n</style>\r\n</head>\r\n\r\n<body>\r\n\r\n<p>This is a block of text<a href=\"http://w3.org/WAI\"></a>.</p>\r\n\r\n</body>\r\n```\r\n\r\n\r\n```html\r\n<head>\r\n<style>\r\np {\r\n    background-color: white;\r\n}\r\n\r\na:link {\r\n    text-decoration: underline;\r\n}\r\n</style>\r\n</head>\r\n\r\n<body>\r\n\r\n<p>This is a block of text with an embedded <a href=\"http://w3.org/WAI\">link text</a>.</p>\r\n\r\n</body>\r\n```\r\n\r\n```html\r\n<head>\r\n<style>\r\na:link {\r\n    text-decoration: none;\r\n}\r\n</style>\r\n</head>\r\n\r\n<body>\r\n\r\n<p>This is a block of text with an embedded <span style=\"text-decoration: underline;\"><a href=\"http://w3.org/WAI\">link text that is underlined</a><span>.</p>\r\n\r\n</body>\r\n```\r\n\r\n```html\r\n<head>\r\n<style>\r\na:link {\r\n    text-decoration: none;\r\n}\r\n</style>\r\n</head>\r\n\r\n<body>\r\n\r\n<p><a href=\"http://w3.org/WAI\">link 1</a> | <a href=\"http://w3.org/WAI\">link 2</a>.</p>\r\n\r\n</body>\r\n```\r\n\r\n```html\r\n<head>\r\n<style>\r\na:link {\r\n    text-decoration: none;\r\n}\r\n</style>\r\n</head>\r\n\r\n<body>\r\n\r\n<p>This is a block of text with an embedded <a href=\"http://w3.org/WAI\"><span style=\"text-decoration: underline;\">link text that is underlined<span></a>.</p>\r\n\r\n</body>\r\n```\r\n\r\n@@@ add a:focus test cases for Passed test cases\r\n@@@ fix up text color in first failed test case\r\n@@@ comments in test cases about why they are failing\r\n\r\n[visible on the page]: ../pages/algorithms/visible-on-page.html\r\n[color]: ../pages/algorithms/color.html\r\n[focusable]: ../pages/algorithms/focusable.html\r\n[non-empty]: ../pages/algorithms/non-empty.html\r\n[text content]: ../pages/algorithms/text-content.html\r\n[rendered text]: ../pages/algorithms/rendered-text.html\r\n[separator characters]: ../pages/algorithms/separator-characters.html\r\n[adjacent]: ../pages/algorithms/adjacent.html\r\n[phrasing content]: ../pages/algorithms/phrasis-content.html\r\n[nearest]: ../pages/algorithms/nearest.html\r\n[block-like]: ../pages/algorithms/block-like.html\r\n[ancestor]: ../pages/algorithms/ancestor.html\r\n[background color]: ../pages/algorithms/background-color.html\r\n[seperator characters]: ../pages/algorithms/seperator-characters.html\r\n[adjacent]: ../pages/algorithms/adjacent.html\r\n[color contrast]: ../pages/algorithms/color-contrast.html"},"comment":{"url":"https://api.github.com/repos/auto-wcag/auto-wcag/issues/comments/388077017","html_url":"https://github.com/auto-wcag/auto-wcag/issues/92#issuecomment-388077017","issue_url":"https://api.github.com/repos/auto-wcag/auto-wcag/issues/92","id":388077017,"user":{"login":"kasperisager","id":1174718,"avatar_url":"https://avatars0.githubusercontent.com/u/1174718?v=4","gravatar_id":"","url":"https://api.github.com/users/kasperisager","html_url":"https://github.com/kasperisager","followers_url":"https://api.github.com/users/kasperisager/followers","following_url":"https://api.github.com/users/kasperisager/following{/other_user}","gists_url":"https://api.github.com/users/kasperisager/gists{/gist_id}","starred_url":"https://api.github.com/users/kasperisager/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/kasperisager/subscriptions","organizations_url":"https://api.github.com/users/kasperisager/orgs","repos_url":"https://api.github.com/users/kasperisager/repos","events_url":"https://api.github.com/users/kasperisager/events{/privacy}","received_events_url":"https://api.github.com/users/kasperisager/received_events","type":"User","site_admin":false},"created_at":"2018-05-10T14:50:27Z","updated_at":"2018-05-10T14:50:27Z","author_association":"COLLABORATOR","body":"I think starting off with a robust definition of \"block of text\" would be a good start. Something along the lines of: A block of text is a run of [phrasing content](http://w3c.github.io/html/dom.html#phrasing-content) containing no consecutive [line breaks](http://w3c.github.io/html/textlevel-semantics.html#elementdef-br)."}}
{"actor":{"display_login":"kasperisager"}}