Skip to content

Added "Duplicated text" as guidance to fulfil the 1.4.5 Images of Text success criterion in the Understanding Document #3773

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

Closed
giacomo-petri wants to merge 10 commits into from
Closed

Added "Duplicated text" as guidance to fulfil the 1.4.5 Images of Text success criterion in the Understanding Document #3773

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
c55dd26
Include duplicated text as solution to address images of text
giacomo-petri Apr 4, 2024
2d4ed34
Added sufficient technique
giacomo-petri Apr 4, 2024
b5840df
Delete techniques/general/G224
giacomo-petri Jun 10, 2024
1f87737
Update images-of-text.html
giacomo-petri Jun 10, 2024
783240c
Update images-of-text.html
giacomo-petri Jun 10, 2024
fef5327
Update understanding/20/images-of-text.html
mbgower Jun 14, 2024
50778e1
anchor update
alastc Jun 14, 2024
f9f8567
Update understanding/20/images-of-text.html
giacomo-petri Jun 21, 2024
54efb04
Update images-of-text.html
giacomo-petri Jun 21, 2024
e66b3da
Update images-of-text.html
giacomo-petri Jun 21, 2024
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: 54 additions & 0 deletions techniques/general/G224
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,54 @@
<!DOCTYPE html>
<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Replicating the information from the image of text as textual content</title>
<link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"/>
</head>
<body>
<h1>Replicating the information from the image of text as textual content</h1>
<section id="meta">
<h2>Metadata</h2>
<p id="sc">1.4.5 Images of Text</p>
<p id="type">sufficient</p>
</section>
<section id="applicability">
<h2>When to Use</h2>
<p>Any technology</p>
</section>
<section id="description">
<h2>Description</h2>
<p>The objective of this technique is to provide users with the flexibility to access content according to their preferences. This is achieved by replicating the information from the non-customizable image of text as actual text, allowing users to adjust it based on their needs.</p>
<p>Recognizing the constraints faced by many companies, such as website dimensions, the complexity of actors involved, and the variety of images of text found online, this sufficient technique seeks to enable users to customize text presentation. Simultaneously, it empowers companies to create accessible content rather than refraining from action.</p>
<div class="note">
<p>While utilizing this sufficient technique fulfills the requirements, we recommend replacing the image of text with actual text instead of duplicating it whenever possible.</p>
</div>
</section>
<section id="examples">
<h2>Examples</h2>
<section class="example">
<h3>Text duplicates the content of the image of text in a sensibly structured way</h3>
<p>A marketing campaign banner presents information using an image of text that contains the campaign name, a description of the campaign and a click to action to land on the campaign page. The author has duplicated the image of text using a heading for the campaign name, using a paragraph for the description and using a link for the click to action. In this context the image has been considered as decorative. Users are able to adjust the presentation of text based on their needs.</p>
</section>
<section class="example">
<h3>Text conveys the same meaning as the image of text</h3>
<p>The image of text displays multiple details in a visually disorganized sequence. Merely duplicating the text image's context with text may not offer an optimal experience for many users. The author has supplied a visible alternative text beneath the image that communicates the same message as the image but in a more human-readable format.</p>
</section>
</section>
<section id="tests">
<h2>Tests</h2>
<section class="procedure">
<h3>Procedure</h3>
<ol>
<li>Check that the image of text is presented together with text.</li>
<li>Check that the text presented together with the image of text is conveying an equal meaning.</li>
</ol>
</section>
<section class="results">
<h3>Expected Results</h3>
<ul>
<li>Check #1 and #2 are true</li>
</ul>
</section>
</section>
</body>
</html>
17 changes: 17 additions & 0 deletions understanding/20/images-of-text.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -44,6 +44,14 @@ <h2>Intent of Images of Text</h2>
<p>Images of text can also be used where it is possible for users to customize the image
of text to match their requirements.
</p>

<p>Meeting this success criterion is still deemed acceptable by duplicating the meaning
of the image of text through textual format.
If the information within the image permits the author to replicate the text verbatim,
this should be the preferred approach.
However, if converting the visual image to text results in a loss of meaning or readability,
it is acceptable to convey the same message by adding or altering some words.
</p>
Comment on lines +48 to +50
Copy link
Copy Markdown
Contributor Author

@giacomo-petri giacomo-petri Jul 27, 2024 •
edited
Loading

Choose a reason for hiding this comment

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

Based on yesterday's discussion, I have drafted a new proposal with a different approach to avoid any ambiguity or conflict with the normative portion of the SC:

Proposal:

Suggested change
<p>If it is not possible to replace an image of text with actual text or to allow users to customize the image, the author must provide an [accessible alternative](https://www.w3.org/TR/WCAG22/#cc2) by duplicating the meaning or content of the image in text form.
The alternative could replicate the text verbatim. If converting the visual image to text results in a loss of meaning or readability, the author could add or alter some words to convey the style, emphasis, or any other meaning that was lost.
</p>
<p>An image of text accompanied by visible text that replicates its content verbatim is exempt from this success criterion, as the image is not used to convey information but serves a decorative purpose, with the text providing the actual information.
Moreover, the text does not always need to replicate the image of text content exactly. Verbatim replication might result in a loss of meaning or readability. Authors can modify or add words to convey style, emphasis, or other meanings that could be lost in a direct replication.
</p>

If the group is ok with this proposal, I will also revise the examples to better align with the changes.

Copy link
Copy Markdown
Member

@patrickhlauke patrickhlauke Jul 28, 2024 •
edited
Loading

Choose a reason for hiding this comment

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

I would actually suggest dropping this, and the previous change (lines 47-50), and maybe instead just adding something like the following (which I think is getting to the same point as we discussed):

<div class="note">
  <p>The Success Criterion is scoped to situations where <a>images of text</a> are used <em>rather than</em> text. If a page has an image of text, but also contains visible text that duplicates the textual content of the image and conveys the same meaning, then this Success Criterion does not apply.</p>
</div>

Copy link
Copy Markdown
Contributor

@mbgower mbgower Aug 2, 2024 •
edited
Loading

Choose a reason for hiding this comment

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

I'm not sure that it doesn't apply, so much as that it meets the requirement.
If text is used, it's met. I'm wondering if we're able to align on some concept and wording like this:

Note: The Success Criterion is intended to address situations where images of text are used rather than text. Where images of text are used in addition to text to convey the same information -- where both are presented to the user -- this success criterion is met. This allows authors to convey content using any styling they desire, while also presenting the information in text, which can then be manipulated by users to make it more distinguishable.

Copy link
Copy Markdown
Contributor

@mbgower mbgower Aug 9, 2024 •
edited
Loading

Choose a reason for hiding this comment

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

I agree that I'm inclined not to include new content that would open the Pandora's box regarding how much the text may deviate from the same information provided in the image of text before this SC is no longer met via this rationale.
If we decide to strip out some of the other additions, I'm thinking this might work best as a note as a third-to-last paragraph in the Intent section.


<p>The definition of image of text contains the note: Note: This does not include text that is part of a picture that contains significant
other visual content. Examples of such pictures include graphs, screenshots, and diagrams which visually
Expand Down Expand Up @@ -130,6 +138,9 @@ <h2>Examples of Images of Text</h2>
<dt>Customizable font settings in images of text</dt>
<dd>A Web site allows users to specify font settings and all images of text on the site
are then provided based on those settings.</dd>
<dt>Text replicates an image of text in a marketing campaign</dt>
<dd>The CMS (content management system) allows content creators to incorporate both an image and a caption. While an image of text
Copy link
Copy Markdown
Contributor

@bruce-usab bruce-usab Jun 7, 2024

Choose a reason for hiding this comment

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

...allows content creators to incorporate both an image and a caption. While an image of text

I think "while" should be "when" here. Also is automated or policy?

is utilized, the identical message is also presented as text directly beneath the image.</dd>
</dl>

</section>
Expand Down Expand Up @@ -206,6 +217,12 @@ <h3>Sufficient Techniques for Images of Text</h3>

</li>

<li>

<a href="https://www.w3.org/WAI/WCAG21/Techniques/general/G224" class="general">Replicating the information from the image of text as textual content</a>

</li>

</ul>

</section>
Expand Down