Image 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 to edit the text alternative.

Rich Text Editor

Welcome to 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!

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:

The 'imageTextAlternative' button (to use in the image toolbar).
The 'imageTextAlternative' command.

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.

Every day, we work hard to keep our documentation complete. Have you spotted outdated information? Is something missing? Please report it via our issue tracker.