ADA Compliance for the WEb

Did you know that your website has to be ADA compliant? Most people don't, and that could be a huge liability to your brand.

ADA is the Americans with Disabilities Act which became law in 1990. The ADA is a civil rights law that prohibits discrimination against persons with disabilities in all areas of public life. When thinking of how ADA is applied to business most usually you think of ramps to access buildings, signs with a clear bold print, and all entry and exit points clearly noted in both block characters and braille.

Most recently the internet has come under the scrutiny of being a public place and therefore if you're operating a website in the united states you probably want to make sure its ADA compliant.

Lawsuits against companies whose websites are not ADA Compliant is a multi-million dollar industry and can cause many small business owners to go under. When thinking about this keep in mind that what might be a few hundred to a few thousand dollars to have a website designed to be ADA compliant could save you triple that in the long run.

In this post, we're going to detail the highlights of the ADA compliance law as it has been interpreted for websites. You can also view the video (at the beginning of our post) to see this information in a more graphical format.

Section 1: Alternatives to Images

  • Alt text : All images and non-text content needs alt text
  • Video & Audio alternatives: All video-only and audio-only content has a text transcript. Transcripts are clearly labeled and linked below the media.
  • Closed captioning: All video with sound contains accurate closed captioning.

Section 2: Presentation

  • Sensory characteristics: When providing detailed instructions, make it so they aren’t reliant on a single sensory ability.
  • Use of color: Do not rely on color alone to convey information.
  • Audio control: Any audio must be able to be paused, stopped, or muted.
  • Color contrast: There must be a color contrast ratio of at least 4.5:1 between all text and background.
  • Text resize: Text must be able to be resized up to 200% without negatively affecting the ability to read content or use functions.
  • Images of text: Do not use images of text unless necessary (e.g. logo).

Section 3: User Control

  • Keyboard only: All content and functions on a website must be accessible by keyboard only (No mouse, and ability to easily be used via mobile w/ a keyboard).
  • No keyboard trap: Keyboard-only users must never get stuck on any part of the website; they must be able to navigate forwards and backward.
  • Adjustable time: If there any time limits on a website, users have the ability to turn it off, adjust it, extend it.
  • Pause, stop, hide: If there is content that blinks, scrolls, moves, users must have the ability to pause, stop, or hide it.
  • Three flashes or below: Web pages do not contain anything that flashes more than three times in any one second period.
  • Skip navigation link: A “Skip to Content” or “Skip Navigation” link allows users to bypass the heading and go straight to the main content.

Section 4: Understandable

  • Page titles: Each page of a website needs to have a unique and descriptive page title.
  • Focus order: Users must be able to navigate through a website in a logical sequential order that preserves meaning.
  • Link text: The purpose of each link should be clear (e.g. don’t use “click here”)
  • Multiple: There are multiple ways to access different pages/information on a website (e.g. search bar, nav menus, sitemap, helpful in the footer).
  • Focus indicator: Any “user interface control” that receives focus from a keyboard user should indicate that focus on the currently selected element (e.g. add a visible border around a text link).

Section 5: Predictability

  • No focus change: Nothing changes merely because an item receives focus; a user must actively choose to activate/click an item before a change takes place.
  • No input change: Nothing changes just because information is inputted into a field (e.g. form doesn’t auto-submit once all fields are filled out).
  • Consistent navigation: Keep navigation layout consistent.
  • Error identification: Make any form errors easy to identify, understand, & correct.
  • Form labels and instructions: Programmatically label all form or input fields so that a user knows what to input and what format is expected.
  • Error suggestions: If an input error is automatically detected, then suggestions for correcting the error should be provided.
  • Error prevention on important forms: For pages that require important data submissions, one of the following is true: 1) submissions are reversible, 2) the user has an opportunity to correct errors, and 3) confirmation is available that allows an opportunity to review and correct before submission.
  • Name, role, value: For all user interface components the name, role, and value should all be able to be compatible with assistive technology.

Leave a Comment