This article was originally published on itscrisdiaz.com (Spanish) by Cristian Díaz

One thing I've learned as an accessibility auditor at Zenyth Group is that there are WCAG criteria that I genuinely had no idea about, which made me realize how much I have to learn. Today, I'd like to focus on a specific criterion within the WCAG guidelines: Success Criterion 1.4.5, also known as "Images of Text. I want to go into detail about what this criterion is, some examples I've found of failures of this criterion, and most importantly: how we can use the tools provided by CSS to create a site that conforms with this criterion.

Diving Into the Success Criterion 1.4.5

What Is Success Criterion 1.4.5?

Let's start with the basics. According to the WCAG, success criterion 1.4.5 - Images of text, says:

It is common to find images on the web that have text. Just to give an example, there is this graph about disability in the USA from Global Disability Rights Now. This criterion tells us that if it is possible to represent this information as text instead of as an image, it should be presented as text to the user.

Why Does It Matter?

This criterion emerged in WCAG 2.0.  In the 2000s, the web was very different and it was quite common to use images of text on sites. And while it's less common these days to find failures of this criterion, it's still relevant, so let's review what kind of barriers having an image of text would create for people with disabilities.

In theory, if you use an image to present text and provide alternative text, wouldn't this content be accessible? Not really. While this would cover screen reader users, it creates problems for other types of disabilities, such as:

• Users with low vision who use screen magnification software like ZoomText, Windows magnifier, or browser zoom may have trouble reading the content since an image is prone to pixelate, making content more difficult to read.
• Some disabilities like dyslexia or certain visual impairments require adjustments to the font, size, color, or spacing of text for individuals to properly view the content. This can be achieved with custom stylesheets tools like Stylus, Windows High Contrast Mode, or more recently, Arc Browser (although this feature was not created as an accessibility tool per se). Not allowing or preventing users from changing text properties can create barriers to consuming content. This is the case when using an image of text when regular text could be used.

Coincidentally, I've written a couple of articles on the subject! You can learn more about Windows High Contrast Mode in my article The Guide To Windows High Contrast Mode on Smashing Magazine, and you can read my article Assistive tools for people with low vision (Spanish).

I think that what we have seen helps us to understand why adherence to this criterion is crucial. Although we have progressed beyond the practices of the 2000s, claiming that we fully meet this guidance on the web is only partially accurate. Despite advancements, we still encounter issues regarding this criterion.

Failures of Criterion 1.4.5 in the Wild

Unfortunately, it is possible to find failures of this criterion today, and they are not rare cases. Let's begin with an example you might have encountered, not necessarily on a website, but within your email inbox. I'm talking, of course, about email marketing.

In emails it's very common to use images of text instead of real  text. It's understandable due to certain technical limitations on how an email can be formatted, but that doesn't mean it's not a failure with real impacts. At this point, I was going to share an email I received, but coincidentally, Ivana Watts, eCommerce strategist and Email Marketer, shared an example in a LinkedIn post about email accessibility where, among other things, she talks about the excessive use of images in this medium. Thanks Ivana for addressing this issue, it's clear that cases like this keep this criterion relevant.

But okay, it might be quite common in email marketing, but it doesn't happen much with websites, right? It still happens. I shared this post on Mastodon (also on Twitter, but I didn't get any help there because the algorithm is a disaster and that social network is in its twilight) and I received some interesting responses:

One of these comes from Massimo Artizzu, who said this:

He didn’t share a screenshot for security reasons, but this testimony is a clear example that this still happens. Now, let's start looking at some specific examples.

One that caught my attention was from the Converse website where their newsletter’s section has a heading like this:

This heading can be easily replicated as text using only HTML and an SVG next to it to represent the Converse brand, like this:

  
  	<h2>
      Never miss a beat
      <svg aria-hidden="true">
        <!-- SVG's code -->
      </svg>
    </h2>
  

This choice of using an image instead of text creates accessibility issues, as we've mentioned before. This is a particularly easy case to solve, so let's increase the complexity a bit. My next example is from Elder Mistubishi, which has a carousel, and within each slide, it has images like this:

Some images on this site are harder to replicate than others, but they all have that pattern of text on one side and an image on the other, a pattern that is relatively easy to replicate it nowadays with the layout tools offered by CSS nowadays. If you thought about using a CSS grid to create this layout, you would be absolutely right, but we'll talk about that later.

For now, my point is that - strangely -, this is a common pattern I've noticed. Several images used on this website have a very similar structure and can be replicated in a way that meets this criterion. To give a couple of examples, there's Almacenes Éxito from Colombia, where they have a carousel and each slide has an image in this style.

It has a bit more complexity, but it can be replicated with HTML and CSS. Another example is from Grundsätzlich CDU, which is probably the biggest offender I’ve found for this criterion. ut of 6 images, you could argue that more than half fail this criterion. For example, let's take a look at this one:

An important detail to keep in mind for this particular image: There is some overlap between the text and some darker splotches of color behind it. Depending on the visual disability, this can limit readability, which in theory could be addressed by the end user if this weren’t an image of text.

These last three cases are not only relatively easy to replicate with HTML and CSS, but they are also quite similar layouts that can indeed be replicated using the same technique.

And these cases are only talking about images. There's something else we can mention that also has widespread use on the web, and that is SVGs. SVGs have several advantages over images, one of which is that they do not pixelate, making them more friendly to screen magnifiers. But are they really a good alternative in the context of this criterion? Let's take an example from nypost.com, specifically, let's see what they do with their "Page Six" header.

Instead of using text, they use an SVG to display the title. As mentioned earlier, one of the exceptions to this criterion is that "The image of text can be visually customized to the user's requirements" meaning it allows altering properties such as text color, size, or font.

Does this SVG allow modifying these properties? In this case, they used a <path> to recreate the text, so it does not allow modifying the font and size. However, an SVG that has been handled well could have its color modified. Let's see what happens when I use Windows High Contrast Mode.

‍Sidenote: It’s important to keep in mind that WCAG does not require a site to respond correctly to Windows High Contrast Mode, but it is possible for a person with a visual disability to use this mode to change text’s color, so I’m using it as an example in this case.

It doesn't allow modifying the font color, so this SVG doesn't meet this accessibility success criterion. Are there ways to use SVGs in a way that conforms with this success criterion? There are, using the <text> tag, which allows adding text nodes to an SVG, and these nodes receive any changes in text properties Using them would be in compliance with this success criterion.

Now, although it may meet this success criterion, it could cause failures in others, such as the Success Criterion 1.4.12 - Text Spacing, since if text spacing is applied, it could overlap or be cut off, making reading difficult. Therefore, it's important to consider all of this before deciding to use it.

We've noticed that this problem continues to occur today, so let's talk about what we can do to solve it. To do this, we need to talk about one of the languages that make up the web and its potential to comply with this success criterion: let's talk about CSS.

CSS Possibilities

CSS has evolved a lot in recent years, and now we have many tools at our disposal to create basically any layout we can imagine. This opens up many possibilities for creating content that meets this success criterion.

As I mentioned earlier, the web was different before; it was more common to use images to represent text because, in many cases, creating the layouts that these designs demanded was practically impossible with the tools available at the time. Now we have many tools, and I want to delve into one in particular that is particularly effective for this criterion: I'm talking about CSS Grid.

CSS Grid

CSS Grid allows you to create a series of rows and columns in which the developer can position elements. This has opened up a great window of possibilities when it comes to creating complex layouts, and it's certainly something that helps us create content that helps us meet this success criterion. Let's go back to the Elder Mitsubishi banner and set ourselves the goal of recreating this layout with CSS.

The first thing I did was use Figma to create a grid of columns to better understand how to position the elements. After experimenting, I concluded that it was divided into 11 columns and distributed like so:

With that information, we can replicate the layout. Let's start with the markup:

  
  	<section>
      <div>
        <h1>Get Pre-Approved Now</h1>
        <ul>
          <li>No Social Required</li>
          <li>Instant Approval</li>
        </ul>
        <a href="#">Get pre-approved</a>
      </div>
      <img src="path/to/image.jpg" alt="" />
    </section>
  

Now, we can use a CSS grid to position the elements in a way that recreates this layout. Out of these 11 columns, one is completely empty, from 2 to 5 contain the text and call to action, and the rest contain the car image (I know there is some overlap between the text and the image, but I don't want to complicate the example too much), so we can divide this into three columns: one that spans 1/11, another that spans 4/11, and another that spans 6/11. Then we can use grid to recreate this layout and position our elements, like so:

  
  	/* Makes the image gets contained in the box */
    img {
      display: block;
      max-width: 100%;
    }

    section {
      display: grid;
      align-items: center;
      grid-template-columns: 1fr 4fr 6fr;
      gap: 1rem;
    }

    section div {
      grid-column: 2 / 3;
    }

    section img {
      grid-column: 3 / 4;
    }
  

The great advantage of doing it with HTML and CSS is that we can make it responsive, using media queries to ensure it continues to look good on smaller screens, (which also helps to meet WCAG Success Criterion 1.4.10 - Reflow). Let's refactor this CSS a bit to make it fit better.

  
  	section {
      display: grid;
      align-items: center;
      gap: 1rem;
    }

    @media screen and (min-width: 768px) {
      section {
        grid-template-columns: 1fr 1fr;
      }
    }

    @media screen and (min-width: 1024px) {
      section {
        grid-template-columns: 1fr 4fr 6fr;
      }

      section div {
        grid-column: 2 / 3;
      }

      section img {
        grid-column: 3 / 4;
      }
    }
  

And that's how we would get our layout. Now, all that remains to be done is using CSS to give it the necessary styles. I'll make an approximation of those styles for that banner that you can see in this CodePen:

There are adjustments that can be applied to make it even more similar to the image with a more granular handling of CSS grid, but the point is that in many instances, this layout is replicable. Let's go back to the examples of Almacenes Éxito and Grundsätzlich CDU, as they both have a similar layout to our example. Learning how to use a CSS grid provides advantages in the context of this WCAG compliance criterion.

There are layouts that may seem tricky, but with good use of CSS grid and other CSS tools, they can be achieved without requiring the use of images where it's not necessary. Something I've recently found helpful in better understanding how to use CSS in real life is Andy Bell's Reality Check blog series, where he takes a design from Dribble and translates it into code.

It's important to note something crucial: using CSS Grid to position elements is a great tool, but if not used properly, it can cause other accessibility problems, specifically in two key areas: reading/navigation order and contrast.

If you place elements in a way that the reading order does not match how you positioned them in the DOM, you can create accessibility errors in the Success Criterion 1.3.2 - Meaningful Sequence. If this leads to a keyboard navigation that does not match the visual order, it also creates an issue under Success Criterion 2.4.3 - Focus Order, so it's important that the visual order and the DOM order are as similar as possible.

Regarding contrast, if elements overlap, there is a risk that colors combine in a way that creates contrast problems, so that's important to consider. Fortunately, Hannah Milan created an article on the topic titled Designing Accessible Text Over Images: Best Practices, Techniques, And Resources Part 1 and Part 2 where she discusses the different methods for adding text over images, what to consider, and more recommendations on the subject. There's also an article by Ahmad Shadeed titled Handling Text Over Images in CSS which also provides very useful information on the topic.

I think it's clear now that CSS Grid is a great tool that allows us to create content that complies with this criterion, but what more can we do with CSS? What is the limit? To what extent is it acceptable to use images or SVG on the web instead of using CSS?

Potential and Limitations

Let’s do a little experiment, shall we? Take a look at these titles. Do you think it's possible to create them using HTML and CSS?

It's highly likely that your initial reaction was to say that it's not possible and that it would be better to use an image for this, perhaps an SVG. Certainly, that was my initial reaction as well, but it is possible to recreate them! This is part of what Temani Afif, a Front-end developer expert in CSS, discusses in his article Responsive Multi-Line Ribbon Shapes Part 1 and Part 2, in which he creatively uses properties like background-image and clip-path to achieve this effect.

Undoubtedly, if we start exploring the web, we'll find fascinating examples of what can be done with HTML, CSS and text when you would normally use an image. My point here isn't to say that if you see this pattern, you must use CSS to recreate it, or else it will be a failure of Success Criterion 1.4.5. What I mean by this is that exploring CSS properties in this way gives us a better idea of what is and isn't possible with HTML and CSS alone, opening up more possibilities for creating accessible content.

But even with all this, we still have to draw the line somewhere, and this is something that can be challenging as an auditor because it depends on various factors, such as the technical capabilities of the team or the technology they use. For example, yes, you can recreate the layout of Elder Mitsubishi with HTML and CSS without any major issues, but what if you're using a CMS that doesn't allow you to modify the CSS as much as you'd like and you're forced to use an image?

Let's go back to the headings from before. If I were auditing a site that had decided to use this as an image, I wouldn't fail it under Success Criterion 1.4.5 simply because it requires a level of technical skill that is not common. At best, I might suggest that they use an SVG that uses <text> to render the text because it would allow more control by the user and even then it would be limited by the technical skills of the team.

Do you know why it's common to find failures of this criterion in email marketing? Because nowadays we are still limited in what can be done in terms of layouts in emails, still having to resort to tables to create moderately complex layouts (mainly due to support for Microsoft Outlook). So to some extent, it's understandable that they use images so much, but still, we have to draw the line somewhere. Let's go back to Ivana's post about emails. I can understand that the heading might be an image, but is it necessary for the text to be one? Or the buttons? No, of course not.

So, in summary, I consider that there are two factors to consider regarding this criterion:

The capabilities of CSS to realistically create layouts and that the average developer can accomplish. For example, in the case of Elder Mitsubishi, I was able to recreate this layout without much trouble, so I would report a failure under this criterion if I saw something similar, and.

• The tools available to the development team. Suppose they use a CMS and can't modify the CSS as much as they would like. In that case, what I would do is consider alternatives for what is possible with the team's tools to determine whether it is a failure in this criterion or not.

And what if you arrive at the conclusion that it's not possible to replace a text image with HTML and CSS? In that case, the best thing you can do is ensure that the image meets the necessary accessibility criteria, such as ensuring that the text has adequate contrast and that the image has alternative text that adequately describes the image's content.

Wrapping Up

The Success Criterion Images of Text is still relevant, and with the tools we have today for web development, creating content using text instead of images is becoming increasingly possible. However, we will still encounter cases where we find failures of this criterion, and it's important to learn to determine when it's possible to recreate an element using text and when it's more convenient to leave it as an image.

Working as an accessibility auditor has made me appreciate the depth and nuances of the WCAG criteria, and I hope to have shared some of what I have come to appreciate about the topic in this article.

‍