Posted by: Greg Pammer | Share:
In its simplest form, ADA Website Compliance is ensuring that your website adheres with WCAG 2.0 AA (or, even better, 2.1 AA) so that web visitors with disabilities have equal opportunities to view your website content, resources, and products that you have to offer.
Simply put, you do not want to have an ADA Website Compliance lawsuit on your hands. But, not to fear – we have put together a simple way to make sure your site is up to par with the leading standards. We’re kicking off this series by focusing on Design standards first, but we’ll share more on Web Development and Content standards to consider, as well.
One of the most important contributing factors to website accessibility is the use of color. Color should not be used to convey something, solely. For example, if you hover over a hyperlink, it should not only change from blue to purple, but should also include a “decoration,” such as an underline, a highlight, or another clearly identifiable element.
To dig deeper, color contrast also plays a significant role, especially the color of any given text and the background. Any text that is over 18pt must have a contrast ratio of 3:1, while any text that is under 18pt must have a contrast ratio of 4.5:1.
Using Polypane, you can find out the ratio with just two colors: the font color and the background. The image below shows an example of acceptable contrast between the text and background. You can check to see if your brand colors are compliant for the web, or if they need some tweaking – and this color contrast checker even gives you suggestions if it does not meet the standards.
So, you used Polypane and the ratio wasn’t in line with AA standards, but you don’t like their suggestions. Now what? You can take the next step and visit Colorable to input your text color and background color again. By sliding the saturation or lightness slides under the text fields, you will get a compliant hex # that will be ADA-compliant for your website.
These standards are more in line with design best practice principles. If it doesn’t look pleasing or is hard to read in general, it is most likely not up to ADA standards.
The line height, or line spacing, should be at least 1.5 times the font size
Spacing following paragraphs should be at least 2 times the font size
Letter spacing, or tracking, should be at least 0.12 times the font size
Word spacing should be at least 0.16 times the font size
A focus state displays when a user has highlighted an element using a keyboard or voice. Focus states apply to all interactive components on your website. If you’ve ever tabbed through a website or used voice search, you may have noticed outlines around major elements like buttons or links.
Focus states should be obvious when activated. Since this begins to overlap with the development stage of a web design, it’s important to design for this as well so that it fits within your brand.
If you view a form right out of the box from bootstrap, you will notice there’s not much to look at: styling is minimal and not very pleasing to the eye. Nevertheless, all the elements are set in place already to be accessible. It’s important to keep form design and styling in mind when considering web accessibility, as what may appear to be more aesthetically pleasing may result in poor compliance.
For example, removing labels and only providing placeholder text inside of a field does not give web accessibility readers the access they need to provide a compliant output to visitors.
To recap, there are four main areas to consider when reviewing your website design for ADA Web Accessibility:
In the next part of this series, we’ll take a step further to look at the web development of an ADA-compliant website.
If you want to learn more about web-accessible design or ADA-compliant websites, reach out to us for a deeper dive and consultation on how we can assist with making sure your website is accessible moving forward.