Accessible Images in Practice: Writing, Generating, and Managing Alternative Text in CKEditor

Providing alternative text for images is one of the most well-known techniques of improving accessibility of web applications and sites. And, at the surface, it also seems to be one of the simplest ones. But simplicity can be deceptive. The same image can be described in a totally different way, depending on where it’s located on the website. Let’s dive into the more-complex-than-you-think world of alternative texts.!

#Why is alternative text required for accessibility?

According to the World Health Organization (WHO), there are at least 2.2 billion people with some sort of visual impairment. In other words: 1 in 4 people could have trouble seeing images on the Web. Alternative text provides these people with information contained in the image that they otherwise could miss.

Providing alternative text not only helps people with visual impairments, but also has tangible business and legal implications. Companies that do not ensure the accessibility of their products and services lose potential customers due to existing accessibility barriers. As Scope’s research points out, businesses in the UK alone risk losing access to a share of the £274 billion Purple Pound (the combined spending power of UK households with at least one disabled person).

Website accessibility is also required by law in different jurisdictions.  Examples include the Americans with Disabilities Act (ADA) in the USA and the new(ish) European Accessibility Act (EAA). Both require that certain types of websites be accessible, and ignoring them could lead to legal repercussions.

But these are still not all the reasons to provide alternative text for images! Doing so could also improve the user experience for everyone else. Imagine going to some tranquil countryside location, far away from any sights of civilization. I bet the connection is subpar there, and an unstable connection means images that don’t load. In such a case, the browser displays the alternative text instead of the image:

What’s more, some people can choose not to load any images, e.g., to limit their mobile usage. Plus, any issues with image hosting that will result in a broken image. In other words: there are no good reasons to omit providing an alternative text for an image, but there are a lot of good reasons to do it!

#Ways of providing alternative text

So we already know why we should do it; let’s talk a bit about how it can be done. Technically, all websites are created using HTML, and it’s the best language for the job. According to the official HTML standard, the alt attribute on the <img> element is a way to go:

The following code can be used to mark up the previously shown example of an alternative text in action:

<img src="[…]" alt="CKEditor logo">

However, there are some other ways of providing alternative text and the Web Content Accessibility Guidelines list quite a few of them.

WCAG (Web Content Accessibility Guidelines) is a set of internationally recognized recommendations developed by the World Wide Web Consortium (W3C) to make web content more accessible to people with disabilities. It organizes its requirements around four core principles — content must be Perceivable, Operable, Understandable, and Robust (POUR). The current version, WCAG 2.2, is widely referenced by accessibility laws and regulations around the world, including the ADA and the EAA.

The ones worth mentioning are the aria-label and the aria-labelledby attributes. The first one allows for providing an alternative text as the attribute’s value, while the second one points to the element by its ID:

<img src="[…]" aria-label="CKEditor logo">
<img src="[…]" aria-labelledby="img-label">
<span id="img-label">CKEditor logo</span>

Such a marked-up image will be correctly visible in the accessibility tree, like an image with the alt attribute. However, they won’t work as a replacement for the image if it doesn’t load. They are also not conformant according to the HTML specification: it requires the alt attribute to consider HTML valid. Due to that, I’d say that the alt attribute should be a preferred way of describing images in almost any case.

#How to provide alternative text in CKEditor

In many situations, the content won’t be created using raw markup, but instead users will work in some sort of authoring tool. Hey, even this article was created in one! As images are an essential part of any website, providing alternative text for them is essential. CKEditor has you covered on this one.

After installing the image feature in your editor, you can add alternative text to any image by selecting the image and clicking the alternative text toolbar button (). You can always check CKEditor’s official documentation for more details.

#Choosing the right alternative text

OK, we already covered why providing alternative text is important and how it can be done. But the most important part is still missing: what alternative text? In reality, the same image could be described in many different ways, and each would be right in one, specified context. That’s why the official HTML specification contains a whole section dedicated to alternative texts with numerous examples.

The HTML specification underlines the importance of the context, listing a lot of image categories. Not all of them are easily encountered on the path of a fellow web editor so let’s focus on a few selected ones.

#Images as a key part of the content

There are situations when images are essential to the content. A good example could be an essay describing a famous work of art.

In such a case, an alternative text should describe in quite a detail what the painting looks like, as it’s essential to understand the rest of the essay:

An oil portrait of a half-length seated woman with dark hair, an enigmatic slight smile, and hands folded in her lap, painted against a hazy landscape of winding rivers, rocky formations, and misty mountains rendered in soft sfumato shading, with warm earthy tones of brown, olive, and gold throughout, and a visible craquelure texture across the aged surface.

Note: I’m providing only alternative texts, without the whole markup, as HTML would introduce unnecessary noise to the examples. What’s more, not everyone would even use raw HTML to add alternative texts, as we already established.

Another example of an essential image could be the screenshot above of an essay about Mona Lisa.

CKEditor document titled "Mona Lisa" featuring the painting and introductory essay text: "In this essay I'm going to talk a bit about why I think that Mona Lisa is the bestest painting ever created by humanity!".

As you can see, the alternative text conveys all the important information about the screenshot:

1. It's a document edited in CKEditor.

2. Its title is “Mona Lisa.”

3. There is a reproduction of the painting inside.

4. The text visible on the screenshot is cited.

#Images inside links or buttons

There are two types of images inside links and buttons:

1. ones that are the sole content.

2. ones that are accompanied by text.

In the first situation, the alternative text should describe the function of the link or button. A good example could be a logo inside a navigation bar that links to the main page. In this context, the information that it’s a logo is unimportant. What’s important is where the link goes:

CKEditor homepage

The second situation is trickier. Oftentimes, such images are redundant and decorative, which leads us to…

#Ancillary and decorative images

Sometimes images are ancillary: their purpose is to strengthen the surrounding content.

In this case, the image of an angry face at the end of a neutral fact suggests the emotions of the author. Due to that, an alternative text should convey this emotion:

angry face

Omitting the alternative text will change the sentiment of the paragraph. It would still be understandable, though.

There are, however, situations when images do not add anything useful to the content. That could be a case with icons in buttons that are accompanied by a text label:

As the icon duplicates the already visible text, its alternative text should be empty, otherwise users of screen readers could hear the word “menu” twice.

The same rule applies to all images that are purely decorative, like fancy table borders, elements of the background, etc.

#Images of text

OK, this one is simple: if the image contains the text, then its alternative text should be that text:

I am but the text from this image.

Yet such images beg a question: why are they even images? In many cases, it’s done for purely visual aspects, e.g., achieving a particular typographic effect. However, modern CSS enables some really sophisticated stuff, like custom fonts or even styled initials. Choosing CSS over an image of text should result in better accessibility and user experience overall (as standard text could be selected and copied without any hassle, while an image is more cumbersome).

#Charts, diagrams, and maps

In case of “complex” images – charts, diagrams, maps, etc. – providing a whole description inside an alternative text could be cumbersome. The HTML specification suggests using the text replacement as an alternative text, but personally I find WebAim’s advice on this more convincing. Instead of stuffing everything inside alternative text, the alternative text could contain only the general description of the image:

Flowchart showing the flow of data in our system.

However, the information from the image still has to be expressed in some other form, e.g. by an ordered list following the image and describing the flow of data step by step.

#Alternative text vs caption

There is one more catch: sometimes images also have visible captions.

In HTML, it can be done with the <figure> and <figcaption> elements:

<figure>
  <img src="[…]" alt="Some alternative text">
  <figcaption>Some caption</figcaption>
</figure>

In such cases, it’s best to provide different types of information in both places:

1. The alternative text should contain a description of the image suitable for the given context.

2. The caption should provide the context for the image.

As an example: an essay on Mona Lisa could include the painting. Its alternative text should describe the painting itself (what’s on it),while the caption could provide additional information about it, like who painted it, in which year, etc.

The rule of thumb: alternative text is for the image (what it depicts, what function it has), while the caption is for the context (why the image is important in this particular context).

#Turning CKEditor AI into an accessibility assistant

Even knowing all the rules won’t necessarily make coming up with all these alternative texts easier. Fortunately, there is now a technology that could do it for us! CKEditor AI is able to recognize what is in images and, thanks to that, generate appropriate alternative text for them. To do so:

1. Select the image that needs alternative text.

2. Click the “Ask AI” button () inside the “AI Quick Actions” menu ().

3. Ask the AI to generate an alternative text. You can use the following prompt:

Look at the selected image and the surrounding content for context. Write concise alternative text that conveys the image's purpose to a screen reader user. If the image is decorative and adds no meaningful information, return an empty alt value and briefly explain why. Keep the alt text under 125 characters unless the image is complex (such as a chart or diagram), in which case provide a short alt text and suggest what longer description should appear nearby.

4. Wait for AI to offer you a freshly-squeezed alternative text!

And that’s it! Your image should now be described.

Please note that AI, as good as it is in analyzing images, can still produce incorrect alternative text as it can misunderstand the content of the image or the context in which it appears. Check the generated alternative text before using it.

#Images await their hero!

So now you know why you should provide alternative text to your images, how you can do it in both code and CKEditor, and what exactly should be inside them. Now, you’re free to make more accessible images on the Web!