-
Notifications
You must be signed in to change notification settings - Fork 266
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Restore F87 from #3818 and add obsolete front-matter
- Loading branch information
1 parent
cb03c17
commit 80a9b3f
Showing
1 changed file
with
67 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,67 @@ | ||
| --- | ||
| obsoleteMessage: CSS-generated content does not always constitute a failure, as support for it has improved in user agents and screen readers. It may still present other usability issues, such as unselectable text. | ||
| obsoleteSince: 20 | ||
| --- | ||
| <!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Failure of Success Criterion 1.3.1 due to inserting non-decorative content by using ::before and ::after pseudo-elements and the 'content' property in CSS</title><link rel="stylesheet" type="text/css" href="../../css/editors.css" class="remove"/></head><body><h1>Failure of Success Criterion 1.3.1 due to inserting non-decorative content by using ::before and ::after pseudo-elements and the 'content' property in CSS</h1><section class="meta"><p class="id">ID: F87</p><p class="technology">Technology: failures</p><p class="type">Type: Failure</p></section><section id="applicability"><h2>When to Use</h2> | ||
| <p>All technologies that support CSS.</p> | ||
| </section><section id="description"><h2>Description</h2> | ||
| <p>The CSS <code>::before</code> and <code>::after</code> pseudo-elements specify the location of content before and after an element's document tree content. The content property, in conjunction with these pseudo-elements, specifies what is inserted. For users who need to customize style information in order to view content according to their needs, they may not be able to access the information that is inserted using CSS. Therefore, it is a failure to use these properties to insert non-decorative content.</p> | ||
| <p class="note">A common way to test this critieria is to disable CSS styles to view whether content added using pseudo-elements remains visible.</p> | ||
|
|
||
| </section><section id="examples"><h2>Examples</h2> | ||
| <section class="example"> | ||
|
|
||
| <p>In the following example, <code class="language-css">::before</code> and <code class="language-css">::after</code> are used to indicate speaker changes and to insert quotation marks in a screenplay.</p> | ||
| <p>The CSS contains:</p> | ||
|
|
||
| <pre xml:space="preserve"><code class="language-css">p.jim::before { content: "Jim: " } | ||
| p.mary::before { content: "Mary: " } | ||
| q::before { content: open-quote } | ||
| q::after { content: close-quote }</code></pre> | ||
|
|
||
| <p>It is used in this excerpt:</p> | ||
|
|
||
| <pre xml:space="preserve"><code class="language-html"><p class="jim"> | ||
| <q>Do you think he's going to make it?</q> | ||
| </p> | ||
| <p class="mary"> | ||
| <q>It's not looking good.</q> | ||
| </p></code></pre> | ||
| </section> | ||
| <section class="example"> | ||
|
|
||
| <p>In this example, <code class="language-css">::before</code> is used to differentiate facts from opinions.</p> | ||
| <p>The CSS contains:</p> | ||
|
|
||
| <pre xml:space="preserve"><code class="language-css">p.fact::before { content: "Fact: "; font-weight: bold; } | ||
| p.opinion::before { content: "Opinion: "; font-weight: bold; }</code></pre> | ||
|
|
||
| <p>It is used in this excerpt:</p> | ||
|
|
||
| <pre xml:space="preserve"><code class="language-html"><p class="fact">The defendant was at the scene of the crime when it occurred.</p> | ||
| <p class="opinion">The defendant committed the crime.</p></code></pre> | ||
| </section> | ||
| </section><section id="tests"><h2>Tests</h2> | ||
| <section class="procedure"><h3>Procedure</h3> | ||
| <p>For each instance of content inserted through use of the <code class="language-css">::before</code> and <code class="language-css">::after</code> pseudo-elements and the content property:</p> | ||
| <ol> | ||
| <li>Check that non-decorative information presented by the generated content is available when styles are overridden.</li> | ||
| </ol> | ||
| </section> | ||
| <section class="results"><h3>Expected Results</h3> | ||
| <ul> | ||
| <li>If check #1 is false, then this failure condition applies and the content fails this Success Criterion.</li> | ||
| </ul> | ||
| </section> | ||
| </section><section id="related"><h2>Related Techniques</h2><ul> | ||
| <li><a href="../failures/F3">F3</a></li> | ||
| </ul></section><section id="resources"><h2>Resources</h2> | ||
|
|
||
| <ul> | ||
| <li> | ||
| <a href="https://www.w3.org/TR/selectors-3/#pseudo-elements">Selectors Level 3: 7. Pseudo-elements</a> | ||
| </li> | ||
| </ul> | ||
|
|
||
| </section> | ||
| </body></html> |