Auditing Your Website for Accessibility Compliance and Understanding How ADA Applies

Cynthia Ng
@TheRealArty
August 16, 2018

Brief Overview

Policy & Legislation
Web Accessibility
Types of Disabilities
Assistive Technology
WCAG
Auditing Your Website
Accessibility Statement
Take Away

Policy & Legislation

No otherwise qualified individual with a disability shall [...] be excluded from [...] any program or activity receiving Federal financial assistance.
- Section 504

United States Department of Labor. (n.d.). Section 504, The Rehabilitation Act of 1973. http://www.dol.gov/oasam/regs/statutes/sec504.htm

[E]ach Federal department or agency [...] shall ensure [...] that the electronic and information technology allows [...] individuals with disabilities who are members of the public seeking information or services from a Federal department or agency to have access to and use of information and data that is comparable to the [...] public who are not individuals with disabilities.
- Section 508, paragraph a-1-A-ii

United States Department of Labor. (n.d.). Section 508, The Rehabilitation Act of 1973. http://www.dol.gov/oasam/regs/statutes/sec508.htm

The Americans with Disabilities Act (1990)

Florida

Florida Association of Special Districts (FASD)

Summary: Policy & Legislation

The Rehabilitation Act (Section 504 and 508)
Americans with Disabilities Act
state, district, municipal legislation
organizations, grants, etc.

What is Web Accessibility?

Web accessibility means that people with disabilities can use the Web.
- W3C Web Accessibility Initiative (WAI)

W3C Web Accessibility Initiative. (2005). What is Web Accessibility. Introduction to Web Accessibility. http://www.w3.org/WAI/intro/accessibility.php

Types of Disabilities

visual
auditory
physical/motor
touch
learning

Assistive Technology

screen readers
text-to-speech, speech-to-text
mouse alternatives (e.g. joysticks)
screen magnifiers
keyboard only
touch screen
and more

Web Content Accessibility Guidelines (WCAG)

by World Wide Web Consortium (W3C)

2.0 (Dec 2008)
2.1 (Jun 2018)

Sections of WCAG

Perceivable
Operable
Understandable
Robust
Conformance

Some Notes on WCAG

Level: A, AA, AAA
Level AA recommended
WCAG Quick Ref makes life easier
Elements and Guidelines Overlap

Before we move on, I want to cover a few important points about WCAG.

The first is that each guideline is classified by level, with A being the basic and minimal level up to AAA with the strictest guidelines.
Legislation and other policies will sometimes ask you to meet Level A, but most including Section 508 require you to meet Level AA. I've never seen anyone requiring Level AAA, and it is often considered impractical, though not impossible.
When trying to view which guidelines are required for a specific level and their related techniques for success, try using the quick ref version of the WCAG document since you can filter out what you need.
One of the complex parts of understanding WCAG and how it applies when auditing your website is that elements on your website will almost always overlap with multiple guidelines.

Understanding WCAG

Making Online Accessibility Easy and Part of Your Work (Florida Libraries, May 2016)
Making Web Services Accessible for Everyone (Florida Libraries, September 2016)
A Practical Guide to Improving Web Accessibility (WeaveUX, Issue 7, October 2017)
A Practical Starter Guide on Developing Accessible Websites (Code4Lib Journal, Issue 37, July 2017)
WCAG Blog Post Series

Unfortunately, we have limited time for this session and web accessibility is a big topic. Since I will be focusing on how to audit a website for web accessibility, I will not actually be covering general techniques on creating accessible web content or websites. So I highly recommend taking a look at the webinars I've previously done, which cover online content including documents, and websites as a whole in the second one.

If you prefer text based information (as opposed to videos), more recently, I published an article that covers accessible web content creation in a bit more detail in WeaveUX, and for more technical coverage of web accessibility, check out the Code4Lib article I co-authored.

Finally, while most of the posts are a bit older, my WCAG blog post series covers best practices around content and website creation for all Level A and AA guidelines by explicitly referring to them. It does include a more recent post regarding what's new in 2.1.

There are lots of general resources as well, so I encourage you to search and read on any particular aspect that may be unclear to you.

Auditing and Evaluating Your Website

Simulation

Colorblind Web Page Filter

side by side comparison of original and colour filtered site

Fangs (Firefox Add-on)

Evaluation

W3C validator

HTML Codesniffer (bookmarklet)

example report overview from HTML Codesniffer

WCAG Contrast Checker (Firefox Add-on)

WAVE Toolbar

Manual Tests with Devices

Mouse

Touch screen

Keyboard

Some things must be tested manually. For example, you may need to test mouse usage, especially on hover, or how specific behaviour on a touch screen. Similarly, keyboard accessibility is often tested manually.

Websites should always be fully accessible by a keyboard. Interactive elements should be navigable and controllable by keyboard, keyboard shortcuts should not override default behaviour, and users should always know where they are.

For example, visual cues for input focus help your users regardless of whether they only use a keyboard or not, but are necessary for keyboard only users.

And if you have hidden links, such as skip links, they should show up when there is focus on it.

If you want to conform to the new guidelines introduced in WCAG 2.1, you may need to do them manually as well since many of the tools are still using version 2.0.

Automated Testing Frameworks

Demo: HTML Codesniffer

Report with errors and showing dropdown of different guidelines

Demo: WAVE Toolbar

Demo: Keyboard Accessibility

Ask Your Users

Accessibility Statement

Wording from FSAD
WCAG Conformance Claims
Partial Conformance Claim with 3rd Party Content

Take Away

Make it easy to contact you.

Thanks!

Contact

Cynthia Ng
@TheRealArty
about.me/cynthiang