Skip to content

Implemented the F13 as a 1.1.1 and 1.3.3 failure #5102

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
baldino-m wants to merge 7 commits into
base: main
Choose a base branch
from
Open

Implemented the F13 as a 1.1.1 and 1.3.3 failure #5102

Show file tree
Hide file tree
Changes from 6 commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
a4ea8c5
Implemented the F13 as a 1.1.1 and 1.3.3 failure
baldino-m May 6, 2026
972b1f8
Fixed broken link to understanding page and double 'Note' title
baldino-m May 6, 2026
2a03072
Improved expected results section
baldino-m May 6, 2026
41b25e6
Merge branch 'main' into 4784-f13-is-ambiguous-as-for-what-causes-whi…
patrickhlauke Jun 1, 2026
9bbfa35
Merge branch 'main' into 4784-f13-is-ambiguous-as-for-what-causes-whi…
patrickhlauke Jul 4, 2026
2116ccc
Merge branch 'main' into 4784-f13-is-ambiguous-as-for-what-causes-whi…
patrickhlauke Jul 31, 2026
bff0dd9
Update techniques/failures/F13.html
baldino-m Aug 14, 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
54 changes: 34 additions & 20 deletions techniques/failures/F13.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,11 +1,13 @@
<!DOCTYPE html>
<html lang="en">
<head>
<title>Failure of Success Criterion 1.1.1 and 1.4.1 due to having a text alternative that does not include information that is conveyed by color differences in the image</title>
<title>Failure of Success Criterion 1.1.1 and 1.3.3 due to having a text alternative that provides information
relying on color differences only</title>
<link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove">
</head>
<body>
<h1>Failure of Success Criterion 1.1.1 and 1.4.1 due to having a text alternative that does not include information that is conveyed by color differences in the image</h1>
<h1>Failure of Success Criterion 1.1.1 and 1.3.3 due to having a text alternative that provides information
relying on color differences only</h1>
<section class="meta">
<p class="id">ID: F13</p>
<p class="technology">Technology: failures</p>
Expand All @@ -18,37 +20,49 @@ <h2>When to Use</h2>
<section id="description">
<h2>Description</h2>
<p>The objective of this technique is to describe the failure that occurs when
an image uses color differences to convey information, but the text alternative for the
image does not convey that information. This can cause problems for people
who are blind, have low vision, or have color vision deficiency, because they will not be able to perceive the
information conveyed by the color differences.</p>
the text alternative for an image relies on color differences only. This can cause problems for
people
who are blind or have low vision, because they will not be able to perceive the visual cues the alternative
text refers to.</p>

<div class="note">
<div>
<p>Depending on its visual appearance, such an image might or might not fail success criterion <a href="../../Understanding/use-of-color">1.4.1 Use of Color</a>. For example, bar charts, such as the one described in the following section, can provide information based on color alone (which represents a failure) or using a combination of color and pattern for their bars (which is a pass). Please remember that 1.4.1 Use of Color addresses the needs of sighted users, who are able to perceive images and don't usually rely on text alternatives.</p>
Comment thread
baldino-m marked this conversation as resolved.
Outdated
</div>
</div>
</section>
<section id="examples">
<h2>Examples</h2>
<ul>
<li>A bar chart of sales data is provided as an image. The chart includes
yearly sales figures for four employees in the Sales Department. The
text alternative for the image says, "The following bar chart
displays the yearly sales figures for the Sales Department. Mary
sold 3.1 Million; Fred, 2.6 Million; Bob, 2.2 Million; and Andrew,
3.4 Million. The red bars indicate sales that were below the yearly
quota". This text alternative fails to provide the information which
is conveyed by the color red in the image. The alternative should
indicate which people did not meet the sales quota rather than
relying on color.</li>
yearly sales figures for four employees in the Sales Department. The
text alternative for the image says: "Bar chart
showing the yearly sales figures for the Sales Department. Mary
sold 3.1 Million; Fred, 2.6 Million; Bob, 2.2 Million; and Andrew,
3.4 Million. The red bars indicate sales that were below the yearly
quota". Information about the employees not meeting the yearly quota is not provided anywhere else on the
page.<!-- making the bar chart image the only source of information. This accounts for a scenario in which a full-data table other kind of content (in text form) is provided below the bar chart, in which case the alternative text for the image would not rely on colour differences only --> This alternative fails to provide all the relevant information,

@kfranqueiro kfranqueiro Aug 14, 2026

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
page.<!-- making the bar chart image the only source of information. This accounts for a scenario in which a full-data table other kind of content (in text form) is provided below the bar chart, in which case the alternative text for the image would not rely on colour differences only --> This alternative fails to provide all the relevant information,
page. This alternative fails to provide all the relevant information,

since blind users cannot perceive the bars of the chart, nor their color. The text alternative should
indicate which people did not meet the sales quota rather than
referencing the visual appearance of the image.</li>
</ul>
</section>
<section id="tests">
<h2>Tests</h2>
<section class="procedure"><h3>Procedure</h3>
<p>For all images in the content that convey information by way of color differences: </p>
<section class="procedure">
<h3>Procedure</h3>
<p>For all images in the content that convey information by way of color differences:</p>
<ol>
<li>Check that the information conveyed by color differences is not included in the text alternative for the image.</li>
<li>Check that the information provided in the text alternative relies solely on color differences.</li>
<li>Check that the same information is not provided anywhere else on the page in
a way that does not rely solely on color differences.</li>
</ol>
</section>
<section class="results"><h3>Expected Results</h3>
<section class="results">
<h3>Expected Results</h3>
<ul>
<li>If check #1 is true, then this failure condition applies and content fails the Success Criterion.</li>
<li>If check #1 and #2 are true, then this failure condition applies and content fails the Success
Criterion.</li>
</ul>
</section>
</section>
Expand Down
4 changes: 2 additions & 2 deletions understanding/understanding.11tydata.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -320,7 +320,7 @@ export default function (data) {
"sensory-characteristics": {
// 1.3.3
sufficient: ["G96"],
failure: ["F14", "F26"],
failure: ["F13", "F14", "F26"],
},

orientation: {
Expand Down Expand Up @@ -363,7 +363,7 @@ export default function (data) {
},
],
advisory: ["C15"],
failure: ["F13", "F73", "F81"],
failure: ["F73", "F81"],
},

"audio-control": {
Expand Down