June 11 2020

Infographic: What You Need to Know About Website ADA Conformance

website ada conformance infographic

To maximize your site’s usability for all people – no matter their ability – your website needs to be designed, built and maintained against current website conformance guidelines.

Title III of the ADA & WCAG

  • Prohibits discrimination on the basis of disabilities in places of public accommodation, commercial facilities and select private entities

  • WCAG (Web Content Accessibility Guidelines) were established to provide site owners with a set of guidelines for site accessibility

  • Together, these attempts to prohibit discrimination and create a fairer digital experience

In a study of 10 million web pages:

  • 98% had non-compliant menus

  • 89% had non-compliant popups

  • 83% failed to utilize accessible buttons

A recent survey found that 69% of individuals with disabilities click away from a site with access barriers.
 
It is estimated that 13.1% of the U.S. population (more than 43 million Americans) have some form of disability, such as a vision, hearing or cognitive impairment.

Is Your Website Meeting Accessibility Guidelines?

Technical Requirements

  • Upload documents in a text-based format (HTML or RTF- in addition to PDF) as they are most compatible with assistance technologies

  • Heading tags should be used for ordered and unordered lists

  • Content should be organized in a logical hierarchy so that the sequence reads properly

  • Include a “skip navigation” link on top of each page so people using screen readers can go directly to the desired content on the page

  • Allow websites to expand to 400% without degradation

  • Target inputs (like buttons and accordions) on mobile devices must be at least 44x44 pixels

  • All functions on website need to be accessible by keyboard only

  • Use the site’s CSS for styling, avoiding the <b> and <u> for example

  • Users must be able to turn adjust time limits.

  • Each page needs to have a unique and descriptive page title

  • There must be multiple ways to access site pages (search bar, navigation menus, sitemap, breadcrumbs, links)

  • Appropriate fields in forms need to provide an autocomplete option

  • The website must be accessible in both landscape and portrait views as well as in all screen sizes

Image/Table/Form Rules:

  • Include alt-text for every visual (photos, logos, maps, charts)

  • Data tables must have headers and layout tables must be marked as “presentation”

  • Form controls (buttons, check boxes, drop-down menus, text fields) must be labeled

Audio/Video Guidelines:

  • Videos need to include audio descriptions and captions

  • All video-only and audio-only content must have text transcripts

  • Audio must be able to be paused, stopped or muted

  • Any animation must have a pause/play button or last less than 5 seconds

Design Standards:

  • Avoid dictating text colors and settings (users need to be able to change color and font settings to what’s readable for them in their browsers and operating systems)

  • Minimize distracting features like blinking, flashing and moving objects (or allow users to control these)

  • Information that requires only color to convey its meaning must also include text or symbols

  • Establish a color contrast ratio of at least 4.5:1 between all normal text and background

  • Establish a color contrast ratio of at least 3:1 between all large text and background

  • Non-text content needs 3:1 contrast with background

Website ADA Violation Lawsuits 

  • 2,000+ website accessibility cases were filed in 2019

  • From 2017 to 2018, lawsuits for ADA website non-compliance increased 177%

No excuses for violations:

  • BeyoncĂ© lawsuit reason: beyonce.com not equally accessible to visually-impaired consumers

  • Burger King lawsuit reason: Website was not fully accessible and wouldn’t work with screen reading software

  • Domino’s Pizza lawsuit reason: Blind individual unable to place a customized pizza order or take advantage of online-only discounts because website and mobile app wouldn’t work with screen reading software

Redesign vs. Retrofit

Redesign Your Site

  • Design and build a website that adheres to all WCAG guidelines

  • Ideal approach if site is older or WCAG violations are too numerous to retrofit

Retrofit Your Site

  • Update design and code based on ADA conformance audit results

  • May be costly to address issues and some may not be able to be fixed

Website ADA Ongoing Testing & Reporting

Your business should have a formal website ADA plan and process in place:

  • Enlist software and train employees on interpreting results, or hire an agency for regular site testing

  • Quickly address any issues discovered in an audit or reporting

  • Keep up to date on the latest guidelines

  • Train administrators on guidelines

Sources:
Medium, Entrepreneur, ADA.gov, AccessiBe.com, Clickawaypound.com, Statista.com, ADATitleIII.com, montereyherald.com
 
Visit www.zaginteractive.com for more information.
 

  • Regs & Legislation
  • Website Compliance

posted by
Carley Corraccio
Carley Corraccio

ZAG Interactive is a full-service digital agency in Glastonbury, CT, offering website design, development, marketing and digital strategy to clients nationwide. See current job openings.
Related Article
Understanding WCAG 2.1 ADA Levels