Creating a WCAG Compliant Website and Why You Should Care

When the Americans with Disabilities Act became law in 1990, the intention of the act was primarily to be sure that buildings, facilities, and public spaces were fully accessible and usable by all Americans, no matter their physical abilities or limitations. The original iteration of the ADA didn’t take into account the accessibility of the internet because, in 1990, very few people envisioned a day when limited access to the internet and the web would be a major hindrance in the lives of most Americans.

That has all changed, of course, and now that the ADA is nearing a major revision, a significant focus of the act will be on making the web as accessible to Americans with disabilities as buildings are. The eventual effect of revisions of the ADA on web design and development remains to be seen, but best practices dictate that web designers should be building their pages and sites with ADA compliance in mind so that they’re ready for the impact of any eventual legal standards.

Understanding the Standards

Because the ADA itself does not yet directly address the problem of web accessibility, other standards must be applied to determine just how accommodating a web page is to users with disabilities. A standard often cited in reference to government-mandated standards for web development is commonly called Section 508 compliance. The name refers to section 508 of the Rehabilitation Act of 1973, which set standards for electronic communications.  Section 508 is not relevant for most companies, however, because it applies only to federal agencies, agencies that receive federal financial aid or contractors that work directly with the federal government. Most private companies are not bound by Section 508.

A more relevant standard is known as the Web Content Accessibility Guidelines or WCAG. The guidelines were developed by the Web Accessibility Initiative of the Worldwide Web Consortium, or W3C. The W3C is the leading international standards organization for the web, and it’s made up of 421 member institutions and individuals. The original WCAG standards were published in 1999, and a second version, WCAG 2.0, was published in 2008. WCAG organizes 12 different guidelines under four broad categories; these four principles state that all web pages should be “perceivable,” “operable,” “understandable” and “robust.”

The WCAG standards have long served as the guiding document for accessible web design, and, more significantly, WCAG 2.0 has been used by the Department of Justice in court cases concerning whether electronic resources were in compliance with the ADA.

Who Benefits from WCAG Compliance?

The standards laid out in WCAG 2.0 are intended to make web pages accessible to and usable for users with a wide range of physical and cognitive disabilities. Visual accommodations are designed to help blind users, but also those with low or impaired vision, photosensitivity, color deficit or distorted color perception. Audio considerations are geared toward users with impaired hearing or total hearing loss. Navigation accommodations are designed to help users with paralysis, weakness or limited mobility. Other standards are meant to assist users with cognitive impairment or limited reading abilities.

Visual Accommodationsamerican-disability-quote-fw

The visual components of the WCAG standards have been developed with the goal of making all web pages consumable by users regardless of any limitation of their visual abilities. At the simplest
level, that means that all text on a page should be easily readable through the use of larger text sizes, appropriately contrasting text and background colors, easily distinguishable text links and other text styling techniques that do not detract from the page’s readability.

The standards also seek to accommodate users with full or partial vision loss by providing text-based alternative content for all non-text content on the page, such as images and video. This alternate text content should be readable by text-to-speech software so that the page may be fully understood by a user who is not able to see the images.

Audio Accommodations

Users with hearing limitations may be accommodated by the inclusion of text transcripts or summaries of all audio material on the page, including the audio tracks of videos. If transcripts or summaries are not available on the page itself, the page should link to external sources of equivalent material.

Cognitive and Mobility Accommodations

Users with limited mobility may have problems navigating pages with complex or non-intuitive navigation schemes, so the WCAG standards encourage the development of easily understood methods of navigation, as well as the inclusion of multiple options for navigating around and between pages. All navigation should also be possible using only a keyboard, and none of the navigation should require that a link or button be clicked within a limited period of time.

Timing is also important when it comes to accommodating users with cognitive limitations. Time-based media that moves or changes too quickly may be problematic for users with limited reading abilities, so all media and transitions on the page should be timed so that users have plenty of time to read and understand the content regardless of their reading ability.

Standardization and Predictability

The WCAG standards emphasize the importance of standardization and predictability in the development of web pages. The goal of this aspect of the standards is that all web pages render in a predictable manner regardless of the technology used to process and display them. In terms of web design, this means that pages should be designed so that they display and operate in a way that conforms to expected standards and produces predictable results. In terms of development, it means that the technology used in the development of pages is compatible across all standard hardware and software platforms likely to be used to display the pages.

Quick Recap for Websites

  1. Provide text alternatives for non-text content
  2. Provide an alternative to video-only and audio-only content
  3. Don’t use a presentation that relies solely on the color
  4. Don’t play audio automatically
  5. Use helpful and clear page titles
  6. Text can be resized to 200% without loss of content or function
  7. Don’t use images of text
  8. Use clear headings and labels
  9. Accessible by keyboard only
  10. Use menus consistently
  11. Make it easy for the text readers to read the navigation links

WCAG Conformance Levels

The WCAG standards set three different levels of conformance as a way to categorize the extent of accessibility provided by a given page or site. The lowest level of conformance, the A level, is the easiest to achieve without interfering with design possibilities, but it provides the fewest accommodations for users with disabilities. The mid-level AA category provides a compromise between accommodation and design flexibility. The highest AAA level accommodates the greatest number of users, but it also severely limits design flexibility, and some types of web content are not able to meet its standards.

Accessibility Testing Tools

Given the broad scope and complexity of the WCAG standards, it can be very difficult to tell if your web pages are in compliance with the standards. Online compliance checkers will scan pages and sites looking for violations of the standards and issue reports that point out the number and types of violations.

Some compliance checkers will scan an entire website and return a detailed report of the problems found, and other checkers will analyze a single page on the fly, sometimes flagging compliance violations directly on the screen as the page displays.

Other checkers function as plug-ins directly inside a web browser, providing a toolbar in the browser window that allows users to control the kinds of alerts displayed. Still, other checkers allow developers to check offline code by pasting the code directly into the testing tool.

Some testing tools focus on particular aspects of the standards. Color contrast analyzers, for example, will flag color combinations that fall outside the WCAG’s acceptable ranges, and photosensitivity checkers will scan video clips for flashes or frequencies that could trigger epileptic seizures.

Testing tools you can use:

  1. http://achecker.ca/checker/index.php
  2. http://wave.webaim.org/
  3. http://www.powermapper.com/

Eventually, the ADA may make accessibility compliance mandatory for a much wider range of websites, and companies should be ready for those potential changes by making their sites compliant sooner rather than later.

The Future of Compliance

Early compliance can save time, money and headaches down the road, but perhaps more importantly, it will make your website accessible to the greatest number of users right now.

The Journey To Success Begins With You + Us.