Evaluating Your Website for Accessibility Compliance and WCAG 2.1

Cynthia Ng
October 4, 2018

Brief Overview

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

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

Policy & Legislation

Accessible Canada Act, C-81

First Reading: June 20, 2018

Parliament of Canada. (2018). C-81: An Act to ensure a barrier-free Canada House Government Bill.https://www.parl.ca/LegisInfo/BillDetails.aspx?billId=9990870&Language=E

Legislation in Canada

  • Accessibility for Ontarians with Disabilities Act (AODA) (2005)
  • Canadian Human Rights Act (1977)
  • Standard on Web Accessibility (2011) for Government of Canada


  • organization
  • grants
  • sponsorship

Web Content Accessibility Guidelines (WCAG)

by World Wide Web Consortium (W3C)

  • 2.0 (Dec 2008)
  • 2.1 (Jun 2018)

Sections of WCAG

  1. Perceivable
  2. Operable
  3. Understandable
  4. Robust
  5. Conformance

Some Notes on WCAG

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

Understanding Web Accessibility & WCAG

Auditing and Evaluating Your Website


Colorblind Web Page Filter

side by side comparison of original and colour filtered site

Fangs (Firefox Add-on)

example text output from Fangs


W3C validator

example output from w3c validator

HTML Codesniffer (bookmarklet)

example report overview from HTML Codesniffer example details from HTML Codesniffer

WCAG Contrast Checker (Firefox Add-on)

example contrast checker results

WAVE Toolbar

WAVE toolbar showing headers outline example

Manual Tests with Devices


Touch screen


search field with outline search field with outline

Automated Testing Frameworks

Demo: HTML Codesniffer

Report with no errors
Report with errors and showing dropdown of different guidelines

Demo: WAVE Toolbar

Demo: Keyboard Accessibility

What's New in WCAG 2.1

Non-Text Contrast 1.4.11

Responsive Design

Orientation 1.3.4, Reflow 1.4.10, Text Spacing 1.4.12

Form Fields Extended

  • Identify Input Purpose 1.3.5: Use autocomplete for autofill
  • Label in Name 2.5.3: Visible labels = Accessible names
  • Status Messages 4.1.3: Use appropriate role without changing focus

User Input Extended

  • Character Key Shortcuts 2.1.4: Only on focus, can disable, or remap
  • Motion Actuation 2.5.4: Can disable, provide equivalent non-motion interaction
  • Pointer Gestures 2.5.1: Single pointer alternative to complex gestures
  • Pointer Cancellation 2.5.2: Use default up-event behaviour, and allow abort/undo
  • Content on Hover or Focus 1.4.13: Make persistent, hoverable, and dismissable

Ask Your Users

Accessibility Statement

Take Away

Make it easy to contact you.



nodoka holding a stack of books