Even more accessible! What WCAG 2.1 means for designers - Web Directions Summit 2018

•

3 j'aime•641 vues

Allison Ravenhall's interpretation of 10 of the 17 new WCAG 2.1 success criteria, as they relate to designers. Presented at Web Direction Summit, Sydney, on 1 November 2018.

Internet

Even more accessible!
What WCAG 2.1 means for designers
Allison Ravenhall
@RavenAlly
Digital Accessibility
Sensei@Intopia

W3C
Web Content
Accessibility Guidelines
1999 2008
2018
v1.0 v2.0 v2.1

WCAG 2.1
=
WCAG 2.0
+
17 new success criteria

Define data types
of personal info
form fields

Start element labels
with (unbroken)
on-screen content

Provide
alternatives to
motion functions


Name
 Enter your name
All about you
I agree
Headings = 3.0 : 1
Text = 4.5 : 1
Element outlines = 3.0 : 1
Icons/graphics = 3.0 : 1
State styles = 3.0 : 1

Make interactive
things big
(44 x 44 CSS pixels)

Exceptions!
There’s an equivalent big thing
Inline link text
Browser-controlled element
Size is essential

Allison Ravenhall
@RavenAlly
Digital Accessibility
Sensei@Intopia
Get accessible!

Recommandé

WCAG 2.1 for Designers - OZeWAI 2018Intopia

Inclusive front-end development with WCAG 2.1Intopia

WCAG 2.1 update for designersIntopia

Many Devices, One Standard: Mobile Accessibility with WCAG 2.1Interactive Accessibility

How To Build An Accessible Web ApplicationDennis Lembree

Yui Design PatternsMadhuri Chopurala, CSPO, CSM

An Accessibility Update: Changes to Section 508Kate Walser

UX-Driven & Inclusive Data VisualizationsMichelle Michael

Recommandé

WCAG 2.1 for Designers - OZeWAI 2018Intopia

Inclusive front-end development with WCAG 2.1Intopia

WCAG 2.1 update for designersIntopia

Many Devices, One Standard: Mobile Accessibility with WCAG 2.1Interactive Accessibility

How To Build An Accessible Web ApplicationDennis Lembree

Yui Design PatternsMadhuri Chopurala, CSPO, CSM

An Accessibility Update: Changes to Section 508Kate Walser

UX-Driven & Inclusive Data VisualizationsMichelle Michael

Latest trends in Technical Writing, Authoring on Cloud, Content Delivery for ...Raghuram Pandurangan

Website Accessibility WorkshopDevin Olson

Make your visio diagrams accessible to everyoneDavid Parker

Developing a practical HTML5 magazine workflowMichael Kowalski

Web Accessibility in DrupalPromet Source

Every Web Developer is a Win8 developerKevin DeRudder

Designing Powerful Web Applications - MontereyDave Malouf

Rethinking accessibility related best practices for CSS in the modern ageshwetank

A11y: Why do we need it? What is WCAG? How do we work with it?Shannon King

Designing Powerful Web Applications Using AJAX and Other RIAsDave Malouf

Four Principles of Accessibility UK Version Homer Gaines

Web Accessibility for Web DevelopersAlexander Loechel

Plan For Accessibility - TODCon 2008Denise Jacobs

HTML5- The Boosting Era of Web DevelopmentMobilePundits

Inclusive Design 101Amanda Reagan

Managing Accessibility ComplianceKeana Lynch

Daniel Egan Msdn Tech Days Oc Day2Daniel Egan

An Introduction to WAI-ARIAIWMW

Let's get accessible!Tady Walsh

The value of measuring your accessibility maturityIntopia

Annotating designs for accessibilityIntopia

Contenu connexe

Similaire à Even more accessible! What WCAG 2.1 means for designers - Web Directions Summit 2018

Latest trends in Technical Writing, Authoring on Cloud, Content Delivery for ...Raghuram Pandurangan

Website Accessibility WorkshopDevin Olson

Make your visio diagrams accessible to everyoneDavid Parker

Developing a practical HTML5 magazine workflowMichael Kowalski

Web Accessibility in DrupalPromet Source

Every Web Developer is a Win8 developerKevin DeRudder

Designing Powerful Web Applications - MontereyDave Malouf

Rethinking accessibility related best practices for CSS in the modern ageshwetank

A11y: Why do we need it? What is WCAG? How do we work with it?Shannon King

Designing Powerful Web Applications Using AJAX and Other RIAsDave Malouf

Four Principles of Accessibility UK Version Homer Gaines

Web Accessibility for Web DevelopersAlexander Loechel

Plan For Accessibility - TODCon 2008Denise Jacobs

HTML5- The Boosting Era of Web DevelopmentMobilePundits

Inclusive Design 101Amanda Reagan

Managing Accessibility ComplianceKeana Lynch

Daniel Egan Msdn Tech Days Oc Day2Daniel Egan

An Introduction to WAI-ARIAIWMW

Let's get accessible!Tady Walsh

Similaire à Even more accessible! What WCAG 2.1 means for designers - Web Directions Summit 2018 (20)

Latest trends in Technical Writing, Authoring on Cloud, Content Delivery for ...

Website Accessibility Workshop

Make your visio diagrams accessible to everyone

Developing a practical HTML5 magazine workflow

Web Accessibility in Drupal

Every Web Developer is a Win8 developer

Designing Powerful Web Applications - Monterey

Rethinking accessibility related best practices for CSS in the modern age

A11y: Why do we need it? What is WCAG? How do we work with it?

Designing Powerful Web Applications Using AJAX and Other RIAs

Four Principles of Accessibility UK Version

Web Accessibility for Web Developers

Plan For Accessibility - TODCon 2008

HTML5- The Boosting Era of Web Development

Inclusive Design 101

Managing Accessibility Compliance

Daniel Egan Msdn Tech Days Oc Day2

An Introduction to WAI-ARIA

Let's get accessible!

Plus de Intopia

The value of measuring your accessibility maturityIntopia

Annotating designs for accessibilityIntopia

Making Content Creation Tools AccessibleIntopia

Annotating designs for accessibilityIntopia

The why, when and how of including people with disability in the design processIntopia

Annotating designs for accessibilityIntopia

Digital accessibility and learning opportunitiesIntopia

Accessible procurement: Stories from the trenchesIntopia

From Empathy to Research with People with DisabilityIntopia

Designing for people with cognitive impairmentsIntopia

How to create a kick ass business case for accessibilityIntopia

Personalised technical accessibility training: a case studyIntopia

Making Accessible Web AnimationsIntopia

Using the black art of marketing to sell accessibilityIntopia

Design Systems that supports inclusive experiencesIntopia

Using cognitive walkthroughs for a task-oriented accessibility reviewIntopia

Creating accessible design systems - OZeWAI 2018Intopia

Investing in your family's future - OZeWAI 2018Intopia

Miles of Accessibility - An 'Accessibility 101' Intopia

Using cognitive walkthroughs to better review designs for accessibilityIntopia

Plus de Intopia (20)

The value of measuring your accessibility maturity

Annotating designs for accessibility

Making Content Creation Tools Accessible

Annotating designs for accessibility

The why, when and how of including people with disability in the design process

Annotating designs for accessibility

Digital accessibility and learning opportunities

Accessible procurement: Stories from the trenches

From Empathy to Research with People with Disability

Designing for people with cognitive impairments

How to create a kick ass business case for accessibility

Personalised technical accessibility training: a case study

Making Accessible Web Animations

Using the black art of marketing to sell accessibility

Design Systems that supports inclusive experiences

Using cognitive walkthroughs for a task-oriented accessibility review

Creating accessible design systems - OZeWAI 2018

Investing in your family's future - OZeWAI 2018

Miles of Accessibility - An 'Accessibility 101'

Using cognitive walkthroughs to better review designs for accessibility

Dernier

IP addressing and IPv6, presented by Paul Wilson at IETF 119APNIC

TRENDS Enabling and inhibiting dimensions.pptxAndrieCagasanAkio

『澳洲文凭』买拉筹伯大学毕业证书成绩单办理澳洲LTU文凭学位证书rnrncn29

ETHICAL HACKING dddddddddddddddfnandni.pptxNIMMANAGANTI RAMAKRISHNA

SCM Symposium PPT Format Customer loyalty is predieusebiomeyer

Cybersecurity Threats and Cybersecurity Best PracticesLumiverse Solutions Pvt Ltd

『澳洲文凭』买詹姆士库克大学毕业证书成绩单办理澳洲JCU文凭学位证书rnrncn29

Company Snapshot Theme for Business by Slidesgo.pptxMario

Unidad 4 – Redes de ordenadores (en inglés).pptxmibuzondetrabajo

Dernier (9)

IP addressing and IPv6, presented by Paul Wilson at IETF 119

TRENDS Enabling and inhibiting dimensions.pptx

『澳洲文凭』买拉筹伯大学毕业证书成绩单办理澳洲LTU文凭学位证书

ETHICAL HACKING dddddddddddddddfnandni.pptx

SCM Symposium PPT Format Customer loyalty is predi

Cybersecurity Threats and Cybersecurity Best Practices

『澳洲文凭』买詹姆士库克大学毕业证书成绩单办理澳洲JCU文凭学位证书

Company Snapshot Theme for Business by Slidesgo.pptx

Unidad 4 – Redes de ordenadores (en inglés).pptx

Even more accessible! What WCAG 2.1 means for designers - Web Directions Summit 2018

1. Even more accessible! What WCAG 2.1 means for designers Allison Ravenhall @RavenAlly Digital Accessibility Sensei@Intopia

2. W3C Web Content Accessibility Guidelines 1999 2008 2018 v1.0 v2.0 v2.1

3. WCAG 2.1 = WCAG 2.0 + 17 new success criteria

4. Define data types of personal info form fields

5. Design responsive layouts

6. Make keyboard shortcuts configurable

7. Define simple gestures

8. Pinch = complex Tap = simple

9. Start element labels with (unbroken) on-screen content

10.        

11.     

12.       

13. Provide alternatives to motion functions

14.  Tilt maze – No alternative

15.  Steering – Tilt optional

16. Unless it’s essential

17. Don’tmake usersread likethis

18.  

19.  

20. Colour

21.  Name  Enter your name All about you I agree Headings = 3.0 : 1 Text = 4.5 : 1 Element outlines = 3.0 : 1 Icons/graphics = 3.0 : 1 State styles = 3.0 : 1

22. Make interactive things big (44 x 44 CSS pixels)

23. Exceptions! There’s an equivalent big thing Inline link text Browser-controlled element Size is essential

24. Tell users in advance about timeouts

25.

26. Allison Ravenhall @RavenAlly Digital Accessibility Sensei@Intopia Get accessible!