The Americans with Disabilities Act (ADA) is one of the most visible and one of the most complicated pieces of legislation in the sphere of accessibility. If you want to look at some of the ins and outs of what an ADA compliant website means, please take a look this blog post first
In order to test your website for accessibility compliance, you can use Accessibility Chrome Extension for manual testing.
Having an accessible website and marketing materials means having your entire team briefed on what accessible marketing looks like. Don’t panic—once you get the hang of things, it’s very quick to ensure your site is accessible.
Start by keeping the following guidelines in mind:
When writing content for web, emails, social media, etc., it’s important that content is accessible for people with all four types of disabilities: visual, hearing, motor, and cognitive.
To help those users with a screen reader or other visual impairments easily read your content, use headings properly. That means using the proper heading tags (e.g. use the H2 function, instead of simply using a bigger or bolder font). Your headings should also follow a logical hierarchy: the title or H1 is followed by an H2, and underneath an H2 heading use an H3 heading. This makes the structure and importance of content easy to follow.
Making content easy to read and follow is important for readers with cognitive disabilities, but it also makes your content easier to scan and read for other users as well. Keep your sentences short and to the point.
Use bulleted lists, summary sections, and bolded keywords for easier scanning. Start with the most important information and end with the least important information. Avoid jargon and overly complicated words. Left align all text, including headlines.
When linking to other webpages, don’t use “click here” as the link text. Using descriptive link text make it clear to users with screen readers or visual impairments which link is which and where each one leads.
If you link to PDFs, PowerPoints, Word documents, or other types of files, make sure those files are accessible.
Accessible design means making your design more usable for everyone, not only people with disabilities. Here are a few things to think about when it comes to accessible design.
There are three main ways you can make videos more accessible.
All images should have alt text, which is a short text that clearly and neutrally describes what’s going on in the image. This is the text screen readers read when they come across an image, so file numbers or unhelpful information can cause major usability problems for visually impaired users. For decorative images, the alt attribute should be empty (e.g. alt:“”).
About 4% (or 312 million people) of the world’s population has some form of color blindness, which means that using color alone to communicate information can cause problems for some users. Use patterns, fill, sizing, borders, icons, or whitespace to communicate in addition to color.
When using color, make sure that the contrast is sufficient enough that users can read text or see color differences. For level example, WCAG 2.0 level AA compliance requires that your text have a contrast ratio of 4.5:1. If this sounds overwhelming, simply use a color contrast checker to double check your color combinations.
Sans serif fonts are easiest to read, as they don’t include the small decorative markings. Limit the number of fonts you use (e.g. one for body text and one for headlines). Always use at least size 12 font and use bold for emphasis, rather than italics.
In order to make your website accessible (and increase conversions!), it’s important to think about all four types of disabilities: visual, hearing, motor, and cognitive. Website accessibility is a huge topic with many areas to explore. For marketers, we’ll focus in on three main areas.
Keyboard navigation is important for people with visual and motor disabilities. Users who can’t use a mouse or who use a screen reader should still be able to navigate through your website. Make sure users can tab through menus, buttons, and all other navigational elements.
When users navigate to an element, they should have some type of indicator or focus to show where on the page the user is.
Form and table labels
The most important element for form accessibility is labels. Make sure each form field has a label (using the <label> element in the code for each field). That will ensure screen readers read the name of each field. If the user needs to know critical information about a field (e.g. if a password must be at least 9 characters), don’t include that information as placeholder text in a field but instead as text underneath the field label.
Make sure forms are easy to use and have a logical flow. Forms should, of course, be keyboard accessible, so users can tab through fields. Provide instructions at the top of a form to help users understand how to fill them out.
CTAs are critical for marketing success, so it’s important that all your CTAs are accessible. Your buttons should always have an accessible name, which is usually the text on the button itself. Use an aria-label for the button in order to give screen readers the proper information. It might be helpful to walk through a few button accessibility best practices with your website development team to ensure CTAs are fully accessible.
Did you know that you can use your smartphone to remotely set thermostats, watch security cameras, and start cars? Consider
Save my name, email, and website in this browser for the next time I comment.