Tips for creating an ADA accessible website

Over the last year, there have been numerous lawsuits regarding lack of accessibility of websites.

In working with my clients, it’s apparent that this is an evolving area that will become more and more necessary for business owners as well as public entities like government and educational institutions to address.

According to an article in “The Economist”, the early guidelines were just that websites should create “effective communication” but the actual rules of what that is are evolving. According to the article, a group of interested organizations started what eventually became the Web Content Accessibility Guidelines (or WCAG). There are now a number of regularly updated regulations, that outline minimum standards. These standards have not been adopted by the ADA, but are frequently cited in lawsuits.

We have been working to help our clients, especially with WordPress sites, to help them move toward accessibility. This is an evolving field and the means for achieving this are just beginning to be available, but there a some free plugins and tools that you can use to help your website be more accessible and user friendly.

• One such plugin is ANDI which you can easily install in your browser and provides a quick overview of updates you may need to do to your site to make it more compliant.
• Another helpful plugin for WordPress Users is the OneClick Accessibility plugin. It doesn’t fix every issue, but it does provide some tools for enlarging text, contrast and other common problems.

Below are some general guidelines from an article on Civicplus.com about what your business or organization should follow in order to start moving toward an accessible website. It’s a little overwhelming and we’re in the beginning stages of creating a program to help business owners update their websites to be ADA compliant. Please feel free to reach out with any questions or to schedule an appointment.

Headings and Titles

If headings aren’t used properly (or at all), many users will not be able to find what they are looking for. Therefore, you should never use headings decoratively and should always place them in a logical descending manner on the page (H1, H2, H3, etc.).  

When used properly, headings:  

• Ensure all content uses relevant headers. If headings aren’t used properly (or at all), many users will not be able to find what they are looking for.  
• Title all pages so that they relate to the page’s content  
• Use citizen-facing wording rather than internal terminology

Text and Font

Color alone should not be used to differentiate information, as this will be non-perceivable for those with low vision or blindness. Instead use:  

• Bold and italic text  
• Use bulleted lists 
• Feature areas or modules in your CMS 
• Have a high-contrast color scheme 

Also, try to avoid dense paragraphs of text, as this will make your content easier to read for many audiences.  

Populate Tables

Since tables are for data and not page layouts, be sure to populate tables with appropriate column, header, and cell information.

Identify Visuals with Alternative Text

Visuals are a hugely important aspect of most websites, but if used incorrectly, they can create serious barriers for those with blindness or low vision, for example. To avoid potential issues and ensure accessibility for all your website visitors, remember:  

• Always include alternative (alt) text  
• Pay attention to the descriptive details such as the non-image visual 
• All visuals need alt text, not just photos, so be sure to add alt text with icons, buttons, banners, logos, sketches, etc.  
• Any visual element that conveys a message should have alt text 

If there is no text to identify the image, a blind person’s screen reader could not identify the image. The user would not have any way of knowing if the image is a logo, link to another page or simply a stock photo. 

Provide text alternatives for any non-text content so that it can be changed into other forms that people need. Examples of other forms include large print, braille, speech, symbols, or simpler language. 

Use Color Contrast

People with low vision often have difficulty reading text that does not contrast with its background. Providing a minimum luminance contrast ratio between the text and its background can make the text more readable for users who cannot see the full range of colors and help those rare users who see no color.  

Remember:  

• Use contrasting colors to differentiate text from the background for colorblind users.  

• Color cannot be the only means to convey information. 
• Color contrast ratio: All text must have a color contrast ratio of 4.5:1 against its background.  

You can use Monsido’s Color Contrast Checker to ensure that your fonts and backgrounds use sufficiently contrasting colors. This will help to ensure that your web content can be read by all visitors, including those with disabilities. 

Websites Need to be Navigable

Web accessibility issues for people with visual impairments often occur when they encounter a website that is not coded to be both keyboard-navigable and to support assistive technology. 

Remember: 

• Websites should be navigable by both keyboard and keyboard equivalents  
• Keep information in a consistent location 
• Understand that if a user cannot find it he or she will assume it doesn’t exist 
• Consistency helps users find information faster 

• Screen readers move from top to bottom  

Don’t Use PDFs

Image-based formats are challenging for users with visual impairments as they cannot be read by screen readers or text enlargement programs. For this reason, they should be avoided where possible.

Enhance Your Multimedia

Make images and video more accessible by adding audio descriptions to images, including the narration of changes in setting, gesturing, and other details. In addition, add text captions for the deaf.  

Include “Skip Navigation” at the Top of Your Pages

Ensure that people using screen readers can get directly to the content.  

Let’s break it down further into Level A and Level AA compliance to determine if your website currently meets the accessibility requirements. 

Level A – ADA Compliance Checklist 

• Images have alternative text that can be read by screen reader software 
• Video content includes captions 
• Video or audio-only content is accompanied by a text transcript or description 
• Links that are provided to media players are required to view content 
• Headings are presented in a logical order 
• Make sure “b” and “i” tags are replaced with “strong” and “em”   
• There are no empty links or heading tags 
• The presentation does not rely solely on color 
• Automatically played audio does not occur and can be stopped 
• The keyboard can be used to navigate the site 
• A keyboard can be used to navigate the site  
• Keyboard focus is never stuck on one particular page elements  
• Time limits provide notifications to the user  
• Automatically scrolling or blinking content can be stopped 
• No strobe effects or rapidly flashing colors occur on the site 
• Skip navigation functionality allows keyboard users to access content quickly 
• Page titles clearly and succinctly describe the page content 
• Buttons and links are clearly and logically named  
• The language of each page is identified in its code 
• Elements receiving focus do not change the content in a substantial way  
• Invalid form input is identified to the user 
• Forms have labels and legends that can be read by screen reader software 
• There are no major validation errors 

Level AA – ADA Compliance Checklist 

• Live video or audio content includes captions 
• The contrast ratio between text and page backgrounds is at least 4.5-to-1 
• Text on pages can be resized to 200% while still maintaining the form  
• Images are not used where text can achieve the same purpose  
• Pages on the site can be accessed in multiple ways 
• Keyboard focus is visible and clear 
• The language of content is identified in code with any language changes 
• Menus and buttons are used consistently regardless of the user’s location on the website  
• Users are given suggestions on how to solve input errors 
• An error prevention technique is used whenever the user enters sensitive data 
• Underlined text that does not provide a link is removed 
• Redundant links on the same page are eliminated or minimized  

Read the full article here.