Evaluating Your Website for Accessibility Compliance and WCAG 2.1

Slide 1

Slide 1 text

EVALUATING YOUR WEBSITE EVALUATING YOUR WEBSITE FOR ACCESSIBILITY FOR ACCESSIBILITY COMPLIANCE AND WCAG 2.1 COMPLIANCE AND WCAG 2.1 October 4, 2018 Cynthia Ng @TheRealArty

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

WHAT IS WEB ACCESSIBILITY? WHAT IS WEB ACCESSIBILITY?

Slide 4

Slide 4 text

W3C Web Accessibility Initiative. (2005). What is Web Accessibility. Introduction to Web Accessibility. Web accessibility means that people with disabilities can use the Web. - W3C Web Accessibility Initiative (WAI) http://www.w3.org/WAI/intro/accessibility.php

Slide 5

Slide 5 text

TYPES OF DISABILITIES TYPES OF DISABILITIES visual auditory physical/motor touch learning

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

POLICY & LEGISLATION POLICY & LEGISLATION

Slide 8

Slide 8 text

ACCESSIBLE CANADA ACT, C-81 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

Slide 9

Slide 9 text

LEGISLATION IN CANADA 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 POLICY POLICY organization grants sponsorship

Slide 10

Slide 10 text

WEB CONTENT ACCESSIBILITY GUIDELINES WEB CONTENT ACCESSIBILITY GUIDELINES (WCAG) (WCAG) BY WORLD WIDE WEB CONSORTIUM (W3C) BY WORLD WIDE WEB CONSORTIUM (W3C) 2.0 (Dec 2008) 2.1 (Jun 2018)

Slide 11

Slide 11 text

SECTIONS OF WCAG SECTIONS OF WCAG 1. Perceivable 2. Operable 3. Understandable 4. Robust 5. Conformance

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

UNDERSTANDING WEB ACCESSIBILITY & WCAG UNDERSTANDING WEB ACCESSIBILITY & WCAG (WeaveUX, Issue 7, October 2017) (Code4Lib Journal, Issue 37, July 2017) A Practical Guide to Improving Web Accessibility A Practical Starter Guide on Developing Accessible Websites WCAG Blog Post Series Accessibility Tag Blog Posts

Slide 14

Slide 14 text

AUDITING AND EVALUATING YOUR WEBSITE AUDITING AND EVALUATING YOUR WEBSITE SIMULATION SIMULATION

Slide 15

Slide 15 text

COLORBLIND WEB PAGE FILTER COLORBLIND WEB PAGE FILTER

Slide 16

Slide 16 text

(FIREFOX ADD-ON) (FIREFOX ADD-ON) FANGS FANGS

Slide 17

Slide 17 text

EVALUATION EVALUATION

Slide 18

Slide 18 text

W3C VALIDATOR W3C VALIDATOR

Slide 19

Slide 19 text

(BOOKMARKLET) (BOOKMARKLET) HTML CODESNIFFER HTML CODESNIFFER

Slide 20

Slide 20 text

(FIREFOX ADD-ON) (FIREFOX ADD-ON) WCAG CONTRAST CHECKER WCAG CONTRAST CHECKER

Slide 21

Slide 21 text

WAVE TOOLBAR WAVE TOOLBAR

Slide 22

Slide 22 text

MANUAL TESTS WITH DEVICES MANUAL TESTS WITH DEVICES MOUSE MOUSE TOUCH SCREEN TOUCH SCREEN KEYBOARD KEYBOARD

Slide 23

Slide 23 text

AUTOMATED TESTING FRAMEWORKS AUTOMATED TESTING FRAMEWORKS aXe core A11y Machine

Slide 24

Slide 24 text

DEMO: HTML CODESNIFFER DEMO: HTML CODESNIFFER

Slide 25

Slide 25 text

No content

Slide 26

Slide 26 text

No content

Slide 27

Slide 27 text

No content

Slide 28

Slide 28 text

No content

Slide 29

Slide 29 text

DEMO: WAVE TOOLBAR DEMO: WAVE TOOLBAR

Slide 30

Slide 30 text

No content

Slide 31

Slide 31 text

No content

Slide 32

Slide 32 text

No content

Slide 33

Slide 33 text

DEMO: KEYBOARD ACCESSIBILITY DEMO: KEYBOARD ACCESSIBILITY

Slide 34

Slide 34 text

No content

Slide 35

Slide 35 text

WHAT'S NEW IN WCAG 2.1 WHAT'S NEW IN WCAG 2.1

Slide 36

Slide 36 text

NON-TEXT CONTRAST 1.4.11 NON-TEXT CONTRAST 1.4.11

Slide 37

Slide 37 text

RESPONSIVE DESIGN RESPONSIVE DESIGN Orientation 1.3.4, Re ow 1.4.10, Text Spacing 1.4.12

Slide 38

Slide 38 text

FORM FIELDS EXTENDED FORM FIELDS EXTENDED Identify Input Purpose 1.3.5: Use autocomplete for auto ll Label in Name 2.5.3: Visible labels = Accessible names Status Messages 4.1.3: Use appropriate role without changing focus

Slide 39

Slide 39 text

USER INPUT EXTENDED 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

Slide 40

Slide 40 text

ASK YOUR USERS ASK YOUR USERS

Slide 41

Slide 41 text

ACCESSIBILITY STATEMENT ACCESSIBILITY STATEMENT Partial Conformance Claim with 3rd Party Content WCAG Conformance Claims