Whats new in WCAG 2.1? Hi, there! Kara Gaulrapp Front-end - - PowerPoint PPT Presentation

▶
what s new in wcag 2 1 hi there
SMART_READER_LITE
LIVE PREVIEW

Whats new in WCAG 2.1? Hi, there! Kara Gaulrapp Front-end - - PowerPoint PPT Presentation

Mar 12, 2024 16 likes •739 views

Drupaldelphia: 05/10/2019 Whats new in WCAG 2.1? Hi, there! Kara Gaulrapp Front-end Developer at Message Agency Accessibility Advocate We build better brands and websites for the greater good. Message Agency is a social enterprise that

slide-1
SLIDE 1

Drupaldelphia: 05/10/2019

What’s new in WCAG 2.1?

slide-2
SLIDE 2

Hi, there!

Kara Gaulrapp

Front-end Developer at Message Agency Accessibility Advocate

slide-3
SLIDE 3

We build better brands and websites for the greater good.

Message Agency is a social enterprise that helps nonprofits use technology to enlighten, educate, engage, and enact change.

slide-4
SLIDE 4

Hi, there!

Kara Gaulrapp

Front-end Developer at Message Agency Accessibility Advocate

slide-5
SLIDE 5
  • 1. Overview
  • 2. Who was the focus?
  • 3. How does this affect me?
  • 4. How long do I have?
  • 5. Breakdown and additions

Outline

slide-6
SLIDE 6

What is Web Accessibility?

slide-7
SLIDE 7

The power of the Web is in its universality. Access by everyone regardless of disability is an essential aspect.

  • Tim Berners-Lee, inventor of the World Wide Web
slide-8
SLIDE 8

WCAG Principles

Perceivable Operable Understandable Robust

slide-9
SLIDE 9
  • 1. Overview
slide-10
SLIDE 10

Overview

  • 1. WCAG 2.1 is an extension of WCAG 2.0
slide-11
SLIDE 11

Overview

  • 1. WCAG 2.1 is an extension of WCAG 2.0
  • 2. WCAG 2.1 is an official W3C Recommendation
slide-12
SLIDE 12

Overview

A W3C Recommendation is a Web Standard.

slide-13
SLIDE 13

Overview

A W3C Recommendation is a Web Standard.

Source: https://www.w3.org/2018/Process-20180201/

slide-14
SLIDE 14

Overview

  • 1. WCAG 2.1 is an extension of WCAG 2.0
  • 2. WCAG 2.1 is an official W3C Recommendation
  • 3. Full Page Conformance Requirement now includes

all variations across all breakpoints

slide-15
SLIDE 15
  • 2. Who was the focus?
slide-16
SLIDE 16

Who was the focus?

slide-17
SLIDE 17

Who was the focus?

Cognitive & Learning Disabilities

slide-18
SLIDE 18

Who was the focus?

Cognitive & Learning Disabilities Low-vision & Senior Citizens

slide-19
SLIDE 19

Who was the focus?

Cognitive & Learning Disabilities Low-vision & Senior Citizens Mobile Device Users

slide-20
SLIDE 20
  • 3. How does this

affect me?

slide-21
SLIDE 21

How does this affect me?

  • 1. Are you updating your accessibility policies?
slide-22
SLIDE 22

How does this affect me?

  • 1. Are you updating your accessibility policies?
  • 2. Are you working with organizations with requirements?
slide-23
SLIDE 23

How does this affect me?

  • 1. Are you updating your accessibility policies?
  • 2. Are you working with organizations with requirements?
  • 3. Are you redesigning a site in the near future?
slide-24
SLIDE 24

How does this affect me?

  • 1. Are you updating your accessibility policies?
  • 2. Are you working with organizations with requirements?
  • 3. Are you redesigning a site in the near future?
  • 4. Are you auditing a site?
slide-25
SLIDE 25
  • 4. How long do I have?
slide-26
SLIDE 26

How long do I have?

It depends!

slide-27
SLIDE 27

How long do I have?

  • 1. Not required by Section 508 (5/10/19)
slide-28
SLIDE 28

How long do I have?

  • 1. Not required by Section 508
  • 2. Could vary by state, sector, or institution
slide-29
SLIDE 29

How long do I have?

  • 1. Not required by Section 508
  • 2. Could vary by state, sector, or institution
  • 3. 3.0 or “Silver” due out in 2021
slide-30
SLIDE 30
  • 5. Breakdown

& Additions

slide-31
SLIDE 31

Breakdown

17 new standards

Level A Level AA Level AAA Perceivable

  • 6

1

Operable

5

  • 4

Understandable

  • Robust
  • 1
slide-32
SLIDE 32

1.3.4 Orientation (AA)

Sites can be used in both portrait and landscape orientations.

slide-33
SLIDE 33

1.3.5 Identify Input Purpose (AA)

We should help browsers automatically fill out our forms.

slide-34
SLIDE 34

1.3.5 Identify Input Purpose (AA)

We should help browsers automatically fill out our forms.

slide-35
SLIDE 35

1.4.10 Reflow (AA)

Your website and its elements must be responsive.

slide-36
SLIDE 36

1.4.10 Reflow (AA)

Your website and its elements must be responsive.

1. Vertical scrolling content at a width equivalent to 320px 2. Horizontal scrolling content at a height equivalent to 256px 3. Users should be able to zoom-in up to 400% on desktop browsers

slide-37
SLIDE 37

1.4.11 Non-text Contrast (AA)

Color contrast for all the things.

slide-38
SLIDE 38
slide-39
SLIDE 39
slide-40
SLIDE 40

1.4.12 Text Spacing (AA)

Users must be able increase text properties without losing content

  • r functionality.
  • line height to at least 1½ × the font size;
  • space below paragraphs to at least 2 × the font size;
  • letter spacing to at least 0.12 × the font size; or
  • word spacing to at least 0.16 × the font size.

Tool: https://codepen.io/stevef/pen/YLMqbo

slide-41
SLIDE 41
slide-42
SLIDE 42
slide-43
SLIDE 43

1.4.13 Content on Hover or Focus (AA)

If a user triggers content to appear, certain actions must be allowed.

slide-44
SLIDE 44

1.4.13 Content on Hover or Focus (AA)

If a user triggers content to appear, certain actions must be allowed.

  • Dismissable without moving their pointer or tab onto

some other element.

  • Visible if the user moves their mouse over it
  • Visible until the hover or focus trigger is removed, the

user dismisses it, or the content is no longer valid.

slide-45
SLIDE 45

2.1.4 Character Key Shortcuts (A)

One key keyboard shortcuts must have additional abilities.

  • Ability to turn off
  • Ability to be remapped
  • Ability to only be active when the

component has focus

slide-46
SLIDE 46

2.5.1 Pointer Gestures (A)

Multi-touch gestures must be able to be completed by a single gesture.

OR

=

slide-47
SLIDE 47

2.5.2 Pointer Cancellation (A)

Down-events cannot be used to complete a function.

SENDING...

slide-48
SLIDE 48

2.5.2 Pointer Cancellation (A)

Down-events cannot be used to complete a function.

SEND

slide-49
SLIDE 49

2.5.3 Label in Name (A)

Visible labels need to match accessible names.

<button aria-label="Buy teapot for $24.99">Buy</button>

slide-50
SLIDE 50

2.5.3 Label in Name (A)

Visible labels need to match accessible names.

<button aria-label="Buy teapot for $24.99">Buy Teapot</button>

slide-51
SLIDE 51

2.5.4 Motion Actuation (A)

Your website is not a Shake Weight.

slide-52
SLIDE 52

4.1.3 Status Messages (AA)

Alert the user, but don’t interrupt them.

  • Use role="status" for results of an actions, like a

successful form submission.

  • Use role="alert" or aria-live="assertive" to

identify errors, like an incorrect value on a form.

  • Use role="progressbar" to let users know where

they are in a process.

slide-53
SLIDE 53

1.3.6 Identify Purpose (AAA)

Our HTML could should provide context, purpose, and meaning.

Demo: https://rawgit.com/ayelet-seeman/coga.personalisation/demo/conactUs.html

slide-54
SLIDE 54
slide-55
SLIDE 55
slide-56
SLIDE 56

2.2.6 Timeouts (AAA)

Store the user’s data for 20 hours or warn the user in the beginning.

“Privacy regulations may require explicit user consent before user identification has been authenticated and before user data is preserved. In cases where the user is a minor, explicit consent may not be solicited in most jurisdictions, countries

  • r regions. Consultation with privacy professionals and legal

counsel is advised when considering data preservation as an approach to satisfy this success criterion.”

slide-57
SLIDE 57

2.2.6 Timeouts (AAA)

Store the user’s data for 20 hours or warn the user in the beginning.

Call a lawyer.

slide-58
SLIDE 58

2.3.3 Animation from Interactions (AAA)

Motion animation triggered by interaction can be disabled.

  • Parallax
  • Animated SVGS
  • n scroll
slide-59
SLIDE 59

2.3.3 Animation from Interactions (AAA)

Motion animation triggered by interaction can be disabled.

slide-60
SLIDE 60

2.5.5 Target Size (AAA)

Buttons need to be at least 44px by 44px.

SUBMIT

slide-61
SLIDE 61

2.5.6 Concurrent Input Mechanisms (AAA)

Styluses, keyboards, voice input, OH MY!

slide-62
SLIDE 62
  • 5. What do I do now?
slide-63
SLIDE 63

What do I do now?

Prepare!

slide-64
SLIDE 64

What do I do now?

  • 1. Standardize your interpretation, goals and tools.
slide-65
SLIDE 65

What do I do now?

  • 1. Standardize your interpretation, goals and tools.
  • Are we working towards a minimum, optimized, or

idealized solution?

slide-66
SLIDE 66

What do I do now?

  • 1. Standardize your interpretation, goals and tools.
  • Are we working towards a minimum, optimized, or

idealized solution?

  • Are we using the same tools?
slide-67
SLIDE 67

What do I do now?

  • 1. Standardize your interpretation, goals and tools.
  • Are we working towards a minimum, optimized, or

idealized solution?

  • Are we using the same tools?
  • 2. Identify your Achilles’ heel.
slide-68
SLIDE 68

What do I do now?

  • 1. Standardize your interpretation, goals and tools.
  • Are we working towards a minimum, optimized, or

idealized solution?

  • Are we using the same tools?
  • 2. Identify your Achilles’ heel.
  • 3. Share knowledge (and responsibility).
slide-69
SLIDE 69

Question Time!

messageagency.com kara@messageagency.com

slide-70
SLIDE 70

Resources

For Planners & Content Editors:

508 Standards Refresh Toolkit - bit.ly/508toolkit 508 Standards Roadmap - bit.ly/508roadmap Accessibility Audit Guides - bit.ly/wa-audit Adobe Accessibility Blog - bit.ly/access-blog Flowcharts & Concept Maps - http://accessibility.psu.edu/images/flowcharts/ Documentation Screen Captures - http://accessibility.psu.edu/images/docscreencaptures/ Long Descriptions - http://accessibility.psu.edu/images/longdescription/ WCAG-EM Report Tool - https://www.w3.org/WAI/eval/report-tool/#/

slide-71
SLIDE 71

Resources

For Developers:

Accessibility Developer Tools (Google) - bit.ly/adt-google WAVE Chrome & Firefox Extensions - bit.ly/wave-ext The W3C Markup Validation Service - bit.ly/w3validate Web Design References/How to Articles - bit.ly/access-howto NV Access Screen Reader - bit.ly/nv-access Text Spacing Bookmarklet - https://codepen.io/stevef/pen/YLMqbo

slide-72
SLIDE 72

Resources

For Designers:

WCAG Contrast Checker - bit.ly/cc-checker 10 principles of inclusive web design - bit.ly/idx-principles U.S. Web Design System - bit.ly/us-design