Setting Up ADA Campaign Controls for Screen Readers (EXTENDED) in Digioh

Overview

The ADA Box Controls for Screen Readers V2 extension in Digioh enhances accessibility by ensuring all Campaign 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, as well as the additional metadata controls available in this extension.New to this extension? See How to Optimize for Screen Readers in Digioh for installation steps.

Prerequisites

Make sure the ADA Box Controls for Screen Readers V2 extension is installed in your Digioh account.

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: Configure Alt Image Metadata in the Campaign Editor

Within the Campaign Editor, click on the image and locate the element metadata section.

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 2: Save Changes

Click the Save button to save the changes.
Publish the account to make the changes live.

Step 3: Verifying Your Configuration

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

Metadata Controls

The ADA Box Controls for Screen Readers V2 extension includes metadata controls that let you customize certain accessibility behaviors on a per-Campaign basis. These settings are configured in the Campaign Editor under the campaign-level metadata section.

Disable Screen Reader

If there is a Campaign you want to opt out of the extension entirely, you can disable it using the following metadata:

Metadata Key: disable_screen_reader
Value: true
Level: Campaign (This can be accessed from the Campaign Editor > Settings > Campaign Settings > Campaign metadata) or Page level (From the Layout tab)

Disable External Tabindex

By default, the extension assigns tabindex values to site elements that appear after an inline Campaign on the page. If your accessibility auditor requires that no tabindex greater than 0 is added to elements outside of the Digioh Campaign, you can disable this behavior using the following metadata:

Metadata Key: disable_external_tabindex
Value: true
Level: Campaign (This can be accessed from the Campaign Editor > Settings > Campaign Settings > Campaign metadata)

Note: This only affects tabindex added to site elements outside of the Digioh campaign. Tabindex applied to elements within the campaign itself is not controlled by this setting.

Disable Focus Trapping on Popups

Focus trapping is enabled by default for popup Campaigns. This ensures that keyboard focus stays contained within the popup while it is open, looping back to the first element rather than escaping to the browser or background page, in line with WAI-ARIA dialog modal guidelines.To disable focus trapping, use the following metadata:

Metadata Key: disable_focus_trap
Value: true
Level: Campaign (This can be accessed from the Campaign Editor > Settings > Campaign Settings > Campaign metadata) or Page level (From the Layout tab)

Customizing Error Message Durations

By default, when a form validation error occurs, the extension injects an aria-live="assertive" region into the page so screen readers can announce the error. After a brief period, this region is cleared so that fresh errors can be re-announced if the user submits the form again.

If your users need more time to hear these validation errors, you can extend this window using the following metadata:

Metadata Key: error_msg_hide_timer
Value: Duration in milliseconds (e.g., 12000 for 12 seconds)
Level: Campaign (Campaign Editor > Settings > Campaign Settings > Campaign metadata)

Tip: The default duration is 8200 ms (8.2 seconds). If users report that their screen readers are cutting off or missing validation errors entirely, increase this value to 12000 or higher.

Alternative Text at the Campaign or Page Level

While configuring alt text on individual images is recommended for unique assets, you can also apply a single alternative text value globally across an entire Campaign or specific Page.

To configure a catch-all or uniform image description, use the following metadata:

Metadata Key	Level	Value	Description
`img_alt_text`	Campaign	Descriptive text	Sets a global alt text applied to all images across every page in the campaign.
`img_alt_text`	Page	Descriptive text	Sets the alt text applied to all images on a specific campaign page, overriding the campaign-level value.

Complete Metadata Reference (All Keys)

For reference, here is the full set of supported metadata keys:

Metadata Key	Level	Value	Description
disable_screen_reader	Campaign or Page	true	Opts the campaign or a specific page out of all screen reader processing. Documented in both articles.
disable_external_tabindex	Campaign	true	Prevents the extension from injecting tabindex on site elements outside the campaign (inline campaigns only). Documented in advanced article.
disable_focus_trap	Campaign or Page	true	Disables focus trapping for popup campaigns. Focus will be allowed to escape the popup. Documented in advanced article.
img_alt_text	Campaign or Page	text string	Sets alt text for all images in the campaign or on a specific page. NOT documented — see Gap 2 above.
error_msg_hide_timer	Campaign	ms integer	Duration (ms) the aria-live error announcement stays visible before clearing. Default 8200 ms. NOT documented — see Gap 1 above.

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.