Checklist of Federal and State Requirements for Developing an Accessible Website in California
By: Jeff Jimerson
Tags: WCAG, Accessibility, Government, Web Development, Web Design

Also see state requirements for: Oregon | Washington | Other states

Understanding accessibility

Designing a website that’s “accessible” means you’re providing an equivalent experience for all users, regardless of the physical and cognitive ability an individual user may or may not have. The World Wide Web Consortium (W3C) puts it this way: “Accessibility means that people with disabilities can perceive, understand, navigate, and interact” with your website without barriers.

Who is the W3C? They’re an international non-governmental association that develops technical specifications for HTML and CSS, as well as recommendations and best practices for security, online payments, and accessibility. The W3C’s international gold standard for website accessibility rules is called the Web Content Accessibility Guidelines (WCAG).

What federal law says

Section 508 of The Rehabilitation Act, first adopted in 1973 and amended by Congress in 1998, requires federal agencies to make their electronic information accessible to people with disabilities. The rules were originally established in the fairly early days of the Internet, but Section 508 was modernized in 2017 to align with WCAG.

What this means in practical terms is, adhering to Section 508 for website development is synonymous with WCAG compliance. And while these standards are merely best-practice “recommendations” according to the W3C, for all U.S. government agencies — as well as for businesses and organizations that receive federal funding — these accessibility standards are requirements under Section 508.

What’s the difference between ADA and Section 508?

The Americans with Disabilities Act (ADA), which became law in 1990, requires state and local governments, businesses, nonprofit organizations, and labor unions make “reasonable accommodations” for employees with disabilities. ADA is a broad law against disability discrimination that applies to agencies and organizations with 15 or more employees. While it doesn’t go into technical details about website development, Section 508, on the other hand, essentially tells employers how to comply with ADA. How so? By following the WCAG.

In addition to ADA and Section 508, there are other federal laws that touch on the subjects of website development and access to electronic information. The Connected Government Act of 2018, for example, requires all new and redesigned federal agency websites to be accessible using mobile devices.

What state law says

California’s Government Code directs that: “state governmental entities, in developing, procuring, maintaining, or using electronic or information technology, either indirectly or through the use of state funds by other entities, shall comply with the accessibility requirements of Section 508.”

Additionally, a new California law mandates that all government websites must include a post on the home page linking to a signed certification from the agency’s director and chief information officer stating that the website in compliance with WCAG 2.0. This must be in place by July 1, 2019. (Here’s an example certification from the Department of Education.)

The following state agencies have developed resources to assist in accessibility compliance:

California Department of Rehabilitation provides a toolkit to help you assess whether your website is in compliance with state accessibility law.

California Web Standards provides a suite of tools and information to assist you in developing a “user-centered, accessible, and mobile-friendly” government website.

WCAG accessibility checklist

The Web Content Accessibility Guidelines (WCAG) are separated into three levels of conformance. These roughly translate into “basic stuff” (level A), “essential stuff” (level AA), and “shootin’ for the moon stuff” (level AAA). The W3C acknowledges that AAA may be impossible to achieve, so for the most part we’ve only included rules from the first two levels here. Also, for the sake of brevity — and to prevent eyes from going crossed — we’ve omitted highly technical and fine point recommendations. (If you care to dig deeper into the geeky details, W3C has more than 1,100 technical specs.)

Here’s our quick reference checklist for developing a website that conforms to WCAG and Section 508 standards.

1. Provide text alternatives for non-text content

Captions are provided for video

Transcripts are provided for podcasts and other audio-based content

Alt tags are used to describe images, or set to null (i.e. alt=“ ”) when decorative images should be ignored by assistive technology

Labels are used for buttons and form elements

With the exception of logos, text is not placed within images

2. Make page layout and content adaptable

CSS is used to control visual presentation of content

The structure and relationships between elements are consistent on various screen sizes

Content is presented in a correct, meaningful reading sequence on both desktop and mobile devices

Content reflows without the use of both horizontal and vertical scrolling

3. Use color appropriately

Body copy has a contrast ratio of at least 4.5:1 with the surrounding area

Headlines and large text have a contrast ratio of at least 3:1 with the surrounding area

Information conveyed using color is also available in text

4. Make text readable

CSS is used to control the visual presentation of text

Spacing between lines of text (known as line spacing, line height, or leading) is at least 1.5 times the font size

Spacing between paragraphs is at least 2 times the font size

Spacing between letters (known as letter spacing or tracking) is at least 0.12 times the font size

5. Provide keyboard and user controls

Allow ability to pause, stop, or hide any moving, blinking, or scrolling information

Allow ability to pause or stop audio

Allow ability to resize text — up to 200% — either with on-screen controls or through a web browser’s zoom function

If content is presented on hover, provide ability to dismiss/hide the content

Tab order (in forms, for example) is correctly set

6. Avoid negative physical reactions (seizures)

Nothing on the website flashes more than three times per second

7. Use page titles

For HTML pages, the Title tag is used to describe each page’s topic or purpose

For PDFs, the document Title is used

8. Make the website easy to navigate