What’s new in WCAG 2 - Accessing Higher Ground ... • What is new in WCAG 2.1 • WCAG 2.1 and relevant

  • View
    0

  • Download
    0

Embed Size (px)

Text of What’s new in WCAG 2 - Accessing Higher Ground ... • What is new in WCAG 2.1 •...

  • What’s new in WCAG 2.1

    Jonathan Whiting WebAIM.org

  • WCAG 2.1 The ‘good parts’ version

    Jonathan Whiting WebAIM.org

  • Our time

    • What is new in WCAG 2.1 • WCAG 2.1 and relevant law • Techniques to implement the best new parts of WCAG 2.1

  • What’s new

    • 1 new Guideline: 2.5 Input Modalities • 17 new Success Criteria • 3 areas of emphasis

    – Mobile – Low Vision – Cognitive

  • Pick 5 •Guideline 1.3 Adaptable

    •1.3.4 Orientation (AA) •1.3.5 Identify Input Purpose (AA) •1.3.6 Identify Purpose (AAA)

    •Guideline 1.4 Distinguishable •1.4.10 Reflow (AA) •1.4.11 Non-Text Contrast (AA) •1.4.12 Text Spacing (AA) •1.4.13 Content on Hover or Focus (AA)

    •Guideline 2.1 Keyboard Accessible

    •2.1.4 Character Key Shortcuts (A) •Guideline 2.2 Enough Time

    •2.2.6 Timeouts (AAA)

    •Guideline 2.3 Seizures and Physical Reactions

    •2.3.3 Animation from Interactions (AAA)

    •Guideline 2.5 Input Modalities •2.5.1 Pointer Gestures (A) •2.5.2 Pointer Cancellation (A) •2.5.3 Label in Name (A) •2.5.4 Motion Actuation (A) •2.5.5 Target Size (AAA) •2.5.6 Concurrent Input Mechanisms (AAA)

    •Guideline 4.1 Compatible •4.1.3 Status Messages (AA)

  • ADA and the web: A timeline

    • 2010: ANPRM • 2016 SANPRM • July 2017: Placed on “Inactive” list • December 2017: Process halted

  • June 2018 – House letter to Jeff Sessions

    “Private legal action under the ADA with respect to websites is unfair and violates basic due process principles in the absence of clear statutory authority and…website accessibility standards.”

    “Provide guidance and clarity with regard to website accessibility under the … ADA.”

  • September 2018 – DOJ letter to Jeff Sessions

    “Absent the adoption of specific technical requirements for websites through rulemaking, public accommodations have flexibility in how to comply…Accordingly, noncompliance with a voluntary technical standard for website accessibility does not necessarily indicate noncompliance with the ADA.”

  • ADA compliance ≠ WCAG 2.0 compliance

    DOJ-negotiated agreements require WCAG 2.0 AA

  • Other Federal & State Law

    • Section 508 – WCAG 2.0

    • California 11546.7 – State agencies and entities – WCAG 2.0 “or a subsequent

    version” – July 2019

  • European Union EN 301 549

    • Public Sector • Web, mobile, electronic documents etc. • Effective Dates

    – New websites: September 2019 – All websites: September 2020 – All mobile apps: June 2021

  • 1.4.10 – Reflow (Level AA)

    1. Adjust your page width to 1280 pixels 2. Enlarge 400% 3. No horizontal scrolling (unless necessary)

  • 1.4.11: Non-text Contrast (WCAG 2.1)

    • Level AA – No Level AAA

    • 3:1 contrast of: – User Interface Components

    • Including states (focus indicators, hover states, etc.)

    – Graphical Objects

  • User Interface Component & State

  • Not “required to understand”

    Twitter

  • Exception - Logo

  • Exception – “Essential” presentation

  • WCAG 2.1 - Text Spacing (Level AA)

    “No loss of content or functionality occurs” when increasing spacing between:

    • Paragraphs: 2X font size • Lines 1.5X font size • Words: 0.16X font size • Letters: 0.12X font size

  • Avoid CSS height

    I am some text in a div that has a pixel height

    100px

  • Avoid CSS height

    I am some text in a div that has a pixel height

    100px

  • CSS min-height

    I am some text in a div that has a pixel min-height

    100px

  • 1.4.13 Content on Hover or Focus (AA)

  • 1.4.13 Requirements

    Content that appears on hover and focus must be: • “Dismissible…without moving pointer hover or keyboard

    focus”: Esc key dismisses • “Hoverable”: Doesn’t disappear when moving the pointer to

    the new content • “Persistent” Visible until you move mouse away or dismiss it.

  • 2.5.3 Label in Name (Level A)

    For user interface components with labels that include text or images of text, the name contains the text presented.

  • WCAG 2 “Label” and “Name”

    • WCAG requires an accessible “label” (3.2.2) and “name” (1.1.1).

    • The Label is visually presented. • The Name is presented to assistive technology

    – Also called “accessible name” – May be visually hidden

  • “Name” and “Label” are usually the same

    First Name:

    First Name:

    “Label” “Name”

  • 2.5.3 Failure

    First Name:

    First Name:

  • Another 2.5.3 Failure

    Next

  • Not a 2.5.3 Failure

    Next

  • ARIA Labels override default Accessible Names

    • Alternative text • Link text • Button text • Form labels

  • What’s new (for reference) •Guideline 1.3 Adaptable

    •1.3.4 Orientation (AA) •1.3.5 Identify Input Purpose (AA) •1.3.6 Identify Purpose (AAA)

    •Guideline 1.4 Distinguishable •1.4.10 Reflow (AA) •1.4.11 Non-Text Contrast (AA) •1.4.12 Text Spacing (AA) •1.4.13 Content on Hover or Focus (AA)

    •Guideline 2.1 Keyboard Accessible

    •2.1.4 Character Key Shortcuts (A) •Guideline 2.2 Enough Time

    •2.2.6 Timeouts (AAA)

    •Guideline 2.3 Seizures and Physical Reactions

    •2.3.3 Animation from Interactions (AAA)

    •Guideline 2.5 Input Modalities •2.5.1 Pointer Gestures (A) •2.5.2 Pointer Cancellation (A) •2.5.3 Label in Name (A) •2.5.4 Motion Actuation (A) •2.5.5 Target Size (AAA) •2.5.6 Concurrent Input Mechanisms (AAA)

    •Guideline 4.1 Compatible •4.1.3 Status Messages (AA)

  • Thank You! http://webaim.org

    • E-mail discussion list • Monthly newsletter • Tutorials, articles, and resources • Blog

    What’s new in WCAG 2.1 Slide Number 2 Princess Bride Slide Number 4 WCAG 2.1�The ‘good parts’ version Our time What’s new Pick 5 ADA and the web: A timeline June 2018 – House letter to Jeff Sessions September 2018 – DOJ letter to Jeff Sessions ADA compliance ≠ WCAG 2.0 compliance Other Federal & State Law European Union EN 301 549 1.4.10 – Reflow (Level AA) 1.4.11: Non-text Contrast (WCAG 2.1) Slide Number 17 User Interface Component & State Not “required to understand” Slide Number 20 Exception - Logo Exception – “Essential” presentation WCAG 2.1 - Text Spacing (Level AA) Avoid CSS height Avoid CSS height CSS min-height 1.4.13 Content on Hover or Focus (AA) 1.4.13 Requirements 2.5.3 Label in Name (Level A) WCAG 2 “Label” and “Name” “Name” and “Label” are usually the same 2.5.3 Failure Another 2.5.3 Failure Not a 2.5.3 Failure ARIA Labels override default Accessible Names What’s new (for reference) Thank You!