When the ADA was passed in 1990, the internet was in its infancy. Today there are millions of web pages with trillions of dollars of revenue pouring through them each day.

The amount of webpages continues to grow, but how do they accommodate a person with disabilities? What difficulties would a designer encounter if they were creating a page accessible to all people, regardless of their disability?

How do you know if your website is ADA accessible? You can make sure your website is ADA accessible by following a series of technical guidelines that have been in place since 1999. They are called the WCAG.

What is the Americans with Disabilities Act?

The Americans with Disabilities Act protects Americans with disabilities from discrimination and gives them a right to:

• Easily access government
• Job opportunities
• Purchase goods and services

Though less well known, Title IV of the ADA applies to internet accessibility as well. Title IV of the ADA involves the usage of telecommunications and their ease of access. It forces businesses to make their web pages accessible to all people with disabilities.

What Disabilities are Covered by Web Content Accessibility?

Established in 1999, the Web Content Accessibility Guidelines 1.0 (WCAG) aid the foundation for the version in operation today. As a starter, they concentrated on just HTML, a great step for inclusion.

The 2.0 version was passed in 2008, and in the decade since its inception, the WCAG had grown into a fully functional and strict set of guidelines. The Web Content Accessibility Guidelines (WCAG) set up a basis for allowing your website to be easily accessed by:

• The blind or low visioned
• Deaf and hearing impaired
• Learning disabled
• Cognitively limited
• Speech disabled
• The photosensitive
• Limited movement ability
• A combo of any of the above
• The older with a declining ability level

How do You Make Your Page ADA Accessible?

The WCAG does an excellent job of giving you the data needed to ensure that people with all disabilities have access to your webpage.

They have established four principles, each with several subcategories, when followed will provide access to all. They are:

• Perceivable
• Operable
• Understandable
• Robust

Principle #1 – Perceivable

“Information and user interface components must be presentable to users in ways they can perceive.”

The user must be able to understand and manipulate the content on the page despite their ailment. Perceivable can be further broken down into four categories, they are:

• Text alternatives
• Time-based media
• Adaptable
• Distinguishable

Text Alternatives

Non-Text content – When there is non-text content there must be a text alternative. For example, if there is a CAPTCHA there must be text that describes the captcha’s purpose.

Time-Based Media – Some websites have embedded video or audio that runs at a preset time. An alternative to this would be:

• Closed Captioning
• Sign Language
• Audio only
• Video only
• Audio Description

Adaptable – If a site has any limitations to regular content, it must have an adaptable interface to the person. If it isn’t accessible for people with disabilities you could face hefty fines and more legal trouble. Make a website with a simple layout but maintain the message and provide correct information. Examples would be:

Info and Relationships – Information and relationships should be available by text.

Meaningful Sequence – “When the sequence in which content is presented affects its meaning, a correct reading sequence can be programmatically determined.”

Sensory Characteristics – The information you give must not be solely reliant on sensory characteristics. These are:

• Shape
• Color
• Size
• Sound
• Orientation
• Visual location

Distinguishable – Create a site that makes the foreground and background distinguishable from the rest of the elements. A large part of accessibility problems occur with people who have lost or are losing their vision. Making distinguishable foreground and background provides stability and allows for those with a weaker vision to navigate the page much better. These are:

• Color Usage
• Contrast (minimum)
• Images of Text
• No background audio
• Images of Text (no exception)
• Audio Control
• Text Resize
• Contrast (enhanced)
• Visual Presentation

Principle #2 – Operable

“User interface components and navigation must be operable.”

The WCAG is a working document. Over the years it has grown and shrank to encompass every aspect of user accessibility.

You would think it is a no brainer, but if there is a link or button it must have a purpose. Functionality should allow the user to interface with the keyboard.

Keyboard Accessible

Every function that your site can perform should have an accompanying series of keyboard inputs that make the page available for all users.

No Keyboard Trap

If an application component is available, it should be used in preference to the keyboard.

Keyboard (No Exceptions)

“All functionality of the content is operable through a keyboard interface without requiring specific timings for individual keystrokes.”

Everything that your webpage offers should be easily accessed by the altered function keyboard or screen reader.

Enough Time

Make an appropriate amount of time to allow for the user interface. Ways to achieve this are:

• Turn off the monitor timer
• Allow the user to adjust the time limit
• Give the user a warning before closing
• Real-time exceptions (online auctions, etc.)
• Essential exception (hard time limit)
• A 20-hour exception

Seizures and Physical Reactions

“Do not design content in a way that is known to cause seizures or physical reactions.”

People with epilepsy and other seizure-related illnesses can have episodes based on excessive flashing lights. Making animations with excessive flashing is not recommended. A general rule of thumb is to have less than three flashes per second.

Navigable

• Your site should be easy to navigate and provide ways for users to access the content. You create this ease by:
• Creating Bypass blocks
• Having a descriptive page title
• Keep sequential order of the site in viewing component
• Multiple ways to navigate the site
• All the headings are appropriate
• A focus indicator must be applied
• Info about the user’s location on the site
• A way to see the purpose of a link through text
• Clear section headings

Input Modalities

“Make it easier for users to operate functionality through various inputs beyond the keyboard.”

Several alternate devices now exist to allow people with all kinds of ailments to gain access to the web. When designing your page, accommodate every different input mode allowable.

Principle #3 – Understandable

The information and interface on the page should be easy to understand.

Readable

It should be your goal to make everything on the page readable and easily understood.

Language of Page

The language needs to be adaptive. Meaning, the viewer might also need the page in a different language. Making it adaptive makes it more available.

Language of Parts

“The human language of each passage or phrase in the content can be programmatically determined except for proper names, technical terms, words of indeterminate language, and words or phrases that have become part of the vernacular of the immediately surrounding text.”

Unusual Words

Believe it or not, there’s an app for that. What I mean is, there’s a piece of adaptive equipment for most ailments. The best could be an app that determines the usage of unusual words even in jargon and slang.

Abbreviations

If there are abbreviations for company policy they should be accessible in full text as well.

Reading Level

Try to keep the reading to a secondary education level. Keep the tone light and informational with a conversational tone.

Pronunciation

Apps should be available to pronounce words and have them readily available for usage.

Predictable

Web pages should operate as they normally would. To make the site predictable it should contain:

• If a component receives focus it shouldn’t change the focus
• When user settings change the page should remain unaffected
• Navigation marks should be uniform and stay in the same place
• Pages that have the same functionality are ID’d consistently
• If a page makes the above changes it should have the option to return to normal

Input Assistance

• If input errors appear on a page they must be explained to the user
• Instructions are made available when the content requires
• Suggestions for correction must be provided to the user

Error Prevention (Legal, Financial, Data)

When errors are found on a page that has legal or financial commitments, they must be:

• Reversible
• Checked
• Confirmed

Help related to context issues must be available.

Principle #4 – Robust

The content provided must be so robust that it can be disseminated from all user interfaces. Robust is a term used for content that is easily used by several different browsers and assistive technologies.

Content that uses markup language cannot contain dual attributes and must have a beginning and ending tags.

“For all user interface components (including but not limited to: form elements, links, and components generated by scripts), the name and role can be programmatically determined; states, properties, and values that can be set by the user can be programmatically set; and notification of changes to these items is available to user agents, including assistive technologies.”

A Comprehensive List of ADA Qualifications

The WCAG is a technical manual that can be confusing. Larger corporations and conglomerates can afford the technical staff to discern all the problems your site may have. For everyone else, the language and terms used in the WCAG go over their heads.

If you are a small business building your way towards market dominance but still operate out of your extra bedroom, this is the list for you. In the Armed Forces, they use a term that makes total sense, Barney Style.

It means to break a process down to its most simple terms. So easy, Barney could understand it. We’ll do our best to break the ADA compliance list down Barney Style:

• Every file and image must have an alt tag – Alternative ways to access each of these types has to be provided.
• Explain your graphics – The time and effort put into designing a series of graphics must also come with an explanation.
• Alt descriptions must match – If there are alternative descriptions for files, they must match the original files.
• Links with descriptions – If there’s a link, there has to be a description of the object and its destination.
• Decorative graphics – If there are decorative designs, they must have empty descriptions.
• Video captions – All videos must have closed captions.
• Audio descriptions – If there is a video, there must be an audio description.
• Create text transcripts – For all videos and audio, create a transcript.
• Link to video – If there’s a link to the video, provide it. Embedding the video is bad. Often, if you provide a link, there could be no captions, or they may not be easily accessed.
• Media player – If there’s a media player, there must be a link to download the player.
• Transcript link – Also provide a link to the transcript of the video, when possible.
• Image map link – There must also be a link to the site map of the image.
• Area tags – If there are tags, they must have an alt attribute.
• ID tables – If there are tables and columns, they must be labeled correctly.
• Table purpose – Tables that do not have a purpose do not have headings and columns.
• Flashing images – Make sure the images on the page don’t flash.
• Strobe effect – No strobe effects on the page.
• Compliant plug-in – A link must be shared to download the appropriate plug-in needed to provide access.
• Java usage – The Java plugins on your page should be accessible if not there should be a link to down them.
• Label – If there are form controls, use the label element.
• Title attribute – If there is no text available, use the title attribute.
• Special instructions – If there are special instructions, they should be included in field text.
• Tab order – The order of tabs on the page should make logical sense.
• Skip navigation – If users have a reader, there must be a place to skip the button.

Top 5 Reasons to Make Your Site ADA Accessible

• To avoid penalties – Having an easily accessible site keeps you out of endless legal trouble. If your site doesn’t meet the requirements set forth by the ADA you are subject to lawsuits by people who are denied the right to use the page. It’s very important to follow these ADA rules.
• ADA Compliance makes your page better – Using the ADA list makes your website easier to maneuver. If it is easier to use, then it should be easy to understand.
• Compliance can help reputation – It is not uncommon for people with disabilities to go to several other pages before they have the user interface they need. If your page has this interface, they understand how important their needs are to you. You’ve just now made an excellent customer as well.
• Improved SEO – Search Engine Optimization improves when more people can access the page. SEO has become a vital task for web page operators and ADA capable pages reach the top of search pages much easier.
• Larger Audience – Being accessible to people with disabilities gives you a larger customer base. The purpose of your page could be sales, marketing, or some form of media that involves a product. If your goal is to sell this product, then having a larger audience is your first step to success.

Adaptive Computer Technology

There are many devices available to assist users with a plethora of ailments and disabilities. The main types are:

• Transparent Hardware Adaptive Interfaces
• Computer Access Software
• Input Devices
• Augmentative Communication Devices
• Speech Recognition/Voice Controlled Systems
• Products for Visually Impaired
• Assistive Technology Programs

Transparent Hardware Adaptive Interfaces

These are devices that replace keyboard and mouse input. There are devices that convert Morse code into keystrokes as well as a joystick-based option.

Computer Access Software

Most software is geared towards on-screen keyboards. These are for people who have trouble clicking on a mouse or using a keyboard for input.

Input Devices

Input devices cover the widest array of adaptive technology. They are broken down into five subcategories. They are:

• Keyboards
• Pointing Devices
• Eye Control
• Switches
• Microphones

On the market are some of the most useful items for people who have trouble with the typical keyboard and mouse. These specific devices and tools include:

• Programmable keyboards – a touchscreen module that allows for the user to best set up the keyboard for their disability.
• Multifunction joysticks – A single joystick with added buttons to allow for single-handed usage.
• Alternative keyboards – Voice amplifiers and adaptive pens with recording technology allow users to bypass the keyboard completely.
• One-handed keyboards – The mass of buttons pared down to fit a singular keyboard that allows for easier access.
• Pointing Devices – Pointing devices replace the mouse capability of your computer. The products in this category are:
• Touchpad controllers – These mirror the trackpad on your laptop. They allow a single finger usage to input and select data.
• Remote eyeglasses – An electronically controlled pair of glasses connected to a screen allowing for user input.
• Body trackers – There are programs that allow you to use your body position to input the information you need.
• Mouth controlled devices – Small controllers that fit inside the mouth that allow people to perform input operations.
• Mouse alternatives – Also in this group are a tiny sliver of mouse alternatives for people who have lost the use of their hands.
• Eye Control – These devices are small interfaces that can track the user’s vision and input the information visually.
• Switches – These are tiny boxes with a clicker on the top like a normal mouse. The major difference is these have the ability to detect lighter touches and can be tapped anywhere on the face of the box for input.
• Voice – Microphones populate internet sales booths. What we mean by this heading are the pure AI microphones like Siri or Alexa. These AI allow the user much more usability.

Augmentative Communication Devices

This encompasses the realm of devices used to replace speech. The area has become so user-friendly that versions of augmented communication devices are easily found in the app store on your smartphone.

Speech Recognition

Speech recognition software has been around for a while now. These super cool modules today do:

• Dictation
• Allows voice command
• Continuous speech

Products for Visually Impaired

Most populous in this list are the platforms that allow your computer screen to show larger fonts, making it easier for low vision people.

This one is a creative and fun field with amazing apps for not only computer-related items but applications for your wallet too.

Assistive Technology Programs

There is a special sector of college education that deals with allowing people with disabilities to progress their education. These programs bring vitality to people with disabilities and their importance to Title IV of the ADA is critical.

Title IV is the heading of the ADA in which you would find telecommunications accessibility.

What is an Assistive Electronic Device?

An assistive electronic device is an interface used to make electronics usage easier for people with disabilities. The biggest hurdles for those with a disability in electronics are:

• Inputting information
• Reading documentation

Inputting information into a computer for people with disabilities is the first big problem with tech. Those:

• Without vision
• Low vision
• Loss of function in the limbs

These individuals benefit the most from having an alternative to the standard keyboard/mouse combination. Reading documentation is a common problem.

Screen readers are the most common form of interface used for those with no or low vision. The reader spits out the content in braille, allowing the person to read the documents.

How Does a Screen Reader Work?

A screen reader is a computer operating system that allows people with little or no vision to operate a computer via braille or speech output. Screen readers rely on Text-To-Speech technology that relays to the user via headphones or speakers.

The screen reader will come with all of this bundled together and also with an adapter that translates to braille in real-time. The reader functions by allowing the user to command the operating system as a normal user would use a mouse.

A series of keyboard strokes that are specifically designed for the visually impaired allows them to use the computer with little or no limitations. Screen readers work with:

• Linux
• MAC
• PC

Linux Screen Readers

Gnopernicus – Gnopernicus is a Linux based operating system that allows a blind user to operate using:

• Speech
• Magnifier
• Braille

Speak Up – Speak Up is a GNU/Linux based system that allows the user to receive output through a mechanical voice device.

MAC Screen Readers

The innovators at Mac didn’t stop with creating a screen reader made just for the Apple computer. They also made it an essential tool on their MacOS.

Voice Over doesn’t require the user to buy the product; they merely have to follow a series of keystrokes and the application will spring to life.

PC Screen Readers

JAWS – Developed by Freedom Scientific the JAWS system, which stands for Job Access with Speech, is one of the most popular brands on the market. They also have an option for a pen that reads text as you highlight.

How do Screen Readers Work with Websites?

For a screen reader to work properly there must be solid coding on the page. Solid coding includes:

• Headings
• Paragraphs
• Quotations
• Tables with relevant information
• Images have alternate text and explanations

If the pages are built properly, the reader will pick up the headers and link them to the columns and rows. When this is done, a signal is sent to the user. Knowing where the cursor is located allows for easier navigation of the page.

A series of keystrokes makes it possible to move bylines and items to find the information that they need. While screen readers operate on different platforms, there is a consensus on how they operate.

For example, i and l used with the [SHIFT] key allows the user to swap between items and lines.

How do Screen Readers Work on Cell Phones?

A computer screen reader works by taking lines in the code and relaying messages to the user via a speaker or headphones. With a phone, which is essentially a tablet computer, there are two panes of glass that register touch and movement.

For a person with sight, we slide our finger across the panes and input the option we want. Based on the same principles, a screen reader takes the user’s finger motion and instead of selecting the item, it speaks the information.

Typing with a Touchscreen Screen Reader

Using a reader for your computer is fine when you have a keyboard or some other input source. What do you do if you are using a cell phone? Blank fields of text respond with a voice command when double-tapped.

On a regular phone setting, double-tapping opens the keyboard. There is a new way of input that some users might have noticed. Using a series of taps or different fingers you can make the device do a number of things.

The same goes for pressure when selecting an item. Applying more pressure with a two-finger tap would speak different commands allowing more functionality. The best option for typing with a smartphone is to use the Text-To-Speech option.

As a person losing their vision or fully blind person, the TTS option on phones saves a ton of time. Learning to read braille could take years and still only a small part of the media you encounter each day would be consumed.

As the TTS options have improved they can read:

• Newspaper
• Magazines
• Books
• Trade Manuals
• Technical Manuals

For years many technical manuals weren’t printed in braille and could never be accessed by the blind. Since the innovation of TTS, a whole realm of possibilities has opened for the blind.

Benefits of Touchscreens for the Blind

Touchscreens have made the lives of most people much easier. A huge part of this is a phone or tablet’s ability to run apps. Apps are used for:

• Music
• Photos
• Social Media
• Calendar
• Banking
• Games
• Navigation

As a blind person, most of these apps are unusable. However, there have been great strides made in the field for the blind. The major advancements are piggybacked off of the standard apps that most sighted people take for granted.

Navigation – The navigation app on a cell phone for sighted people gives directions on the highway or interstate related to an automobile. For the blind, the application may provide more information suitable for a blind person’s situation. For instance, they could rely more on walk directions and provide information that would help a service animal.

Identification – An amazing feat of the industry is how well our technology can make up for the gaps in our senses. One thing we sighted people take for granted is tipping a delivery person. When a blind person does this, they have no idea what amount they are giving, leading to a possibly disastrous situation. One cool app that detects color will tell you which bill you are tipping with.

Reading – The joy of reading and discovering a new world with your imagination should be available to all.

• Kindle
• Project Gutenberg
• Bookshare

These have elements specifically designed for the visually impaired. Kindle has a zoom option that makes their books much easier to read. Their voice playback library became so large that they began the Audible site that streams or loans millions of books on tape each year.

ADA Accessibility from Service Providers

As more and more phones reach the market the companies find themselves needing to cater to more people with disabilities. Three of the major phone providers have special access points for people with disabilities. They are:

• AT&T – offers braille billing, specialized troubleshooting, and a wide array of devices for the blind.
• Sprint – offers device set up, device suggestions, and special plans.
• Verizon – offers accessible document info, braille billing, and specialized plans.

As a bonus, ODIN Mobile is a company designed specifically for blind people and they even offer a specialized phone.

If you’re looking to make your website ADA accessible, we’re here to help. If you’d like to try it on your own, be sure to use our handy compliance checklist.