Accessibility: Preparing Your Images and Galleries

Visitors who have visual conditions may use assistive technology such as screen readers to browse your site. Add descriptions to images and galleries using alternative (alt) text to make them accessible to these visitors.

Alt text provides information about site media, and helps search engines and screen readers 'read' them.

Where does Wix get its information?

• We make recommendations as per the Web Content Accessibility Guidelines (WCAG) document, which has been developed by the World Wide Web Consortium (W3C).

• This article is based on the following success criteria:

  • Non-text Content (1.1.1)

  • Images of Text (1.4.5)

Guidelines for writing alt text

When writing accessibility-focused alt text, we recommend keeping the following points in mind:

• Choose the focus: Identify the most important message or information in the image, and center the alt text around that information.

• Be descriptive and specific: Alt text should clearly, sufficiently, and accurately explain the content of the image to visitors. Make sure to not use the same alt text for 2 or more images on a single site page.

• Keep context in mind: Consider how the image relates to the page content.

• Be concise: We recommend keeping alt text brief. Only include the relevant details, and avoid redundant or repeated information (e.g., it does not need to include terms such as 'image of', or 'picture of').

Tip:

Include your site's keywords to also optimize the alt text for SEO.

Adding alt text in your editor

Alt text ensures that visitors using screen readers can access and understand the content on your site, so we recommend adding it to all relevant images as you upload them.

Tip:

Make sure to publish the site so the alt text is live.

Adding alt text to single images

Add alt text to images in your site builder (Wix Editor, Studio Editor and Wix Harmony Editor) from the Settings panel.

Wix Editor

1. Go to your editor.

2. Click the image on your page.

3. Click the Settings icon

   

   .

4. Enter a description of the image under What's in the image?.

5. Press Enter on your keyboard to save the changes.

Studio Editor

1. Go to your editor.

2. Click the relevant image.

3. Click the Settings icon

   

   .

4. Write a short description for your image under What's in the image?.

5. Press Enter on your keyboard to save the changes.

Wix Harmony Editor

1. Go to your editor.

2. Click the relevant image.

3. Click the Settings icon

   

   on the action bar.

4. Click the Accessibility drop-down.

5. Write a short description for your image under Alt text.

6. Press Enter on your keyboard to save the changes.

Adding alt text to galleries

Use your site's Media Manager to add alternative text to gallery images.

Wix Editor

1. Go to your editor.

2. Click the gallery on your page.

3. Click Manage Media or Change Images.

4. Click an image to select it.

5. Enter a title for the image on the right.

6. (For Wix Pro Gallery) Edit the alt text for your image under Alt Text if you want it to be different from your image's title.

7. Click Done.

Studio Editor

1. Go to your editor.

2. Click the relevant gallery.

3. Click Manage Media.

4. Select the relevant image.

5. Enter a title for the image in the field.

6. Edit the alt text for your image under Alt text if you want it to be different from the image's title.

7. Click Done.

Wix Harmony Editor

1. Go to your editor.

2. Click the gallery element on the page.

3. Click Manage Media on the action bar.

4. Click the relevant image.

5. Enter a title and descriptions for the image in the fields.

6. (If the alt text should be different from the title / description) Enter a description for your image under Alt text.

7. Press Enter on your keyboard to save the changes.

What about tooltips?

You may have previously added tooltips to images in the Wix Editor. This option is no longer available, and all existing tooltips have been removed from your live site.

Adding alt text in the Accessibility Wizard

While checking a site with the Accessibility Wizard, you may be prompted to add alt text to images. You can use the task in the wizard to provide a short, clear description for site visitors.

The wizard is available in every site builder, so you can improve the accessibility of any site you're working on.

Tip:

You can click Apply as you go to save your changes while you add alt text.

To add alt text in the Accessibility Wizard:

Wix Editor

1. Go to your editor.

2. Click Settings at the top and select Accessibility Wizard.

3. Click Scan Site in the Accessibility Wizard panel on the right.

4. Select the Detected issues tab.

5. Click the page you want to work on.

6. Click Add alt text to images and select the relevant option:

   • (If not all images have alt text) Click Get started.

   • (If you have previously added alt text to all of the images) Click Edit.

7. Click the Edit icon

   

   next to the relevant image and enter the text into the field.

8. Click Apply.

Studio Editor

1. Go to your editor.

2. Click Site Checker

   

   on the left side of your editor.

3. Select Fix Accessibility Issues.

4. Click Scan Site.

5. Select the Detected issues tab.

6. Click the page you want to work on.

7. Click Add alt text to images and select the relevant option:

   • (If not all images have alt text) Click Get started.

   • (If you have previously added alt text to all of the images) Click Edit.

8. Click the Edit icon

   

   next to the relevant image and enter the text into the field.

9. Click Apply.

Wix Harmony Editor

1. Go to your editor.

2. Click your site’s name at the top left of the editor.

3. Scroll down to Accessibility and click Fix Issues.

4. Click Scan Site.

5. Click the page you want to work on.

6. Click Add alt text to images and select the relevant option:

   • (If not all images have alt text) Click Get started.

   • (If you have previously added alt text to all of the images) Click Edit.

7. Click the Edit icon

   

   next to the relevant image and enter the text into the field.

8. Click Apply.

Generating alt text with AI

Have a lot of images? You can use the AI tool in the Accessibility Wizard to generate alt text. Choose whether to generate alt text for specific images, or for every image on the page.

Important:

• We cannot guarantee that AI generated alt text is always completely accurate. We therefore recommend checking the generated text for every image, and editing it as needed.

• SVG or GIF images are not supported by the AI alt text tool. You need to manually write the alt text for these files.

To generate alt text with AI:

Wix Editor

1. Go to your editor.

2. Click Settings at the top and select Accessibility Wizard.

3. Click Scan Site in the Accessibility Wizard panel on the right.

4. Select the Detected issues tab.

5. Click the page you want to work on.

6. Click Add alt text to images and select the relevant option:

   • (If not all images have alt text) Click Get started.

   • (If you have previously added alt text to all of the images) Click Edit.

7. Choose whether to generate text for a single image, or in bulk:

   • Generate alt text for a single image:

     1. Click the Edit icon

        

        next to the relevant image.

     2. Click Generate.

   • Bulk generate alt text for all page images: Click Generate.

8. Check the generated text / make any necessary changes.

9. Click Apply.

Studio Editor

1. Go to your editor.

2. Click Site Checker

   

   on the left side of your editor.

3. Select Fix Accessibility Issues.

4. Click Scan Site.

5. Select the Detected issues tab.

6. Click the page you want to work on.

7. Click Add alt text to images and select the relevant option:

   • (If not all images have alt text) Click Get started.

   • (If you have previously added alt text to all of the images) Click Edit.

8. Choose whether to generate text for a single image, or in bulk:

   • Generate alt text for a single image:

     1. Click the Edit icon

        

        next to the relevant image.

     2. Click Generate.

   • Bulk generate alt text for all page images: Click Generate.

9. Check the generated text / make any necessary changes.

10. Click Apply.

Wix Harmony Editor

1. Go to your editor.

2. Click your site’s name at the top left of the editor.

3. Scroll down to Accessibility and click Fix Issues.

4. Click Scan Site.

5. Click the page you want to work on.

6. Click Add alt text to images and select the relevant option:

   • (If not all images have alt text) Click Get started.

   • (If you have previously added alt text to all of the images) Click Edit.

7. Choose whether to generate text for a single image, or in bulk:

   • Generate alt text for a single image:

     1. Click the Edit icon

        

        next to the relevant image.

     2. Click Generate.

   • Bulk generate alt text for all page images: Click Generate.

8. Check the generated text / make any necessary changes.

9. Click Apply.

Notes:

• When bulk editing, the tool does not generate alt text for images that are marked as decorative, or that already contain alt text.

• Occasionally, you may see that the AI tool has failed to generate alt text for an image / images on a page. You can click Try Again as needed.

Marking images as decorative

Decorative images are images that do not contribute to the content of the site, as they are there for aesthetic or decorative purposes only.

If an image on a site is decorative and is not relevant to the context, it is not necessary to add alt text. You can mark an image as 'decorative' in the Accessibility Wizard to ensure that search engines and screen readers automatically skip it.

To mark images as decorative:

Wix Editor

1. Go to your editor.

2. Click Settings at the top and select Accessibility Wizard.

3. Click Scan Site in the Accessibility Wizard panel on the right.

4. Select the Detected issues tab.

5. Click the page you want to work on.

6. Click Add alt text to images and select the relevant option:

   • (If not all images have alt text) Click Get started.

   • (If you have previously added alt text to all of the images) Click Edit.

7. Click the Edit icon

   

   next to the relevant image.

8. Select the checkbox next to This image is decorative, it doesn't need alt text.

9. Click Apply.

Studio Editor

1. Go to your editor.

2. Click Site Checker

   

   on the left side of your editor.

3. Select Fix Accessibility Issues.

4. Click Scan Site.

5. Select the Detected issues tab.

6. Click the page you want to work on.

7. Click Add alt text to images and select the relevant option:

   • (If not all images have alt text) Click Get started.

   • (If you have previously added alt text to all of the images) Click Edit.

8. Click the Edit icon

   

   next to the relevant image.

9. Select the checkbox next to This image is decorative, it doesn't need alt text.

10. Click Apply.

Wix Harmony Editor

1. Go to your editor.

2. Click your site’s name at the top left of the editor.

3. Scroll down to Accessibility and click Fix Issues.

4. Click Scan Site.

5. Click the page you want to work on.

6. Click Add alt text to images and select the relevant option:

   • (If not all images have alt text) Click Get started.

   • (If you have previously added alt text to all of the images) Click Edit.

7. Click the Edit icon

   

   next to the relevant image.

8. Click the checkbox next to This image is decorative. Alt text is not required as it doesn't contain any important info for screen readers.

9. Click Apply.

Good to know:

You should add alt text to any images that contain links, and not mark them as decorative.

Showing text in images on your site

This refers to images that contain pictured or added text.

Text in images cannot be "read" by search engines or screen readers. However, if the image is necessary, and the text has context to the site, you can add it to the image description.

If the text does not have context or doesn't contribute to the content of the site, you do not need to add it to the image description.

Select an option below to learn more about image text you should and shouldn't add to the image description.

Important text

Relevant text is text in images that are important to the context of the site, and contribute to the content.

For example, the image below may be present on a news site detailing the events of a protest. The text in the image has relevance to the site's context, so it should be added to the image's description.

It may read: A group of people at a protest. One of the protestors is holding up a sign that says "No!"

Unimportant text

Examples of text in images that may not be relevant include watermarks, or text that is added or pictured for decorative purposes.

For example, the image below may be displayed on a blog post about a cathedral. The text on the signs are not relevant to the context of the post, so they do not need to be included in the alt text.

The image description might read: A street signpost in front of a cathedral. The signpost is covered in flowers.

Showing images of text on your site

Images of text contain only text, and no other pictured elements. Some examples of this include pictures of fonts, or logos that contain text only.

As they are not "real" text elements, images of text cannot be read by search engines or screenreaders. We recommend avoiding them where possible, and replacing them with real text elements to improve SEO and accessibility on your site.

Next step:

Go back to the Accessibility Checklist to continue improving your site for accessibility.