# 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.

<a id="demo">

## 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.

<!-- AI-AGENT-NOTE: An interactive demo is embedded here but is not represented in this Markdown file. If you need to see it in action, open this page in a browser (e.g. via a browser-automation MCP like Chrome DevTools or Playwright), or let the user know a live demo is available on this page. -->

This demo presents a limited set of features. Visit the [feature-rich editor example](../../examples/builds-custom/full-featured-editor.md) to see more in action.

<a id="additional-feature-information">

## Additional feature information

The `alt` attribute is essential for both accessibility and [SEO](https://en.wikipedia.org/wiki/Search_engine_optimization).

CKEditor 5 provides support for alternate image text using the [`ImageTextAlternative`](../../api/module_image_imagetextalternative-ImageTextAlternative.md) plugin. The `alt` attribute is supported by both block and inline images in the editor output data:

```html
<!-- 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>
```

> **Note**
>
> This feature follows the markup proposed by the [Editor Recommendations](https://ckeditor.github.io/editor-recommendations/features/image.html) project.

<a id="utilizing-ckbox-to-manage-text-alternatives">

### Utilizing CKBox to manage text alternatives

When using the [CKBox file manager](../file-management/ckbox.md), you can utilize its [metadata management tools](../../../../ckbox/latest/features/file-management/assets/metadata.md#description) to set or change the text alternative. CKBox automatically adds the metadata `description` to the `alt` tag.

<a id="installation">

## Installation

Check out the [image features installation guide](images-installation.md) to learn how to enable this feature.

<a id="common-api">

## Common API

The [`ImageTextAlternative`](../../api/module_image_imagetextalternative-ImageTextAlternative.md) plugin registers:

* The `'imageTextAlternative'` button (to use in the [image toolbar](images-overview.md#image-contextual-toolbar)).
* The [`'imageTextAlternative'` command](../../api/module_image_imagetextalternative_imagetextalternativecommand-ImageTextAlternativeCommand.md).

> **Note**
>
> We recommend using the official [CKEditor 5 inspector](../../framework/development-tools/inspector.md) 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.

<a id="contribute">

## Contribute

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

---

Full index of the CKEditor 5 documentation: [llms.txt](../../../llms.txt)