diff --git a/pages/examples/target-is-visible-exuqdg.md b/pages/examples/target-is-visible-exuqdg.md new file mode 100644 index 00000000000..fcd96e248b7 --- /dev/null +++ b/pages/examples/target-is-visible-exuqdg.md @@ -0,0 +1,186 @@ +--- +id: exuqdg +name: Target is visible +rule_type: definition-test +description: | + 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 + +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 parts of their tools that are not directly tested by any of the actual 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. 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 +
+``` + +#### 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 diff --git a/pages/glossary/visible.md b/pages/glossary/visible.md index edddc042df0..df8ca716097 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/WCAG22/#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/).