Best Practices for Accessible Landing Pages
Are you missing leads? Learn how accessible design can help boost landing page performance.
There are plenty of tips on how to create landing pages that convert, from reducing the number of required fields on your form to making sure your primary value prop is clearly stated near the top of the page.
Unfortunately, many of these conversion guides fail to address the importance of digital accessibility: a set of design practices that help make content accessible to people with disabilities.
In this post, I explain why businesses can’t afford to ignore the accessibility of their landing pages (hint: more than 1.3 billion people globally live with some type of disability) and share some accessibility best practices that can help you build landing pages that convert better for every visitor.
The ROI of Digital Accessibility
Imagine you could help your landing page reach 33% more people, without having to spend an extra cent.
That may sound too good to be true, but it’s actually pretty simple math.
In the United States, one in four adults lives with some type of disability. Many of these disabilities can make it hard to browse the internet, whether it’s a hearing impairment that prevents them from following videos without captions or a visual impairment that makes it hard to read low-contrast text.
If your landing page is not designed with accessibility in mind, some of these people may struggle to engage with your content, which can lead to higher bounce rates or people trying — and failing — to fill out your form.
“If [your page] isn’t accessible, you’re losing customers. And even if it’s technically accessible but a real pain … you’re probably still going to lose some customers.”
Christy Smith, Accessibility Tester
Here’s the good news: Making a landing page accessible to people with disabilities doesn’t have to be hard. You don’t have to rebuild your website from scratch or compromise on your landing page’s design. All you need to do is follow the best practices of accessible design, such as:
- Clear, descriptive headings, links, and call-to-action (CTA) buttons
- Short, simple blocks of text
- Image alternative text on all images and graphics
- Closed captions on all video content
And as an added bonus, many of these best practices are also helpful for everyone who visits your page. After all, who wouldn’t benefit from a headline that provides a clear next step? Or a video that can be watched anywhere, even with the sound off?
As You Consider the Value of Digital Accessibility, Think About Your Audience
Every business should prioritize digital accessibility, but some industries have an added incentive to follow the best practices of accessible design — and often, it comes down to their audience.
Take the real estate industry, for example.
According to a recent report by the National Association of Realtors, the share of first-time home buyers dropped to a record low in 2022. At the same time, the age of the typical first-time buyer climbed to a record high of 36 years — and the typical buyer’s age climbed to 59 years.
What does that mean for realtors?
As the age of their average client increases, it’s even more important to remember that visual acuity typically starts to decline by the time people turn 70 — even if their eyes have always been healthy. According to NAR, baby boomers made up 39% of home buyers in 2022 — the most of any generation, and an increase from 29% the year prior.
Accessibility best practices like minimum color contrast ratios and font sizes aren't just nice-to-haves; they’re essential to creating landing pages that everyone can navigate.
As you weigh the importance of digital accessibility for your business, think about the target audience(s) for your landing pages. If you cater to an older demographic, you might be excluding an even higher percentage of your visitors if you don’t follow the best practices of accessible design.
4 Tips for Accessible Landing Pages
Now that we’ve discussed the why of digital accessibility, let’s talk about the how.
To start, it helps to understand the anatomy of an effective landing page. Unlike other page types, landing pages should have a single focus. You don’t want to distract people with multiple offers or links that point away from your page’s form. You can always include videos, graphics, or testimonials, but the heart of your page should be:
- A clear value proposition
- A call to action, i.e., Download Now or Get a Quote
- A simple form (with as little friction as possible)
So how can you do all that — and make it accessible? Here are four tips to help you get started:
1. Keep Your Copy Short and Descriptive
This might sound like a general best practice, but it’s particularly important for a number of disabilities.
For example, people with cognitive impairments benefit from website copy that is clear and direct, while screen reader users often tab between headings (similar to how a sighted person would skim a page) before deciding if they want to read more.
The W3C’s Supplemental Guidance to WCAG 2 includes best practices for clear and understandable content, such as:
- Use short, descriptive headlines: For people with language or memory impairments, descriptive headlines can help them process pages faster and navigate to the content they want to read.
- Be concise and avoid long, dense paragraphs: Use short sentences with one point per sentence. Try to insert the key takeaway or objective at the start of the paragraph. When possible, use bulleted or numbered lists.
- Avoid double negatives or nested clauses: Clear, simple language can help people with dyslexia and other language impairments understand a page — and any key actions they should take. For example, “Time is limited” is clearer than “Time is not unlimited.”
2. Make Sure Your Form Is Accessible
The heart and soul of every high-converting landing page is the form. It doesn’t matter how crisp your messaging is, or how compelling your offer. If your form is hard to fill out, your conversion rate will suffer.
Most best practice guides will recommend that you try removing extra fields, using a high-contrast CTA button (although this can be problematic for people with color vision deficiency), or restating the benefits of your offer next to the form.
And while each of these can help boost conversion rates, there are some additional accessibility considerations to keep in mind:
- Test for keyboard traps: When testing your form’s accessibility, make sure a keyboard user can move focus between elements on the form. You can quickly test for keyboard traps by opening your landing page and using your keyboard to tab through the fields.
If you’re able to submit the form without your mouse, other users should be able to as well.
- Don’t use color alone to convey information: If you use color to communicate missing or required information, be sure to combine it with another element (such as an error message or symbol) to make sure that people who struggle to perceive color can follow along.
- Choose an accessible CAPTCHA option: Many businesses use CAPTCHA to filter out spam traffic. However, it’s important to provide accessible options — for example, you don’t want to only provide a CAPTCHA option that relies on a user distinguishing between letters, if they have a visual impairment, a cognitive impairment, or dyslexia.
Alternatively, you can use a honeypot to filter out spam traffic without impacting real users.
3. Design for Sound Off
Whether you use video for promotional campaigns, product explainers, customer testimonials, or some combination of the three, it’s important to do it in a way that doesn’t exclude anyone:
- Invest in high-quality audio: People with hearing loss tend to be able to hear better — whether they’re using hearing aids or not — when there is little or no background noise getting in the way of what they want to hear.
- Don’t use autoplay: People who are hard of hearing often have the volume on their devices turned up. It can be embarrassing if they’re in a public place and a video starts playing loudly.
- Proof captions by hand: There are plenty of programs that will automate captions for your videos. Unfortunately, voice recognition isn’t perfect, and those “small” mistakes can confuse or frustrate people who rely on captions. Proofing your captions with human eyes and ears can help catch those mistakes — and deliver a better viewing experience.
4. Paint a Clear Picture for Every Visitor
For people who cannot perceive images visually, image alternative text (or alt text) is supposed to be the great equalizer.
Alt text is a written description of an image that screen readers can read out loud — or convert to Braille — for people with visual impairments, sensory processing disorders, or learning disorders.
Unfortunately, alt text is often used incorrectly — or forgotten altogether.
Here are some tips to help you write more helpful alt text:
- Don’t start with “Image of” or “Picture of”: Screen readers will know from the preceding HTML tag to announce the alt text as an image — so including these phrases in the alt text will only disrupt the user experience.
- Be descriptive: People using screen readers can ignore what you write, but they can’t ignore what isn’t there. Include key details and defining traits.
- Lead with the most important info: Try to put the most important information first, so people aren’t left wondering why you’re describing every minute detail of an image.
- Include readable text: If your images have text (for example: labels that explain product features or benefits), make sure they are either listed in the alt text or described nearby on the page.
Take the Next Step Toward Accessible Landing Pages
As marketers and salespeople, we spend so much time testing different headlines or the placement of a form.
Improving the accessibility of your page is one of the biggest levers you can pull — and unfortunately, one of the least utilized today.
Not only will designing with accessibility in mind force you to be more intentional with every headline and line of copy, but it will also open up your page to the 60 million Americans — and one billion people globally — who live with some type of disability.
Want to get more tips on how to create accessible browsing experiences? Check out AudioEye’s Ultimate Guide to Accessible Web Design. Or, enter the URL of one of your current landing pages below to get a free scan for any accessibility issues.
Ready to test your website for accessibility?
Share post
Topics:
Keep Reading
4 Takeaways From the 2024 WebAIM Million Report
Learn what the latest WebAIM Million report revealed about the accessibility of the world’s leading brands.
accessibility
April 24, 2024
Principles of Inclusive Design: How to Apply Them to Your Digital Spaces
Discover the principles of inclusive design with AudioEye to ensure digital accessibility and enhance user engagement across all platforms.
accessibility
April 22, 2024
Colorblind-Friendly Palettes to Use in Your Web Designs
Colorblind-friendly palettes increase readability for colorblind people. Discover how to create and use accessible color combinations in your web designs.
accessibility
April 18, 2024
