Alt text can also be helpful to customers with cognitive disabilities. To decrease visual distractions, customers with cognitive disabilities may turn off images in order to streamline their view of your website and decrease visual distractions.

Alt Text is most helpful to describe images that contain information that isn't available as written text anywhere else on the page.

To determine whether an image needs Alt Text, consider if the image is for decoration or whether the image is informative. Ask yourself, “Does the content of the image support or enhance the text on the page?”

If an image is purely decorative, it might not need alt text.

Also, if the information contained within the image is written out elsewhere on the page, the image may not need alt text.

Alt Text should be used to add to the text on the page and should not be overly repetitive.

Our developers are working towards building a dashboard feature that will make it easier to add Alt Text to images without having to insert code using the raw editor.

Eventive is looking to develop a number of new accessibility features in order to better serve the needs of your audience. If you have feedback on this article, or have accessibility features that you would like to see developed and integrated into the platform, please let us know by adding your comments to our Feature Requests Forum.

Prior to the launch of this new feature, you can still add Alt text to your images using the Raw Editor.

Alt Text can be added to any images that have been added to your Eventive pages in text fields like the one shown in the image below.

Start by inserting your image and any corresponding text into the field by clicking the insert image icon.

Once the image and text have been entered in the text field and are positioned how you want them to appear, click the “Switch to raw editor” link that is located above the top right corner of the text field.

Clicking “Switch to raw editor” will show you the code that corresponds to the text and images that you have entered in the text field.

When you first click “Switch to raw editor”, the image URL will be very long - click the save button in the top right corner of the page and the image url will shorten to something much more manageable.

Here is the code for the image in the sample above:

To add Alt Text to an image, insert the following code between the quotation marks and the angle bracket at the end of the image URL. Replace “INSERT YOUR DESIRED ALT TEXT HERE” with your custom text.

For the sample above, the code with Alt Text would look like this:

In place of the image, a screen reader would read “A Good Film plus Great Popcorn equals Love.”

On the website, a customer navigating the site with images turned off would see the following:

Note: Use an empty Alt for decorative images. If you don’t want a decorative image to be read by a screen reader, add alt=”” to the image code so that the reader will skip over the image. If you omit the alt=”” from a decorative image, a screen reader will read the image filename one character at a time.

This article shows how to insert Alt Text, but is not an authoritative resource on accessibility standards and optimal way to write and use alt text.

Here are some additional resources on Alt Text that may be useful:

WebAIM (web accessibility in mind) - Alternative Text

Stanford | University IT - Office of Digital Accessibility - Images

The best way to determine whether accessibility features like Alt Text are working to create the audience experience that you have envisioned is to try navigating your site using the assistive technology that your audience will be using. Find a screen reader, visit your website and listen to the page. Experiencing your page with the proper assistive technologies is the best way to ensure that you are delivering the best and most consistent user experience to all of your customers.

To try navigating your website without images, you can disable images in your browser settings.

For Safari:

From the Safari Menu select Preferences > Appearance > Uncheck Display images

For Chrome:

In Chrome, open Settings > Privacy and security > Site Settings > Images > Select “Don’t allow sites to show images”

For Microsoft Edge:

Microsoft Edge does not have a built-in setting permitting you to toggle images on and off. Search browser add-ons for a browser extension to turn images on/off.