CKEditor Ecosystem Documentation
Search
Contribute to this guide
Home/CKEditor 5/Features

guideImage text alternative

Image text alternative (the alt attribute) helps screen reader users navigate and understand the document. It also provides meaningful image descriptions to search engine crawlers.

# Demo

The editor below has the base image feature enabled. Click any of the images and use the contextual image toolbar Alternative text to edit the text alternative.

Welcome to Iceland!

Location of the most picturesque waterfalls of Iceland

Iceland’s wild, unbridled nature will surely land on top of your sightseeing list. But where should you start? As this amazing island brings together fire and ice, why not choose the product of this union — water — as your starting point?

The mountainous terrain gives Iceland’s rivers numerous obstacles. Where the wild waters of Icelandic streams, creeks, and rivers encounter a boulder or a sharp edge of a rock, they cascade down in picturesque waterfalls.

We have chosen a few especially breathtaking ones. Plan your round trip wisely so you don’t miss any of these natural wonders!

Kirkjufellsfoss waterfall
1. Kirkjufellsfoss
Seljalandsfoss waterfall
2. Seljalandsfoss
Skogafoss waterfall
3. Skogafoss
Svartifoss waterfall
4. Svartifoss
Godafoss waterfall
5. Godafoss
Godafoss waterfall
5. Godafoss

This demo presents a limited set of features. Visit the feature-rich editor example to see more in action.

# Additional feature information

The alt attribute is essential for both accessibility and SEO.

CKEditor 5 provides support for alternate image text using the ImageTextAlternative plugin. The alt attribute is supported by both block and inline images in the editor output data:

<!-- Block image markup -->
<figure class="image">
    <img src="..." alt="Description of an image">
    <figcaption>...</figcaption>
</figure>

<!-- Inline image in a paragraph -->
<p>Some text followed by an image <img src="..." alt="Description of an image">.</p>

This feature follows the markup proposed by the Editor Recommendations project.

# Utilizing CKBox to manage text alternatives

When using the CKBox file manager, you can utilize its metadata management tools to set or change the text alternative. CKBox automatically adds the metadata description to the alt tag.

# Installation

This feature is available in all ready-to-use editor builds. If your integration uses a custom editor build, check out the image features installation guide to learn how to enable this feature.

# Common API

The ImageTextAlternative plugin registers:

We recommend using the official CKEditor 5 inspector for development and debugging. It will give you tons of useful information about the state of the editor such as internal data structures, selection, commands, and many more.

# Contribute

The source code of the feature is available on GitHub at https://github.com/ckeditor/ckeditor5/tree/master/packages/ckeditor5-image.