From fe47914c6a0418f32ae9fc75772bc9e1000e7c32 Mon Sep 17 00:00:00 2001 From: Jean-Yves Moyen Date: Fri, 14 Jul 2023 11:02:59 +0200 Subject: [PATCH 1/4] Turn visible examples into a rule --- pages/examples/target-is-visible-exuqdg.md | 183 +++++++++++++++++++++ pages/examples/visible.md | 120 -------------- 2 files changed, 183 insertions(+), 120 deletions(-) create mode 100644 pages/examples/target-is-visible-exuqdg.md delete mode 100644 pages/examples/visible.md diff --git a/pages/examples/target-is-visible-exuqdg.md b/pages/examples/target-is-visible-exuqdg.md new file mode 100644 index 00000000000..130240cee50 --- /dev/null +++ b/pages/examples/target-is-visible-exuqdg.md @@ -0,0 +1,183 @@ +--- +id: exuqdg +name: Target is visible +rule_type: atomic +description: | + This rule test the visibility definition +accessibility_requirements: +input_aspects: + - CSSstyling + - DOM Tree +acknowledgments: + authors: + - Jean-Yves Moyen +--- + +## Applicability + +This rule applies to any element with an `id` of `target`. + +## Expectation + +Each target element is [visible][] + +## Assumptions + +There are no assumptions. + +## Accessibility Support + +There are no accessibility support issues known. + +## Background + +This "rule" does not check any accessibility requirement. It is meant to provide examples of the "[visible][]" definition in a programmatic and testable way, so that tool implementers can easily verify that they correctly implement the definition. This "rule" should not be used in any kind of audit and is only meant as a way for implementers to test part of their tools that are not directly tested by any of the true rules. + +## Test Cases + +### Passed Examples + +#### Passed Example 1 + +This `span` element is visible (by default, elements are visible). + +```html +Now you can see me! +``` + +### Failed Examples + +#### Failed Example 1 + +This `span` element is not visible because of the CSS `visibility` property. + +```html + +``` + +#### Failed Example 2 + +This `span` element is not visible because of the CSS `display` property. + +```html + +``` + +#### Failed Example 3 + +This `span` element is not visible because it is positioned off-screen. + +```html +Incredible how you can +``` + +#### Failed Example 4 + +This `span` element is not visible because it is positioned off-screen. + +```html +See right through me +``` + +#### Failed Example 5 + +This `span` element is not visible because it is positioned off-screen. + +```html +When you hear a sound +``` + +#### Failed Example 6 + +This `span` element is not visible because it contains only whitespace and line breaks. + +```html + +
+   + +``` + +#### Failed Example 7 + +This `span` element is not visible because its text content has size 0. + +```html +That you just can't place +``` + +#### Failed Example 8 + +This `span` element is not visible because it has the exact same color as its background. + +```html +Feel something move +``` + +#### Failed Example 9 + +This `span` element is not visible because it has no opacity. + +```html +That you just can't trace +``` + +#### Failed Example 10 + +This `span` element is not visible because it's text is fully transparent. + +```html +When something sits +``` + +#### Failed Example 11 + +This `span` element is not visible because it's size is reduced to zero, and any overflow is hidden. + +```html +On the end of your bed +``` + +#### Failed Example 12 + +This `span` element is not visible because its content is fully indented out of it, and any overflow is hidden. + +```html +Don't turn around +``` + +#### Failed Example 13 + +This `span` element is not visible because it is clipped to zero size. + +```html +When you hear me tread +``` + +#### Failed Example 14 + +This `div` element is not visible because it is scaled to 0%. + +```html +
I'm the invisible man
+``` + +#### Failed Example 15 + +This `div` element is not visible because it is translated out of screen. + +```html +
I'm the invisible man
+``` + +### Inapplicable Examples + +#### Inapplicable Example 1 + +There is no element with an `id` of `target`. + +```html +Hello World +``` + +[visible]: /glossary/#visible diff --git a/pages/examples/visible.md b/pages/examples/visible.md deleted file mode 100644 index fb74ae946f9..00000000000 --- a/pages/examples/visible.md +++ /dev/null @@ -1,120 +0,0 @@ ---- -title: Examples of Visible ---- - -These are examples of the [visible][] definition. The examples presented here are non-normative and not testable. They serve to illustrate some common pitfalls about the definition and to help implementers of ACT rules understand it. - -## Default visibility - -This `span` element is visible (by default, elements are visible). - -```html -Now you can see me! -``` - -## Hidden with CSS visibility - -This `span` element is not visible because of the CSS `visibility` property. - -```html -I'm the invisible man -``` - -## Hidden with CSS display - -This `span` element is not visible because of the CSS `display` property. - -```html -I'm the invisible man -``` - -## Hidden with CSS position - -These `span` elements are not visible because they are positioned off-screen. Note that depending on device size and actual position of the `span` elements, they might be visible on some larger device or long pages. - -```html -Incredible how you can -``` - -```html -See right through me -``` - -```html -When you hear a sound -``` - -## Hidden due to a lack of content - -This `span` element is not visible because it contains only whitespace and line breaks. - -```html - -
-   - -``` - -This `span` element is not visible because its text content has size 0. - -```html -That you just can't place -``` - -## Hidden due to matching colors - -This `span` element is not visible because it has the exact same color as its background. - -```html -Feel something move -``` - -## Hidden due to transparency - -This `span` element is not visible because it has no opacity. - -```html -That you just can't trace -``` - -This `span` element is not visible because it's text is fully transparent. - -```html -When something sits -``` - -## Hidden due to clipping - -This `span` element is not visible because it's size is reduced to zero, and any overflow is hidden. - -```html -On the end of your bed -``` - -This `span` element is not visible because its content is fully indented out of it, and any overflow is hidden. - -```html -Don't turn around -``` - -This `span` element is not visible because it is clipped to zero size. - -```html -When you hear me tread -``` - -## Hidden due to transformation - -This `div` element is not visible because it is scaled to 0%. - -```html -
I'm the invisible man
-``` - -This `div` element is not visible because it is translated out of screen. - -```html -
I'm the invisible man
-``` - -[visible]: /glossary/#visible From 5822e7271d9a0b40f3452e5e250c25a8495f0898 Mon Sep 17 00:00:00 2001 From: Jean-Yves Moyen Date: Thu, 30 Nov 2023 13:04:24 +0100 Subject: [PATCH 2/4] Improve frontmatter --- pages/examples/target-is-visible-exuqdg.md | 7 +++---- 1 file changed, 3 insertions(+), 4 deletions(-) diff --git a/pages/examples/target-is-visible-exuqdg.md b/pages/examples/target-is-visible-exuqdg.md index 130240cee50..a180b7e92ab 100644 --- a/pages/examples/target-is-visible-exuqdg.md +++ b/pages/examples/target-is-visible-exuqdg.md @@ -1,12 +1,11 @@ --- id: exuqdg name: Target is visible -rule_type: atomic +rule_type: definition-test description: | - This rule test the visibility definition -accessibility_requirements: + This rule test the "visible" definition input_aspects: - - CSSstyling + - CSS styling - DOM Tree acknowledgments: authors: From 09e00ff5c7e6ee41a4c61472be31955581d58dc5 Mon Sep 17 00:00:00 2001 From: Jean-Yves Moyen Date: Thu, 11 Jan 2024 10:30:08 +0100 Subject: [PATCH 3/4] Clean up --- pages/examples/target-is-visible-exuqdg.md | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/pages/examples/target-is-visible-exuqdg.md b/pages/examples/target-is-visible-exuqdg.md index a180b7e92ab..6d079dabf4b 100644 --- a/pages/examples/target-is-visible-exuqdg.md +++ b/pages/examples/target-is-visible-exuqdg.md @@ -3,13 +3,15 @@ id: exuqdg name: Target is visible rule_type: definition-test description: | - This rule test the "visible" definition + This rule tests the "visible" definition input_aspects: - CSS styling - DOM Tree acknowledgments: authors: - Jean-Yves Moyen + assets: + - The text of the examples is excerpt from the lyrics of the song "I'm the invisible man" (written by Brian May / Freddie Mercury / John Deacon / Roger Taylor). --- ## Applicability @@ -30,7 +32,7 @@ There are no accessibility support issues known. ## Background -This "rule" does not check any accessibility requirement. It is meant to provide examples of the "[visible][]" definition in a programmatic and testable way, so that tool implementers can easily verify that they correctly implement the definition. This "rule" should not be used in any kind of audit and is only meant as a way for implementers to test part of their tools that are not directly tested by any of the true rules. +This "rule" does not check any accessibility requirement. It is meant to provide examples of the "[visible][]" definition in a programmatic and testable way, so that tool implementers can easily verify that they correctly implement the definition. This "rule" should not be used in any kind of audit and is only meant as a way for implementers to test parts of their tools that are not directly tested by any of the actual rules. ## Test Cases From e8904db649f735211a8fca78ba6781797c976304 Mon Sep 17 00:00:00 2001 From: Jean-Yves Moyen Date: Thu, 25 Jan 2024 14:36:38 +0100 Subject: [PATCH 4/4] Apply review comments --- pages/examples/target-is-visible-exuqdg.md | 6 ++++-- pages/glossary/visible.md | 2 +- 2 files changed, 5 insertions(+), 3 deletions(-) diff --git a/pages/examples/target-is-visible-exuqdg.md b/pages/examples/target-is-visible-exuqdg.md index 6d079dabf4b..fcd96e248b7 100644 --- a/pages/examples/target-is-visible-exuqdg.md +++ b/pages/examples/target-is-visible-exuqdg.md @@ -109,10 +109,12 @@ This `span` element is not visible because its text content has size 0. #### Failed Example 8 -This `span` element is not visible because it has the exact same color as its background. +This `span` element is not visible because it has the exact same color as its background. Note that the `div` element, on the other hand, is visible as a blue rectangle on the (default) white background of the page. ```html -Feel something move +
+ Feel something move +
``` #### Failed Example 9 diff --git a/pages/glossary/visible.md b/pages/glossary/visible.md index 5a327290008..7dbf9fbb6dc 100755 --- a/pages/glossary/visible.md +++ b/pages/glossary/visible.md @@ -14,4 +14,4 @@ Content is considered _visible_ if making it fully transparent would result in a [Content is defined in WCAG](https://www.w3.org/TR/WCAG21/#dfn-content). -For more details, see [examples of visible](https://act-rules.github.io/pages/examples/visible/). +For more details, see [examples of visible](https://act-rules.github.io/pages/examples/exuqdg/).