Skip to content

Update F3 "using CSS to include images that convey [...] information" #4814

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
patrickhlauke wants to merge 14 commits into
base: main
Choose a base branch
from
Open

Update F3 "using CSS to include images that convey [...] information" #4814

Changes from all commits
Commits
Show all changes
14 commits
Select commit Hold shift + click to select a range
d0ffd6d
Update F3 check
patrickhlauke Dec 23, 2025
521f1e4
Replace "important" with "relevant" and caveat the tests
patrickhlauke Dec 24, 2025
3aaa37a
Merge branch 'main' into patrickhlauke-f3-tweak
patrickhlauke Jan 25, 2026
0faa0d4
Merge branch 'main' into patrickhlauke-f3-tweak
patrickhlauke Mar 13, 2026
26ac017
Merge branch 'main' into patrickhlauke-f3-tweak
patrickhlauke Mar 26, 2026
372fbed
Update techniques/failures/F3.html
patrickhlauke Mar 27, 2026
341ca60
Apply suggestions from code review
patrickhlauke Mar 27, 2026
6972df3
Apply suggestion from @patrickhlauke
patrickhlauke Mar 27, 2026
74482f8
Merge branch 'main' into patrickhlauke-f3-tweak
patrickhlauke Apr 10, 2026
9b3222d
Merge branch 'main' into patrickhlauke-f3-tweak
patrickhlauke Apr 14, 2026
ef8cdf0
Update techniques/failures/F3.html
patrickhlauke Apr 17, 2026
a700acc
Apply suggestions from code review
patrickhlauke Apr 17, 2026
80aa07b
Apply suggestion from @patrickhlauke
patrickhlauke Apr 17, 2026
2d7c3fb
Update technique title
patrickhlauke Apr 17, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
21 changes: 10 additions & 11 deletions techniques/failures/F3.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,15 +1,15 @@
<!DOCTYPE html><html lang="en"><head><title>Failure of Success Criterion 1.1.1 due to using CSS to include images that convey
important information</title><link rel="stylesheet" type="text/css" href="../../css/editors.css" class="remove"></head><body><h1>Failure of Success Criterion 1.1.1 due to using CSS to include images that convey
important information</h1><section class="meta"><p class="id">ID: F3</p><p class="technology">Technology: failures</p><p class="type">Type: Failure</p></section><section id="applicability"><h2>When to Use</h2>
<!DOCTYPE html><html lang="en"><head><title>Failure of Success Criterion 1.1.1 due to conveying information exclusively using CSS background images</title>
<link rel="stylesheet" type="text/css" href="../../css/editors.css" class="remove"></head><body><h1>Failure of Success Criterion 1.1.1 due to conveying information exclusively using CSS background images</h1>
<section class="meta"><p class="id">ID: F3</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 background-image property provides a way to include images in the
document with CSS without any reference in the HTML code. The CSS
background-image property was designed for decorative purposes and it is not
possible to associate text alternatives with images that are included via
CSS. Text alternatives are necessary for people who cannot see images that
convey important information. Therefore, it is a failure to use this
property to add images to convey important information. This failure would apply equally in a case where the background image was declared in the HTML style attribute, as well as in a case where the background image declaration was created dynamically in a client script (see example 3 below).</p>
convey information that is required to understand the content of the page. Therefore, it is a failure to use this
property to add images to convey this required information. This failure would apply equally in a case where the background image was declared in the HTML style attribute, as well as in a case where the background image declaration was created dynamically in a client script (see example 3 below).</p>
<div class="note">
<p>Embedding information into a background image can also cause problems for people who use alternate backgrounds in order to increase legibility and for users of high contrast mode in some operating systems. These users, would lose the information in the background image due to lack of any alternative text.</p>
</div>
Expand Down Expand Up @@ -89,16 +89,15 @@ <h3></h3>
</section><section id="tests"><h2>Tests</h2>
<section class="procedure"><h3>Procedure</h3>
<ol>
<li> Examine all images added to the content via CSS, HTML style attributes, or dynamically in script as background images. </li>
<li> Check that the images do not convey important information. </li>
<li>If an image does convey important information, the information is
provided to assistive technologies and is also available when the CSS image is
not displayed.</li>
<li>Examine all images added to the content via CSS, HTML style attributes, or dynamically in script as background images. </li>
<li>Check if the images convey information that is not already conveyed elsewhere on the page.</li>
<li>If an image <em>does</em> convey information that is not already conveyed elsewhere on the page,
check that the information is <a>programmatically determinable</a>.</li>
</ol>
</section>
<section class="results"><h3>Expected Results</h3>
<ul>
<li> If checks #2 and #3 are both false, then this failure condition applies and the content fails this Success Criterion. </li>
<li> If check #2 is true and #3 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>
Expand Down
Loading