When creating post-click landing pages, how many advertisers think about web accessibility?
If this is the first time you’re thinking about accessibility, chances are you’ve already been losing conversions. The fact is that one-in-five online users require accommodations to use a web page. These statistics from the CDC and the Epilepsy Foundation emphasize the need for post-click landing pages to be accessible to everyone:
Making sure your post-click pages are ADA and WCAG compliant is the way to ensure accessibility to everyone.
In today’s post, we explore what ADA and WCAG compliance entail and why it’s important for advertisers to implement these accessibility standards on their pages.
What does online ADA compliance entail?
The Americans with Disabilities Act (ADA) was instituted in 1990 in an effort to end discrimination based on differing abilities. The specific requirements to meet compliance tend to be a bit vague and confusing since the ADA does not explicitly address online compliance.
However, one can look to the most comprehensive guidelines for building and maintaining accessible websites for guidance — the Web Content Accessibility Guidelines (WCAG), published by the W3C.
What is the WCAG?
The WCAG are guidelines that ensure every web page is accessible to people with a diverse range of hearing, movement, sight, and cognitive ability.
Web accessibility includes making websites, tools, and technologies so that people with disabilities can use them. More specifically, visitors can perceive, understand, navigate, and interact with a page and contribute to the page.
The WCAG has three versions:
- WCAG 1.0 was drafted in 1999
- WCAG 2.0 was published in 2008
- WCAG 2.1 was created in June 2018
Version 2.1 includes 17 new success criteria (more on that below) of which Accessibility issues are categorized into four distinct groups under WCAG guidelines. These issues can be summed up with the P.O.U.R. acronym:
- Perceivable: Can all users perceive the content on the page?
- Operable: Can all users interact with the page?
- Understandable: Can all users understand the content on the page?
- Robust: Can the content be interpreted by a wide variety of programs and devices, including screen readers?
The WCAG guidelines break down accessibility issues and recommendations into three levels:
- Level A: This is the most urgent level and includes problems that can severely limit a disabled visitor’s ability to navigate or use the page.
- Level AA: The level is considered to be the standard for most commercial websites. It addresses areas where improvement is needed to give disabled users the full experience of a webpage.
- Level AAA: This is the highest standard, it includes fine-tuning on issues that both level A and AAA address. However, AAA compliance is likely beyond the reach of most web pages.
How can you make your post-click landing pages accessible
Here are nine ways you can ensure your post-click pages meet the accessibility standards:
1. Make your page keyboard friendly: Visitors should be able to navigate your post-click page even if they don’t have a mouse, using only the keyboard ‘Tab’ key. Doing this helps audiences who use assistive technologies to navigate and scroll through the page and click the CTA button.
2. Make all the content accessible: Many post-click pages use dynamic content — content that changes based on predetermined tags. This can become a problem if the page doesn’t inform assistive tools of the change since many screen readers will only “read” the page content as it appears when it first loads. When using dynamic content make sure to tag dynamic content as a live region, this enables screen readers and similar devices to understand the content as it changes.
3. Include Alt text with all images: Adding alternative text to images guarantees that text appears as a replacement for the image if it fails to load, describing and giving context about the image.
4. Add contrast to the page: This is a necessary step to make sure copy and all page elements stand out from the background and are visible to users with visual disabilities. Ideally, you should set a dark color against a light one, making sure that they don’t merge into each other:
5. Use headers to structure content: H1, H2, and H3 help structure your copy and make it easy for users to interpret.
6. Label form fields: Confirm that each form field on your page is clearly labeled as this allows a user with a screen reader to understand how they can fill out the form. The Amplitude page features labeled form fields:
7. Create responsive pages: Responsive pages reformat and restructure on any device regardless of screen size. The pages scale from the smaller screens of mobiles, tablets, and small laptops, to the standard desktop screen and even larger widescreen monitors — all while offering flexibility and great usability for users on all devices.
8. Avoid auto-playing media and sliders: Auto-play videos can frustrate users who use screen readers as it can be difficult to mute or pause them. Similarly, sliders and carousels can cause users to have problems with comprehension.
9. Create accessible copy: Stay away from acronyms and technical jargon so all users understand what you’re offering.
How can you check if your page is ADA and WCAG compliant
Many online resources allow you to check if your page is compliant. All that is required is to enter the URL and your email address.
BOIA allows advertisers to check if their pages are compliant with accessibility standards:
AudioEye scans your page for free and sees how it measures up in terms of accessibility:
Siteimprove checks your page’s accessibility and provides automated testing that adheres to WCAG standards:
You can also download the following Chrome extensions to check accessibility.
The Wave evaluation tool provides visual feedback about the accessibility of your web content by injecting icons and indicators into your page. It facilitates human evaluation and educates about accessibility issues. The tool gives details on a number of issues, structural elements, contrast errors, alerts, and alt text:
Advertisers can download the UserWay widget to assess page accessibility solutions without refactoring the existing code – ensuring a comprehensive legal and regulatory compliance framework covering ADA, Section 508, and WCAG 2.1 AA.
The widget is available for all leading CMS platforms as well as plain HTML/CSS/JS sites. The tool offers critical accessibility features and a broad selection of functions that users can mix and match to meet their individual accessibility needs:
Round Table Pizza features the UserWay widget to ensure accessibility. First, with the reading guide line, then inverting the colors on the screen:
ChromeVox is a screen reader that brings the speed, simplicity, and security of Chromebooks to users with visual impairments. ChromeVox comes pre-installed on Chromebooks, but can be downloaded as an extension.
The extension highlights each page section and reads it aloud for the user:
What you can do in Instapage to meet compliance
Instapage recommends and facilitates all users to adhere to website accessibility standards and create pages that are tailored to all audiences. This includes:
- Providing users an easy way to add image alt texts to all page images
- Making pages keyboard accessible
- Allowing screen readers to recognize all form inputs and submit button
- Adding appropriate HTML tags
- Adding the language attribute to pages by submitting a request to the support team
Establishing a page’s language with the lang attribute is a requirement of the WCAG, and in doing so benefits the user in two ways:
- allows translation services such as Google Chrome to function correctly
- the attribute tells screen readers how to pronounce the page content correctly
Make your post-click pages accessible to everyone
To guarantee that all users who visit your post-click pages have an equal opportunity to convert, it’s important the pages are accessible to everyone.
To explore more about creating accessible, personalized post-click landing pages at scale, request an Instapage Enterprise demo today.
See the Instapage Enterprise Plan in Action.
Demo includes AdMap™, Personalization, AMP,
Global Blocks, heatmaps & more.