Skip to content
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.

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

Success Criterion 1.4.5 Images of Text - Image of text + visual real text that matches the content of the image #3755

Open
giacomo-petri opened this issue Mar 20, 2024 · 7 comments · May be fixed by #4021

Comments

@giacomo-petri
Copy link
Contributor

In terms of normative requirements, the 1.4.5 Success Criterion is notably clear, as are its exceptions:

  • Customizable: The image of text can be visually adjusted to meet the user's preferences.
  • Essential: The specific presentation of text is crucial for conveying the information.

Therefore, if the image of text does not fall under one of these exceptions, it is deemed non-compliant.

A common scenario observed frequently involves an image featuring text within the image (image of text) followed by the same text presented in a textual format. Despite the ability to customize the real text (presented in textual format) to suit user preferences, the image of text remains uncustomizable, thus failing to meet the Success Criterion.

I will illustrate two examples below:

Example 1:

image of text coexists with real text mathing the content of the image

This instance depicts a background image showcasing T-shirts with a "30% OFF Promo Message" as image of text on the right side, while the left side features the same message presented as real text along with additional description and a "Shop Now" link.

Example 2:

static image of text coexists with real text mathing the content of the image

The second example presents non-interactive content containing solely an image of text, accompanied by the same text provided in a textual format akin to a caption below the image.

My sentiments regarding this issue fluctuate:

  • On one hand, comprehension of the information within the image is necessary to recognize its correspondence with the text element, indicating the adequacy of the Success Criterion.
  • Conversely, individuals unable to visually perceive the image, such as those reliant on screen readers, must depend on alternative text. Likewise, low vision users who may struggle to discern text within the image should also rely on alternatives provided by the author. This suggests a need for a more permissive SC. This holds particularly true when considering that 1.4.5 is an AA requirement, contrasting with its corresponding AAA requirement (1.4.9).

Therefore, ultimately, I am inclined to approve both examples despite their non-compliance with the standards.

Additionally, the sufficient technique C30 (C30: Using CSS to replace text with images of text and providing user interface controls to switch) enables authors to incorporate a switch button to replace the image of text with actual text. However, I find this approach more cumbersome and intricate compared to providing the information directly in textual form adjacent to the image of text.
Moreover, the inclusion of a complex solution like the one mentioned in this sufficient technique, while a simpler approach such as providing text adjacent to the image matching the information within it is not listed, raises further doubts. Although it's understood that sufficient techniques aren't exhaustive of all scenarios, this omission suggests that the current solution may not be considered acceptable under the Success Criterion right now.

If you concur with the points I've raised, should we clarify in the Understanding document that providing visible alternative text corresponding to the content of the image of text falls under the "Customizable" exception?

@patrickhlauke
Copy link
Member

patrickhlauke commented Mar 21, 2024

1.4.5 has always been an odd one to me, because the "If the technologies being used can achieve the visual presentation" is a broad statement that doesn't really acknowledge the reality of many large sites with multiple authors, and it really breaks down once you get to anything more complex than a simple "navigation links were done as images rather than text because the author wanted to have a nice drop shadow or fancy font", which - for the most part - was the use case that was prevalent at the time the SC was made.

for any layout/designed example (like we see on online shops, or when a poor content editor is asked to just upload a ready-made image of a flyer or similar to the company's blog), it becomes tricky ... sure, there are technologies that would let them redo the whole thing as a complex SVG, but they simply won't have the time/skill to do it. so it should still be kosher to let them at least reproduce the same text somehow/somewhere else, and allow that original image to remain as is.

@mraccess77
Copy link

so it should still be kosher to let them at least reproduce the same text somehow/somewhere else, and allow that original image to remain as is.

and that is where I think the issue is - alt text doesn’t provide the level of access needed for user group you needs it as text. So the solution really requires an alternative that is adaptable, selectable, can be zoomed in without degrading etc.

@alastc
Copy link
Contributor

alastc commented Mar 22, 2024

should we clarify in the Understanding document that providing visible alternative text corresponding to the content of the image of text falls under the "Customizable" exception?

It wouldn't go under that exception, but could be considered an accessible alternative. It's something that we'd like to update for WCAG 3, defining it better so that it can be used automatically across guidelines.

@mbgower
Copy link
Contributor

mbgower commented Mar 22, 2024

To build on Alastair's statement, both of these examples demonstrate cases where the text in the image is available as text in close proximity to the image. If the text was constructed as a heading (in the first example) and as a figure caption (in the second), it would seem to be quite useful. So finding a way to allow passing with an accessible alternative seems reasonable.

However, it's worth mentioning that one can meet 1.1.1 Non-Text Content and still fail Images of Text. I was not involved in the writing of those original SCs, but I believe that was intentional. I suspect it is one of the reasons why Images of Text is at AA while Non-Text Contrast is at A; one can pass at level A, but fail at AA.

In the first example, it seems to me like it should be possible to make the illustration use stylized real text -- removing the need for the redundant text. So I think it's worth considering ways to implement so that it meets 1.4.5. The second example is harder to address without a more real-world example. If it was a screenshot of a dialog box with a text message, with the caption repeating the text underneath, I'd argue that passes (or is at least N/A) for 1.4.5, since it is illustrating a UI example.

@bruce-usab
Copy link
Contributor

As @patrickhlauke notes, the scoping opener (If the technologies being used can achieve the visual presentation) is more of a loophole than the "essential" exception. I'd allow it because I have learned and now understand how particular graphic designers are. Since WCAG2 is so oriented towards authors, my opinion is that limited resources (time/skilll/tools) are part of the "technologies being used". There is not an affirmative requirement to use different or better technology.

An in-house auditor would have more understanding of the workflow, but @giacomo-petri I would pass your first example against 1.4.5 without evaluating the exception -- because 1.4.5 is not applicable. Yes, it should be possible to make the illustration use stylized real text, but that's a higher bar than I would use.

With your 2nd example, my initial impression was that the visual presentation is much too easy to achieve with CSS, and so fails 1.4.5. But you specifically say that the image-of-text is available as plain text in a caption. It passes 1.4.5 because the WCAG2 conformance model allows for conforming alternative versions. Presuming good alt, I don't think it would be much of a barrier in actual practice, since the caption text works well with screen magnification.

The exception for customizable is for an image of text that can be visually adjusted, so that's not applicable to your second example.

@giacomo-petri
Copy link
Contributor Author

Thank you everyone for your valuable insights.

Few answers before my considerations:

@patrickhlauke

for any layout/designed example (like we see on online shops, or when a poor content editor is asked to just upload a ready-made image of a flyer or similar to the company's blog), it becomes tricky ... sure, there are technologies that would let them redo the whole thing as a complex SVG, but they simply won't have the time/skill to do it. so it should still be kosher to let them at least reproduce the same text somehow/somewhere else, and allow that original image to remain as is.

Thank you, Patrick. Your input highlights precisely why I'm seeking clarity on this matter.

@mraccess77,

and that is where I think the issue is - alt text doesn’t provide the level of access needed for user group you needs it as text. So the solution really requires an alternative that is adaptable, selectable, can be zoomed in without degrading etc.

In the examples I presented, I deliberately included visible text positioned near the image, mirroring the textual content within the image. I'm not referring to an invisible alt attribute; rather, I'm advocating for the inclusion of clearly visible text adjacent to the image, ensuring all users receive the same message.

@mbgower,

However, it's worth mentioning that one can meet 1.1.1 Non-Text Content and still fail Images of Text. I was not involved in the writing of those original SCs, but I believe that was intentional. I suspect it is one of the reasons why Images of Text is at AA while Non-Text Contrast is at A; one can pass at level A, but fail at AA.

I fully concur with your evaluation. 1.1.1 and 1.4.5 indeed address entirely separate aspects with distinct objectives. My specific concern pertains to 1.4.5, not 1.1.1.

In the first example, it seems to me like it should be possible to make the illustration use stylized real text -- removing the need for the redundant text. So I think it's worth considering ways to implement so that it meets 1.4.5. The second example is harder to address without a more real-world example. If it was a screenshot of a dialog box with a text message, with the caption repeating the text underneath, I'd argue that passes (or is at least N/A) for 1.4.5, since it is illustrating a UI example.

I'm not disputing the possibility of achieving compliance with 1.4.5 without duplicating the content. Certainly, there are methods to comply with 1.4.5 without duplicating content and treating the images of text as real text (which is why, in my view, they currently fail 1.4.5 from a normative standpoint).

My concern lies in whether visual repetition (so basically the image may be considered decorative with an empty alt) of both an image of text and corresponding real text still meets the requirement.

From my experience, requesting a complete overhaul of a website with images of text, or demanding a change in methodology, or even switching partners due to coordination issues between designers and developers often leads to inaction.
Conversely, if visual text repetition is considered acceptable, it provides a more sustainable solution. In my view, users requiring a different text presentation can adapt by utilizing the real text positioned near the image of text, even if the image of text remains in place.

The stringent nature of the 1.4.5 AA requirement, sometimes discourages companies from addressing accessibility concerns in this area.

Additionally, certain success criteria, such as 2.5.8 Target Size (Minimum), explicitly incorporate an exception for equivalent functionality:

Equivalent: The function can be achieved through a different control on the same page that meets this criterion;

Within the 1.4.5 success criterion, there is no comparable provision. Consequently, from an evaluator's perspective, it becomes challenging to definitively determine whether scenarios like the ones I've described meet or fail the success criterion. All available information suggests that they do not meet the criterion (both in the normative and in the Understanding sections).

@bruce-usab

It passes 1.4.5 because the WCAG2 conformance model allows for conforming alternative versions.

Thank you for your feedback. I hadn't previously viewed the current scenarios as an "alternate conforming version."

However, I maintain the belief that if there's agreement on clarifying that visible text placed next to the image (conveying the same message) should be deemed compliant, we ought to explicitly state it. Creating such guidelines would foster consistency among evaluators and enhance the feasibility for companies to meet the 1.4.5 success criterion. This approach would ensure accessibility for all users while advancing sustainability for the companies involved.

@patrickhlauke
Copy link
Member

I maintain the belief that if there's agreement on clarifying that visible text placed next to the image (conveying the same message) should be deemed compliant, we ought to explicitly state it. Creating such guidelines would foster consistency among evaluators and enhance the feasibility for companies to meet the 1.4.5 success criterion. This approach would ensure accessibility for all users while advancing sustainability for the companies involved.

I think a clarification in the understanding document here - particularly citing those common scenarios we know exist out there (e.g. marketing people just being given a simple form in a CMS to upload an image and some text for a new product in the catalogue, or similar), and that in those cases while not ideal it's possible to at least duplicate the text (in a sensibly structured way) and pass this as an alternative. it would directly address the most common real-world problem with this SC.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment