WCAG specifications can be tricky, make sure you’re in compliance with all of them.
While focusing on increasing your website’s traffic and optimizing your conversion rates is key to making your business succeed, it’s also important to make sure your website is compliant with all relevant laws and accessibility guidelines.
Overview
In case you were unaware, the Web Content Accessibility Guidelines (WCAG) 2.1 published in 2018 are standards that were developed to make sure websites are readily available for those with disabilities.
WCAG is the most widely accepted technical specifications for providing an obstacle-free experience for all. Justuno’s on-site promotions conform to WCAG 2.1 AA guidelines. This means that your promotions (when accessibility labels are filled out) can be read by a screen reader. Filling out these input fields in the design canvas will ensure that your site is WCAG compliant.
Note: The text field and close button layers will automatically be read by screen readers even if their accessibility label is not filled out.
The following layers have accessibility label options:
Image Layer: Describe the image within the promotion concisely, this will ensure that screen readers capture the essence of the pop-up.
Email Entry Field & CTA/Submission Box: One of these will be the first section read by a screen reader depending on which action field is first. Include instructions so the screen reader can tell the visitor what information is being requested from them.
Promotion Close Button: This is the last layer to be read by a screen-reader and is automatically read by screen readers.
Keep the following in mind with regard to how screen readers function and will interact with your pop-ups.
Most website visitors will scan the promotion from left to right, which will read each input field as it’s highlighted.
Certain types of promotions will be read with different functionalities. Center promotions are going to be the main focus of these readers, allowing visitors to use the ESC key to close the pop-up easily. If your promotion has the tab feature, highlighting it will close the promotion.
This updated compliance also means Justuno promotions can be navigated using only a keyboard, meaning that clicks are not required for filling out fields, so only arrows or tab buttons are needed.
Overall, this isn’t an advanced targeting or segmentation strategy, but it is a best practice tactic we recommend. Making your website compliant with guidelines helps you prevent complaints or potential lawsuits against your site. It also opens up your audience to even more consumers who otherwise may have been unable to engage with your on-site messaging and promotions.
Details
Socks for All are an online retailer of themed socks for every hobby. During a rebrand project, they wanted to bring their website into full compliance with WCAG 2.1 AA, including their on-site promotions.
Once they’d covered the two main sources of complaints, the lack of alt text on images and closed captioning of on-site videos–they wanted to tackle their promotions.
Using Justuno, they were able to enter their accessibility labels into their form fields as they created them in the design canvas. Socks for all were able to make sure their pop-ups (in all formats) were fully WCAG 2.1 AA compliant–this was a huge step forward to opening up their audience and ensuring they were as operable as possible for all visitors.
Setup
Let’s check out how Socks for All added in these labels below:
- Socks for All opened up their on-site promotion in their Justuno account in the design canvas.
- Selecting each layer individually, they clicked the tab that reads ‘Other Options’ on the right side of the design canvas.
- Here is where the accessibility label box is located, and you can fill out a short, clear description of the layer and its purpose. For the elements that are automatically read like the close button mentioned above, this is unnecessary but can still be done if you want a specific phrase to be read.
- Click save once all the layers labels have been filled out, and you’re good to go. Socks for All did this for all their promotions so their on-site campaigns would be fully WCAG compliant.
