Overview

The ADA Box Controls for Screen Readers (EXTENDED) application in Digioh enhances accessibility by ensuring all elements are compatible with screen readers. While most elements do not require additional configuration, images need specific settings for optimal accessibility. This document provides step-by-step instructions on how to configure image elements correctly.

Prerequisites

• Make sure the ADA Box Controls for Screen Readers (EXTENDED) app is installed in your Digioh environment.

Configuring Images for Screen Readers

To make images accessible and compliant with ADA standards, you must add alternative text (alt text) that describes the image. Here’s how to set this up:

Step 1: Access the Custom JS App

1. Log in to your Digioh account.
2. Navigate to the Custom JavaScript apps section under your Names options.



3. Select the ADA Box Controls for Screen Readers (EXTENDED) app from the list.

Step 2: Configure Image Metadata

Within the app configuration, locate the section dedicated to image settings.

• Metadata Key: alt
• Value: product image

Replace product image with a brief, descriptive text that accurately describes the image and its context on your site.

Example:
If you have an image of a “Blue Cotton T-shirt,” your metadata configuration will look like this:

• Metadata Key: alt
• Value: Blue Cotton T-shirt

Step 3: Save Changes

1. Click the Save or Update button at the bottom of the app configuration page.
2. Confirm the changes and close the configuration panel.

Verifying Your Configuration

1. Visit the page containing the image using a screen reader tool.
2. Ensure the screen reader reads out the alt text as you navigate through the images.

Conclusion

Setting the correct alt text for images is crucial for accessibility and compliance with ADA standards. By following these steps, you can ensure that all visitors, regardless of their ability, have a better and more inclusive experience on your site.

For further assistance or queries, please contact our support team.