Accessibility guidelines

Make your campaigns accessible - AA conformance

Creating accessible campaigns in Adoric allows users with disabilities such as visual impairment, blindness, color blindness, and more to enter the site, browse and perform all operations properly.

What do you need to do to make your campaigns accessible?

Create a chronological order of elements
Elements must be added in chronological order by placing them in the campaign. For example, in the following ad, the elements should be added in the following order:

1 - X.
2 - Text "Happy"
3 - Text "Women's day"
4 - Text "Sale up to 30% off"
5 - Text "Sign up for the new sale now"
6 - Form
7 - Image



By creating a chronological order of elements in the campaign, you create the order in which the screen reader reads it.

Add asterisk symbol to your required form fields
All required fields must be marked with *. Add this sign to the place holder.


Edit error messages (form)

When a user submits a form with one of the required fields incomplete, we must show a relevant error message.

For example, if the user did not fill in the "Email" field and it is a required field, we must change the error message so that when they click "SEND" it will show "Fill in the email field".

Mark the required field and click on the pen icon, on the left select the 'Confirm validation message' checkbox and fill in the relevant text.




Add only accessible videos to an Adoric campaign
Did you add a video to the campaign? Make sure it has subtitles and is accessible on its own.
Add a second step to Spin to win Campaign
Make sure that once a user submit a form and 'spins the wheel', he or she could get a notification with the prise and the coupon. Click here to read more about Spin to win campaigns. 

You can add this element by selecting text -> variables -> gift. We want to show the user who may have missed the wheel spin what he won.
Change text headings
For each text box, the right heading (1-6). Usually, you add an heading that is related to the text order. The style won't be harmed. 

While editing the campaign, select the desired text element, on the right, select the accessibility icon and change the aria-level. You can repeat the action for each text element in the campaign.




Don't use animation that can't be stopped
Use of animation/movement of elements without the ability of the user to stop the animation is not acceptable. Try not to use Giphy animation and animated carousels. 
Check color contrast
For every campaign you create, you have to check the color contrast. 
Here is a free tool for testing the color contrast. 

Good example of color contrast 

Bad example of color contrast 



Allow "ESC" button for existing a pop-up campaign
In pop-up layout campaigns, the user must be allowed to exit by pressing the ESC key on the keyboard. The option is available on the '[Rules](https://help.adoric.com/closing-options)' page in closing options.
Creating Alt for Images
Adding Alt (alternative text) for an image is required. The text will be read by the screen reader to the users. If the image is only decorative, there is no need to add the alt. 

Select the image, click on the accessibility icon on the right side panel and add free text to the alt section. 




Add aria-label to the closing button
The X button is characterized by an Aria-label. The purpose is to explain that it is a close button. You can change it to any text you want, for example "Close ad".

While editing the campaign, select the closing element (X), on the right select the accessibility icon and change the aria-label. The default value is close.

Updated on: 25/06/2024