Improving Campaign Accessibility

Description: Accessibility features enable advertisers to broaden their audiences and reach groups that have historically been excluded. This article outlines Innovid’s recommended features for improving accessibility to ensure campaign messaging is more inclusive.


 

Innovid supports the following accessibility features:

Accessibility recommendations
Add the language property to the HTML tag.
Elements such as videos should always include a hidden children element with a brief video description for accessibility purposes.
To ensure screen readers ignore purely decorative images appropriately, apply a null (empty) alt property, e.g., <img src="decorative-image-title.jpg" alt="”>
Relevant images, such as a product image that is not mentioned in the creative copy, must have the correct alt tag applied, e.g., <img src="product_1.jpg" alt="Red T-Shirt”>
Add roles to each element within the HTML. Roles are used to identify the task that each element performs i.e., group, button, or link.
Append the tab index property to the desired elements to ensure they are accessible to users navigating through the creative using a keyboard.
Note:  A tab index property with a value of “0” will make the element accessible and a value of “-1” will remove the accessibility.
Ensure that each interactive element can be activated using both the enter and space keys.
Add aria-hidden property where necessary. This property is used to hide elements from accessibility devices.
Order the HTML elements to allow smooth navigation for keyboard users. The focus order should go from left to right and from top to bottom.

The specific order for galleries should be: 

  1. Left arrow.
  2. Gallery (with all the slides/content).
  3. Right arrow.
  4. Navigation.
Interactive elements must have a minimum click area of 44 pixels by 44 pixels.
All interactive elements should have a focus indicator, which should be a 1 or 2-pixel dashed black border. If the elements are positioned over a video, add a 1-pixel white outline to create contrast and ensure the focus indicator is always visible. Additionally, make sure that adding the focus indicator does not cause the element to move.
For elements that take the entire width/height of the creative and need to be focused, ensure there is a 2-pixel margin on all sides of the creative (top, bottom, left, right).
For dynamic elements such as galleries, ensure that items that should not be visible are hidden and have a tab index of -1. This prevents users on accessibility devices from accessing items that are not visible on screen.
In-banner videos start muted and are paused at 5 seconds. To control the videos, buttons for mute/unmute, replay, and play/pause must be added. Replay buttons activate the audio.
Ensure Close Captions and Transcripts are added. A VTT file is required for the Close Caption and a PDF file for the transcript. Everything is uploaded to our asset library.
Was this article helpful?
0 out of 0 found this helpful