logo

ACCESSIBILITY TOOLBOX

inclusivity is responsibility

What is ADA Compliance?

ADA Compliance & Web Accessibility refer to a standard of inclusive website development based on the idea that information should be equally available to all people regardless of physical or developmental abilities or impairments.

18.7%
of Americans have a disability
12.6%
are considered to have a severe disability
54%
of people with a disability use the web
90%
of websites are not accessible

History

The Americans with Disabilities Act (ADA) became a law in 1990, and it prohibits discrimination on the basis of disability in employment, State and local government, public accommodations, commercial facilities, transportation, and telecommunications. It also applies to the United States Congress. The purpose of the law is to make sure that people with disabilities have the same rights and opportunities as everyone else.

decorative triangle
  • 1989

    Invention of the World Wide Web

    British computer scientist Tim Burners-Lee invented the World Wide Web

  • 1990

    ADA Laws Were Created

    Congress passed the Americans with Disabilities Act (ADA)

  • 1991

    The Web was Born

    The first website goes live.

  • 1994

    W3C was Founded.

    World Wide Web Consortium (W3C) was founded, and developed standards that will lead the web to its full potential.

  • 1997

    Promotion of Website Accessibility

    Burners-Lee worked with the Website Accessibility Initiative to promote website accessibility for users with a disability.

  • 1999

    WCAG 1.0 was Published

    Website content accessibility guidelines (WCAG) 1.0 was published. The guidelines included 65 check points and 3 levels of compliance.

  • 2008

    WCAG 2.0 was Published

    WCAG 2.0 was published. They included 12 main guidlines focused around 4 principles thta consited of perceivable, operable, understandable and robust.

  • 2017

    Gil v. Winn Dixie Stores, INC.

    Juan Carlos Gil wins a lawsuit against Winn-Dixie stores stating their website is not ADA compliant. The push for more strict adherence begins.

  • 2018

    WCAG 2.1 was Published

    WCAG 2.1 was published, providing additional guidence that extends off of WCAG 2.0

Gil v. Winn Dixie Stores, Inc.

Juan Carlos Gil, a resident of Florida, is defined as disabled under the ADA and the Rehabilitation Act. Gil is legally blind with a vision disability (optic nerve damage) and a learning disability, which constitutes as a qualified disability under the ADA. He is limited in performing one or more major life activities, including but not limited to accurately visualizing his world, adequately traversing obstacles and walking without assistance. Juan Carlos Gil filed a law suit stating that Winn-Dixie Stores, Inc. has operated its business in a manner and way that completely excludes individuals with disabilities who are visually impaired from enjoying and visiting their place of public accommodation, namely the Defendant’s website www.winndixie.com.


Full Case Study
Juan Carlos Gil, a resident of Florida, is defined as disabled under the ADA and the Rehabilitation Act. Gil is legally blind with a vision disability (optic nerve damage) and a learning disability, which constitutes as a qualified disability under the ADA. He is limited in performing one or more major life activities, including but not limited to accurately visualizing his world, adequately traversing obstacles and walking without assistance. Juan Carlos Gil filed a law suit stating that Winn-Dixie Stores, Inc. has operated its business in a manner and way that completely excludes individuals with disabilities who are visually impaired from enjoying and visiting their place of public accommodation, namely the Defendant’s website www.winndixie.com.
Winn-Dixie operates a place of public accommodation, which consists of grocery and pharmacy stores. Winn-Dixie owns and operates 513 grocery and pharmacy stores throughout Florida, Alabama, Louisiana, Georgia, and Mississippi. Winn-Dixie’s website services the various Winn-Dixie grocery store locations. The website allows the general public to fill/refill medicine prescriptions on-line for in-store pick up or delivery, provides information on its Winn-Dixie brand products, and provides: recipes and tips, information about product recalls, and other services. The website also incorporates a store-locator, that enables users to locate a store on-line. The website has a direct nexus between it and the physical store therefore it is also characterized as a place of public accommodation. Since it the website is considered a place of public accommodation, it must also comply with the ADA laws, which means it must not discriminate against individuals with disabilities and may not deny full and equal enjoyment of the services afforded to the general public.

Juan Carlos Gil is a frequent internet user, and in order to navigate and comprehend information that is available on the web, he must use a screen reader software due to his disability. Juan Carlos Gil was interested in using the on-line pharmacy services and website, and also locate a store using www.winndixie.com. During June and July 2016, Gil attempted several times to use Winn-Dixie’s website to learn about the Winn-Dixie brands and access the on-line pharmacy feature. Gil uses JAWS, a screen reader software, to access information on the web. However, Winn-Dixie’s website did not integrate properly with the screen reader software, and it was also lacking a function within the website to permit access for visually impaired through other means. He then tried to locate an Accessibility Notice or any information relating to Winn-Dixie’s future accessibility plans or information that allowed him to contact the to alert them to the inaccessibility of it’s website. Thus, Winn-Dixie has not provided full and equal enjoyment of the services facilities, privileges, advantages, and accommodation provided by and through its website, in violation of the ADA.

Gil felt as if a door had been slammed in his face, as he was unable to participate in the shopping experience online that is able to be experienced by the general public. After 26 years of being in place, he thought that Title III of the ADA would’ve removed such barriers. Plaintiff Juan Carlos Gil successfully accused the website’s incompatibility with standard screen reader which he uses to navigate the web due to his visual impairment, caused him injury by denying him the full and equal enjoyment of what Winn-Dixie offers to sighted customers, U.S. District Judge Robert N. Scola Jr. ended the trail in favor of Juan Carlos Gil.

The case has been closely discussed and watched by businesses and lawyers as it addressed questions about accessibility requirements for a public accommodation’s website under the ADA. It also caused some concern as to who really needs to worry about accessibility requirements, as well as to what level they should follow. Judge Scola he confirmed that Title III of the ADA applies if the website is “heavily integrated” with and serves as a gateway for the physical stores, therefore should have to abide by the compliance laws that were put in place in 1990.

Types of Disabilities

Audio icon

Audio

Common auditory barriers include media players without captions, lack of sign language to supplement information and interactions that rely on use of voice.

Visual Icon

Visual

Images without text alternatives, missing non-visual cues and websites that do not offer custom color combinations can be huge barriers to those with visual disabilities.

Cognitive Icon

Cognitive

Complex page navigation, moving content that cannot be turned off and other mechanisms that cannot be easily turned off are common issues that affect these individuals.

Motor

Websites without full keyboard or mouse support, ones that have time limits to complete tasks and that require certain orientation cues can cause issues these individuals.

Audio icon

Levels of Compliance

There are 3 levels of compliance, A being the foundation and most lenient, AA which builds off of level A, and AAA being the most strict of the levels. The ADA currently encourages self-regulation on web accessibility. After multiple cases that have gone to trial, the Department of Justice is finally working to develop regulations, and provide more specifics on the levels of ADA compliance and how to adhere to them. Until the offical rules are relased by the DOJ level AA is the encouraged standard. The Department of Justice has stated that government services and non-profits must be compliant with the guidelines established in WACG 2.0 by 2018. However, they have yet to specify rules for non-government entities and compliance requirements with the ADA.

WCAG Compliance Checklist

A
Non-text content:
• Provide all images with a descriptive ALT attribute, or an empty string (alt=“”) if it is a purely decorative image
• Provide a descriptive TITLE attribute for all embedded audio/video, non-image charts, Flash, form elements and other items that require textual explanation in order to be understood
• Do not use CAPTCHA that relies on visual identification
• Decorative images such as icons should preferably be displayed using CSS rather than directly in HTML

Time based media (Audio/video):
• Prerecorded video without an audio track should have a textual transcript describing what it shown in the video.
• Prerecorded audio should have a textual transcript describing what is said or played in the audio
• Pre-recorded audio should be captioned with text describing what is said and what happens, so that the audio is accessible to deaf users
• All video with an audio track should be made accessible to blind users, by providing descriptions of everything that happens
• Descriptions can be provided either textually or as part of the audio track
• Offer audio controls for all audio clips

Content structure:
• The structure and meaning of the page can still be understood when all CSS styling is removed
• HTML elements should be used to define the structure and meaning of the elements on the page, including headings, lists, paragraphs, and table elements (including row and column headers
• Color is not used as the only means to convey meaning. For example, required fields in a form can also be indicated using text labels (“Required”) or asterisks (provided an explanation is given of these asterisks)
• When all CSS styling of the page is removed, the elements on the page are still in a logical reading order in the HTML code • Make sure the tabbing order of the page elements is logical
• In on-screen help texts and instructions, identify elements by multiple characteristics, such as the label, color and position, e.g. “the green button ‘Next’ on the right”
• When using beeps or other sound cues to inform the user of an event, display a textual message as well

Contrast:
• When using color to convey information, use another means (like text) to convey the same information in another way
• Do not rely solely on color to identify links. Distinguish links from regular text by underlining them, bolding them, showing an icon next to each link, or some other means other than color
• In forms, use not just color but also text labels to identify required fields or fields with errors

Functionality:
• All clickable items should also be selectable using the keyboard
• Where “drag and drop” functionality is used, a keyboard-based “cut and paste” alternative should be offered
• Do not use non-standard interface elements that are not keyboard-accessible but can be controlled with a mouse only
• Users navigating a Web page using the keyboard should not become trapped on a particular element or section of the page

Seizure causing content:
• Onscreen content should not flash more than 3 times per second, and flashes fall below the general flash thresholds

Navigation & determination of place:
• Offer a "Skip to main content" link at the top of page
• Use the "title" tag in the HTML page header
• The tabIndex property can be used to enforce a certain tabbing order
• When the user leaves a modal dialog box on the page, they should not lose their focus on the page and have to start from the top of the page again. Instead, the element that had the focus when the modal dialog opened should get the focus again
• Make sure each link is clearly labeled
• When the link text or context is not clear enough, give the link a title property with a clear description of the link purpose or target

Text:
• Identify the primary language of a Web page in the HTML page header

Predictability:
• Forms are submitted automatically
• A new window is opened
• The focus is changed to another component
• Turning a checkbox or radio button on or off
• Selecting a different item from a dropdown menu
• Entering text into a text field
• Provide a submit button. Do not perform any actions until this button is clicked by the user

Help users avoid and correct mistakes:
• Display an error message with text alerting the user to the specific fields (or other form elements) containing errors and describing the specific errors in the input
• Color or images can be used in addition to the text to mark the form elements containing errors
• Use the label for="[element ID]" HTML tag to associate a form element with its label
• Label all form elements. Use clear, unambiguous labels
• Identify required (mandatory) fields with a text label, do not use color or images only to identify required fields
• Display the label for an element in close proximity to that element
• Provide examples of correct input, such as the correct date format

Compatibility with assistive technologies:
• HTML code should pass W3C's HTML validation tool
• Use unique IDs - no two elements on the same page should have the same ID
• Browser add-ons like Firebug can be used for quick HTML validation during development
• HTML5 is recommended because it is a lot more forgiving than previous versions of HTML
• Avoid using non-standard controls such as those created by Flash, Java or other plugins, components that are created using scripting, or clickable div's and span’s
• When using non-standard controls, make sure that it is keyboard accessible - it can receive focus and its state can be changed using the keyboard

AA

Includes all guidelines from level A, plus the following:


Time based media (Audio/video):
• Provide captions for live audio in synchronized audio/video
• Provide an audio description of pre-recorded video

Contrast:
• Text has enough contrast with the background (contrast ratio 4:5:1 for small text and 3:1 for large text)
• Text can be enlarged up to 200% without used of a screen magnifier
• Actual text is used rather than an image of text, except when essential (logos)

Navigation & determination of place:
• More than one way of navigating to other pages on the site, such as a sitemap
• Headings and labels are understandable, consistent, and describe the topic
• The page element with the current keyboard focus has a visible focus indicator

Text:
• Specify the language of each text phrase or passage that is in a language other than the default language specified for the entire web page

Predictability:
• Navigation and menus are in the same location and order on every page of the site
• UI components used across the site are identified consistently on every page

Help users avoid and correct mistakes:
• When the user make an input error, give suggestions for valid input
• For pages that include legal or financial commitments, input can be reviewed and corrected before final submission, and submissions can be reverted

AAA

Includes all guidelines from level A and AA, plus the following:


Time based media (Audio/video):
• Provide sign language interpretation of pre-recorded audio in synchronized audio/video
• Provide extended audio descriptions of pre-recorded video in synchronized audio/video
• Provide text alternatives for both audio in audio-only content

Contrast:
• Enhanced contrast: Text has enough contrast with the background (contrast ratio 7:1 for small text and 4:5:1 for large text)
• Low or no background audio, or background audio can be turned off
• Various visual presentation enhancements including selectable colors, no justified text
• Images of text are used only for decoration or where the presentation of text is essential, such as in logos

Functionality:
• All functionality is available from a keyboard

Users have enough time to read and use content:
• Time is not an essential part of any event or activity, except for real-time events and non-interactive synchronized audio/video
• Interruptions can be postponed or suppressed by the user, except those involving an emergency
• When an authenticated session expires and the user has to re-authenticate, the user can continue without loss of data

Seizure causing content:
• No more than three flashes in a 1-second period

Navigation & determination of place:
• Section headings are used to organize the content
• Show the user’s location within a set of web pages, for instance by using a breadcrumb
• The purpose of each link can be determined from the link text alone

Text:
• Provide definitions of idioms, jargon, and unusual terms and phrases
• Provide the expanded form of abbreviations
• Provide a simplified version of text that requires an advanced level of understanding
• Provide the pronunciation of words where the meaning is unclear without knowing the correct pronunciation

Predictability:
• All unexpected changes in context, such as causing significant changes to the page content or opening a new window are triggered by the user, or such unexpected changes in context can be turned off by the user

Help users avoid and correct mistakes:
• Provide context-sensitive help
• Input can be reviewed and corrected before the final submission, and submissions can be reverted

The Toolbox

We want to help you make your website as inclusive and accessible as possible, we believe that it is our responsibility as designers, developers, and humans, to create web experiences that are equal to all. That’s why we’ve created a compliance toolbox to help you and your team make sure you’re website is up to speed with the ADA laws and suggestions, or help you get it there.