zesty.io

Product

Use Cases

Integrations

Learn

Adding Image Alt Text

Adding image alt text helps describe the image for screen readers and makes a site more accessible.

Overview

Adding alt text to images makes sites more accessible for users who are unable to see them.

Implementation

There are several ways that alt text can be implemented in Zesty.io. We recommend using the Media section's Title field, or a text field in the Content section to make the alt description easily accessible to and editable by the content owner.

Alt text can also be hardcoded in via the Web IDE, however this approach will not give your content owners the flexibility to edit that text as necessary.

The steps below will cover how to use the Media sections Title field or a text field in the Content section to add alt text.

Steps: Media Section Title Field

1. Navigate to the Media section.

Navigate to the Media section.

2. Upload an image via drag n' drop or via the file manager.

Upload images with the blue Upload button.

3. The Title field will automatically be filled out with the image's file name. Edit the Title field and add your image alt text.

Image settings modal shows information about an image.

4. Save your changes to the Title field by clicking the green Save button.

After changing your title click the green Save button.

5. Navigate to the Content section.

Navigate to the Content section.

6. Add your image to your content and save (and publish as necessary).

Add your image and save.

7. Navigate to the Web IDE.

Navigate to the Web IDE.

8. Locate your view and add an HTML image tag and with an alt attribute. Fill out the alt attribute with the Parsley {{ .getImageTitle() }} call.

Code in your image tag with alt text attribute.

Steps: Text Field as an Image Altext

1. Navigate to the Schema section. Locate the content model that you want to add the your alt text field to.

Navigate to the Schema section.

2. Add a text field type called Image Alt Text.

Add a text field type for your alt image text.

3. Navigate to the content section and locate the content model that you added your alt text field to. Modify contents then Save (Publish if necessary).

Locate the content model that you added your alt text field to.

4. Locate your content model's related view in Web IDE. Add an HTML image tag and with an alt attribute. Fill out the alt attribute with the Parsley {{ this. }} call and complete the call with the name of the field that you created in step 2.

Code in your image tag and alt attribute.

Start Here

We will listen to your needs and walk you through how Zesty can help your team.

Connect with Content Experts

Book a free 15-minute consultation with a content expert. Discuss your application, pain points and requirements. Understand how Zesty's lower total cost of ownership, features, functionality can elevate your business by creating extraordinary digital experiences.

Trusted By

zesty customer logo Sonyzesty customer logo Rocket Leaguezesty customer logo Singlifezesty customer logo Acornszesty customer logo Phoenix Sunszesty customer logo Wattpadzesty customer logo Corner Shopzesty customer logo Bjs

G2 MOMENTUM LEADER

zesty customer logo zesty customer logo zesty customer logo zesty customer logo

Enter your details to connect with a Content Expert

First Name

Last Name

Email

Phone (optional)

Company

Please tell us about your project (optional)