(352) 397-2705

10 Tips for Designing an ADA Compliant Website

by | Apr 30, 2020 | ADA Compliance, SEO, Web Design

ADA compliance on websites is a hot button topic right now. In 2019, the amount of lawsuits file against companies for web accessibility hit 40 lawsuits per week, which tops over 2,000 per year. Because of this, no longer does a website have to function well and look great, it also has to be useable for those with disabilities.

Unfortunately, standards for web compliance have been very lax in coming and are still all over the board. However, while the Department of Justice is still working on specific regulations, web services are already covered by the ADA standards through the Web Content Accessibility Guidelines 2.0 (WCAG).

Most lawsuits that have been filed point back to the lack of accessible website features for people with disabilities such as visual or mobility impairments. Unfortunately, the challenges of designing websites with web accessibility in mind isn’t exactly a hurdle that can be addressed easily.

The process is time-consuming, labor-intensive, and requires a lot of resources. There are companies that specialize in ADA compliance only, however they are extremely expensive, often hitting the five figures a year mark. And, they require ongoing fees to stay in compliance.

Having a firm grasp on the best practices for SEO gets you most of the way there when it comes to ADA compliance.

Work with a web designer who understand the basics of ADA compliance.

No web design agency is going to 100% guarantee that you will never be sued for non-compliance, and we are no exception. Because of the time involved for manual methods of making a website compliant, a website owner may pay $7,000, $10,000, or even more, for the service, on top of the price for the website design itself. And, because of the changing nature of the web, someone could become easily out of compliance within six months.

Unfortunately, anyone can be sued, at any time, for anything these days. And, even working with a big agency that specializes in ADA compliance is no guarantee against such a lawsuit. If you read the “terms of service” of these larger ADA compliance firms, you will see that they will accept no responsibility for you being sued, despite charging you thousands of dollars a year for their service.

For companies that don’t have the deep pockets to work with a large agency that specializes in ADA compliance, working with a web designer, developer, or creative agency that understands the basics of ADA compliance is the first step towards getting there. Having a firm grasp on the best practices for SEO gets you most of the way there when it comes to ADA compliance.

Some of the main things to consider for SEO, where a web spider is “reading” your page and can’t distinguish what a photograph is on it, without further description, are also the same practices that assist website visitors with visual impairments.

1.) Provide ALT text for web images and non-text content.

One of the essential accessibility design principles that you should use is providing alternative text for non-text content, such as embedded iframes, maps, etc., and web images.

Just like web spiders can’t “see” what an image is, visitors with visual impairments use screen readers to “hear” the web. When image context through alt text is provided, a visually impaired person will get accurate descriptions of the website’s content.

2.) Provide keyboard accessibility.

Just like blind people relying on screen readers, users with motor disabilities rely on a their keyboard to navigate through websites. Not all visitors are able to grip a mouse or interact with a touchscreen.

But, it goes beyond just supplying accessibility via a keyboard. It’s important that your website offers an intuitive and logical order of interactive elements on the page.

This means that the tab order of the web design should follow the page’s visual flow — top to bottom, left to right, and header to the main navigation. Next would be the content inputs and buttons, and lastly, the footer.

3.) Check your website’s color contrast.

Review your website elements, such as headings, buttons, backgrounds, text, and links. Very low contrast between foreground and background colors is difficult for website visitors with visual impairments to see. If your site’s navigation has lighter, smaller fonts on light backgrounds, this may be illegible for some users. Or, a dark background with darker type can be difficult for people to read.

4.) Consider your font styles and size carefully.

Overly ornate fonts should be used sparingly on a site. Stick with easily legible fonts and use a decent, substantial size for them. There are large number of website users who are not able to see the things clearly and they aren’t able to see small fonts, headers, and labels clearly.

5.) Use headers and sub-headers effectively.

Using headlines and sub-headlines helps break out content on your page into smaller bites or sections, making the page more scannable for website visitors. No one like to be bombarded with long paragraphs of dense text, whether they are visually impaired or not.

6.) Try not to have outside links open in a new browser window or tab.

Having windows open in a new tab and be jarring for people that aren’t expecting it. If you are going to have one open in such a manner at least reference that fact in the link by adding “title: opening in new window” to the underlying HTML code.

7.) Make sure your podcasts and videos are compliant for people with hearing impairments.

When using content that relies on sound, such as podcasts or videos, don’t forget web visitors with hearing impairments. Make sure videos have closed captioning activated on them and provide transcripts of podcasts for those that can’t hear the actual dialogue. The plus side to providing podcast transcripts is it can help your SEO immensely, since web spiders can’t “hear” the content of a podcast.

8.) The pitfalls of using PDF files on your website.

Many people use PDF files on their websites, which is fine if the PDF is a generated one from the program the document was created in. This usually makes the text “readable” by a screen reader. If you can highlight the text in a PDF document, copy it, and then past it into another program, it is “readable.”

However, simply scanning a file, and uploading it as a PDF, does not make it “readable.” In fact, without additional work on your part to convert the text, it is basically just one big image. Many local government agencies have been sued for this specifically, as they are simply scanning existing documents into PDF files without taking these additional steps to make sure they can be “read” by software.

9.) Create an accessibility statement page on your website.

Make sure your website has a written policy on website accessibility on it and that it is posted somewhere it can be easily found. Often this will be in the footer of the site, so it is accessible on every page, not just the homepage.

10.) Install web accessibility features to your site.

Install web accessibility code that allows users to control elements of your site to better suit their particular needs. For instance we use code that will add an icon to every web page that gives users a choice of several functionalities for customizing their experience on your site.

This will add the following items to your site:

Screen Reader
A powerful, custom-built, integrated screen reader that supports over thirty different languages, native accents, and locales.
Increase Text Size
Cycles on-screen texts through four different levels of text-size increases. Makes every part of your site instantly more readable.
Keyboard Navigation
Provides on-the-fly remediation of non-compliant elements into accessible, keyboard-navigable ones. Critical for those who rely on assistive tech.
Stop Animations
Pauses content that moves or auto-updates that is considered an accessibility barrier. Stops animations, blinking, and flashing content that distracts and may trigger seizures.
Tooltips
Shows alternative text and aria labels for on-screen elements with a simple mouse hover. Tooltips are prominent, high contrast, and easy to read for low-vision users with accessibility needs.
Convert to Accessible Fonts
Converts stylized fonts into accessible fonts and font weights that are essential for visually impaired and dyslexic users who find nonstandard fonts confusing or difficult to read.
Highlight Links
Emphasizes links, buttons, and action elements in clear, high-contrast colors that are easy to identify. Highlights clickable items for easier site usability, navigation, and overall accessibility.
Large Cursor
Increases the standard cursor size by 400% to ensure the pointer always remains in sight. Allows for faster and more accessible navigation through hyperlinks, tabs and form elements.
Reading Guide
Converts the cursor into a high contrast horizontal reading guide. Focuses and guides the eyes to reduce eye strain for users who are visually impaired, dyslexic, cognitively disabled, and users with Presbyopia.
Dark Mode
Boosts the contrast of all site elements with a high contrast dark color theme. One-click remediation to inaccessible and non-compliant low contrast elements, texts, buttons and form fields.
Light Mode
Boosts the contrast of all site elements with a high contrast light color theme. One-click remediation to inaccessible and non-compliant low contrast elements, texts, buttons & form fields.
Invert Colors
Full color inversion for all site elements providing greater perceived color depth, making texts significantly easier to read while reducing eye strain for color blind and visually impaired users.
Text Spacing
Modify text and line spacing for improved readability for dyslexic and the visually impaired users. Offers three degrees of adjustments for a personalized and more accessible reading experience.
Color Desaturation
Desaturates all colors on the page. An important accessibility function that helps users with deuteranopia, tritanopia, and other forms of color blindness to better distinguish your site’s content.
Reveal Page Structure
Quickly reveal page headings, landmarks and links in a clear, structured, easily navigable, and accessible manner. Helps both disabled and non-disabled users find the content they want, faster.
website accessibility widget

If you are interested in having our accessibility features installed, please contact us for more information.

Nora Kramer
Follow Me

0 Comments

Submit a Comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Want to work with us?

We would love to talk with you and see if we are a good fit for each other on a project! Please schedule a call to get started.

Click To Call

Get Our Website Pricing Guide

Enter your email address below, and we will send you our current pricing guide immediately.

You have Successfully Subscribed!

Pin It on Pinterest