6 Ways to Design With Inclusion in Mind: Create ADA Compliant Landing Pages

Looking to create a functional and awesome-looking campaign that provides a great user experience for everyone? Make sure it is also accessible to those with disabilities. Take some simple steps to create a ShortStack campaign that works for all of your visitors by implementing the following six suggestions:

Include alt text

When adding images to your campaign, be sure to include alternative text (alt text). Alt text describes images on your campaign in case they aren’t able to be seen by the visitor. Alt text can be added via the Options section of ShortStack’s Image Widget.

TIP: It’s best to avoid including any important information as images. Instead, add text to your campaign using our Rich Text Widget and style it using the Style Panel.

Consider color

When choosing the colors for your campaign, brand guidelines are a great place to start. However, be sure to consider color contrast as well.

  If the colors of different elements don’t have sufficient contrast, it can be hard to distinguish these elements from one another. For example, if an important button or text doesn’t contrast with the background color enough, it could be easy to miss, especially for those who might be color blind or have other visual impairments. According to Web Content Accessibility Guidelines (WCAG), foreground and background colors must have 4.5:1 contrastControl the color of content on your campaign using our Style Panel.

TIP: Use this color contrast checker to learn the contrast ratio for the colors you plan to use on your campaign.

Caption videos

If you include videos on your campaign, be sure those videos have captions. Captioning helps hearing-impaired individuals follow along with the videos. Furthermore, captions are also helpful for folks without hearing impairments, as they might not be in a situation where they can listen to the audio.

TIP: Adding a YouTube video? Learn more about using their automatic caption options or how to add your own captions.

Use headers appropriately

Ever notice those H1, H2, H3, H4 and paragraph tags when adding text? Use them! These tags help screen readers to determine the hierarchy of content on your campaign and allow screen reader users to skip to different sections of the campaign easily. Furthermore, appropriately using headings adds additional benefits for your SEO. Search engines pull keywords from headings, which drives traffic to your site.

Take font styles and sizes into account

Readability of text is important. Fonts should be easy-to-read for everyone who visits your campaign. We have a great guide to choose a font you can check out. Likewise, the size of text is also important, so make sure it isn’t too small. Better yet, use responsive font sizes that will change in size to accommodate the screen visitors are using.

TIP: Use this pixel to EM type size conversion tool to help you find appropriate font sizes.

Set the campaign language

The language of a website can be programmatically set to help screen readers know what language the content is in. If the language isn’t one that the visitor understands, then they will know at the time they visit the page.To set the language of your ShortStack campaign, open the Campaign Settings, then click HTML on the left side. From there, indicate the language in the dropdown below Page Language.Looking for more information on creating ADA compliant campaigns and websites? Check out the WCAG Official Guidelines.