SlideShare a Scribd company logo
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
Design
responsive
layouts
Make keyboard
shortcuts
configurable
Define
simple
gestures
Pinch =
complex
Tap =
simple
Start element labels
with (unbroken)
on-screen content
 



 

 



 



 
Provide
alternatives to
motion functions
 Tilt maze – No alternative
 Steering – Tilt optional
Unless it’s essential
Don’tmake
usersread
likethis




Colour

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
Tell users
in advance
about timeouts
Allison Ravenhall
@RavenAlly
Digital Accessibility
Sensei@Intopia
Get accessible!

More Related Content

Similar to 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 ...
Latest trends in Technical Writing, Authoring on Cloud, Content Delivery for ...Latest trends in Technical Writing, Authoring on Cloud, Content Delivery for ...
Latest trends in Technical Writing, Authoring on Cloud, Content Delivery for ...
Raghuram Pandurangan
 
Website Accessibility Workshop
Website Accessibility WorkshopWebsite Accessibility Workshop
Website Accessibility Workshop
Devin Olson
 
Make your visio diagrams accessible to everyone
Make your visio diagrams accessible to everyoneMake your visio diagrams accessible to everyone
Make your visio diagrams accessible to everyone
David Parker
 
Developing a practical HTML5 magazine workflow
Developing a practical HTML5 magazine workflowDeveloping a practical HTML5 magazine workflow
Developing a practical HTML5 magazine workflow
Michael Kowalski
 
Web Accessibility in Drupal
Web Accessibility in DrupalWeb Accessibility in Drupal
Web Accessibility in Drupal
Promet Source
 
Every Web Developer is a Win8 developer
Every Web Developer is a Win8 developerEvery Web Developer is a Win8 developer
Every Web Developer is a Win8 developer
Kevin DeRudder
 
Designing Powerful Web Applications - Monterey
Designing Powerful Web Applications - MontereyDesigning Powerful Web Applications - Monterey
Designing Powerful Web Applications - Monterey
Dave Malouf
 
Rethinking accessibility related best practices for CSS in the modern age
Rethinking accessibility related best practices for CSS in the modern ageRethinking accessibility related best practices for CSS in the modern age
Rethinking accessibility related best practices for CSS in the modern age
shwetank
 
A11y: Why do we need it? What is WCAG? How do we work with it?
A11y: Why do we need it? What is WCAG? How do we work with it?A11y: Why do we need it? What is WCAG? How do we work with it?
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 RIAs
Designing Powerful Web Applications Using AJAX and Other RIAsDesigning Powerful Web Applications Using AJAX and Other RIAs
Designing Powerful Web Applications Using AJAX and Other RIAs
Dave Malouf
 
Four Principles of Accessibility UK Version
Four Principles of Accessibility UK Version Four Principles of Accessibility UK Version
Four Principles of Accessibility UK Version
Homer Gaines
 
Web Accessibility for Web Developers
Web Accessibility for Web DevelopersWeb Accessibility for Web Developers
Web Accessibility for Web Developers
Alexander Loechel
 
Plan For Accessibility - TODCon 2008
Plan For Accessibility - TODCon 2008Plan For Accessibility - TODCon 2008
Plan For Accessibility - TODCon 2008
Denise Jacobs
 
HTML5- The Boosting Era of Web Development
HTML5- The Boosting Era of Web DevelopmentHTML5- The Boosting Era of Web Development
HTML5- The Boosting Era of Web Development
MobilePundits
 
Inclusive Design 101
Inclusive Design 101Inclusive Design 101
Inclusive Design 101
Amanda Reagan
 
Inclusive Design 101
Inclusive Design 101Inclusive Design 101
Inclusive Design 101
Amanda Reagan
 
Managing Accessibility Compliance
Managing Accessibility ComplianceManaging Accessibility Compliance
Managing Accessibility Compliance
Keana Lynch
 
Daniel Egan Msdn Tech Days Oc Day2
Daniel Egan Msdn Tech Days Oc Day2Daniel Egan Msdn Tech Days Oc Day2
Daniel Egan Msdn Tech Days Oc Day2
Daniel Egan
 
An Introduction to WAI-ARIA
An Introduction to WAI-ARIAAn Introduction to WAI-ARIA
An Introduction to WAI-ARIA
IWMW
 
Let's get accessible!
Let's get accessible!Let's get accessible!
Let's get accessible!
Tady Walsh
 

Similar to 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 ...
Latest trends in Technical Writing, Authoring on Cloud, Content Delivery for ...Latest trends in Technical Writing, Authoring on Cloud, Content Delivery for ...
Latest trends in Technical Writing, Authoring on Cloud, Content Delivery for ...
 
Website Accessibility Workshop
Website Accessibility WorkshopWebsite Accessibility Workshop
Website Accessibility Workshop
 
Make your visio diagrams accessible to everyone
Make your visio diagrams accessible to everyoneMake your visio diagrams accessible to everyone
Make your visio diagrams accessible to everyone
 
Developing a practical HTML5 magazine workflow
Developing a practical HTML5 magazine workflowDeveloping a practical HTML5 magazine workflow
Developing a practical HTML5 magazine workflow
 
Web Accessibility in Drupal
Web Accessibility in DrupalWeb Accessibility in Drupal
Web Accessibility in Drupal
 
Every Web Developer is a Win8 developer
Every Web Developer is a Win8 developerEvery Web Developer is a Win8 developer
Every Web Developer is a Win8 developer
 
Designing Powerful Web Applications - Monterey
Designing Powerful Web Applications - MontereyDesigning Powerful Web Applications - Monterey
Designing Powerful Web Applications - Monterey
 
Rethinking accessibility related best practices for CSS in the modern age
Rethinking accessibility related best practices for CSS in the modern ageRethinking accessibility related best practices for CSS in the modern age
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?
A11y: Why do we need it? What is WCAG? How do we work with it?A11y: Why do we need it? What is WCAG? How do we work with it?
A11y: Why do we need it? What is WCAG? How do we work with it?
 
Designing Powerful Web Applications Using AJAX and Other RIAs
Designing Powerful Web Applications Using AJAX and Other RIAsDesigning Powerful Web Applications Using AJAX and Other RIAs
Designing Powerful Web Applications Using AJAX and Other RIAs
 
Four Principles of Accessibility UK Version
Four Principles of Accessibility UK Version Four Principles of Accessibility UK Version
Four Principles of Accessibility UK Version
 
Web Accessibility for Web Developers
Web Accessibility for Web DevelopersWeb Accessibility for Web Developers
Web Accessibility for Web Developers
 
Plan For Accessibility - TODCon 2008
Plan For Accessibility - TODCon 2008Plan For Accessibility - TODCon 2008
Plan For Accessibility - TODCon 2008
 
HTML5- The Boosting Era of Web Development
HTML5- The Boosting Era of Web DevelopmentHTML5- The Boosting Era of Web Development
HTML5- The Boosting Era of Web Development
 
Inclusive Design 101
Inclusive Design 101Inclusive Design 101
Inclusive Design 101
 
Inclusive Design 101
Inclusive Design 101Inclusive Design 101
Inclusive Design 101
 
Managing Accessibility Compliance
Managing Accessibility ComplianceManaging Accessibility Compliance
Managing Accessibility Compliance
 
Daniel Egan Msdn Tech Days Oc Day2
Daniel Egan Msdn Tech Days Oc Day2Daniel Egan Msdn Tech Days Oc Day2
Daniel Egan Msdn Tech Days Oc Day2
 
An Introduction to WAI-ARIA
An Introduction to WAI-ARIAAn Introduction to WAI-ARIA
An Introduction to WAI-ARIA
 
Let's get accessible!
Let's get accessible!Let's get accessible!
Let's get accessible!
 

More from Intopia

The value of measuring your accessibility maturity
The value of measuring your accessibility maturityThe value of measuring your accessibility maturity
The value of measuring your accessibility maturity
Intopia
 
Annotating designs for accessibility
Annotating designs for accessibilityAnnotating designs for accessibility
Annotating designs for accessibility
Intopia
 
Making Content Creation Tools Accessible
Making Content Creation Tools AccessibleMaking Content Creation Tools Accessible
Making Content Creation Tools Accessible
Intopia
 
Annotating designs for accessibility
Annotating designs for accessibilityAnnotating designs for accessibility
Annotating designs for accessibility
Intopia
 
The why, when and how of including people with disability in the design process
The why, when and how of including people with disability in the design processThe why, when and how of including people with disability in the design process
The why, when and how of including people with disability in the design process
Intopia
 
Annotating designs for accessibility
Annotating designs for accessibilityAnnotating designs for accessibility
Annotating designs for accessibility
Intopia
 
Digital accessibility and learning opportunities
Digital accessibility and learning opportunitiesDigital accessibility and learning opportunities
Digital accessibility and learning opportunities
Intopia
 
Accessible procurement: Stories from the trenches
Accessible procurement: Stories from the trenchesAccessible procurement: Stories from the trenches
Accessible procurement: Stories from the trenches
Intopia
 
From Empathy to Research with People with Disability
From Empathy to Research with People with DisabilityFrom Empathy to Research with People with Disability
From Empathy to Research with People with Disability
Intopia
 
Designing for people with cognitive impairments
Designing for people with cognitive impairmentsDesigning for people with cognitive impairments
Designing for people with cognitive impairments
Intopia
 
How to create a kick ass business case for accessibility
How to create a kick ass business case for accessibilityHow to create a kick ass business case for accessibility
How to create a kick ass business case for accessibility
Intopia
 
Personalised technical accessibility training: a case study
Personalised technical accessibility training: a case studyPersonalised technical accessibility training: a case study
Personalised technical accessibility training: a case study
Intopia
 
Making Accessible Web Animations
Making Accessible Web AnimationsMaking Accessible Web Animations
Making Accessible Web Animations
Intopia
 
Using the black art of marketing to sell accessibility
Using the black art of marketing to sell accessibilityUsing the black art of marketing to sell accessibility
Using the black art of marketing to sell accessibility
Intopia
 
Design Systems that supports inclusive experiences
Design Systems that supports inclusive experiencesDesign Systems that supports inclusive experiences
Design Systems that supports inclusive experiences
Intopia
 
Using cognitive walkthroughs for a task-oriented accessibility review
Using cognitive walkthroughs for a task-oriented accessibility reviewUsing cognitive walkthroughs for a task-oriented accessibility review
Using cognitive walkthroughs for a task-oriented accessibility review
Intopia
 
Creating accessible design systems - OZeWAI 2018
Creating accessible design systems - OZeWAI 2018Creating accessible design systems - OZeWAI 2018
Creating accessible design systems - OZeWAI 2018
Intopia
 
Investing in your family's future - OZeWAI 2018
Investing in your family's future - OZeWAI 2018Investing in your family's future - OZeWAI 2018
Investing in your family's future - OZeWAI 2018
Intopia
 
Miles of Accessibility - An 'Accessibility 101'
Miles of Accessibility - An 'Accessibility 101' Miles of Accessibility - An 'Accessibility 101'
Miles of Accessibility - An 'Accessibility 101'
Intopia
 
Using cognitive walkthroughs to better review designs for accessibility
Using cognitive walkthroughs to better review designs for accessibilityUsing cognitive walkthroughs to better review designs for accessibility
Using cognitive walkthroughs to better review designs for accessibility
Intopia
 

More from Intopia (20)

The value of measuring your accessibility maturity
The value of measuring your accessibility maturityThe value of measuring your accessibility maturity
The value of measuring your accessibility maturity
 
Annotating designs for accessibility
Annotating designs for accessibilityAnnotating designs for accessibility
Annotating designs for accessibility
 
Making Content Creation Tools Accessible
Making Content Creation Tools AccessibleMaking Content Creation Tools Accessible
Making Content Creation Tools Accessible
 
Annotating designs for accessibility
Annotating designs for accessibilityAnnotating designs for accessibility
Annotating designs for accessibility
 
The why, when and how of including people with disability in the design process
The why, when and how of including people with disability in the design processThe why, when and how of including people with disability in the design process
The why, when and how of including people with disability in the design process
 
Annotating designs for accessibility
Annotating designs for accessibilityAnnotating designs for accessibility
Annotating designs for accessibility
 
Digital accessibility and learning opportunities
Digital accessibility and learning opportunitiesDigital accessibility and learning opportunities
Digital accessibility and learning opportunities
 
Accessible procurement: Stories from the trenches
Accessible procurement: Stories from the trenchesAccessible procurement: Stories from the trenches
Accessible procurement: Stories from the trenches
 
From Empathy to Research with People with Disability
From Empathy to Research with People with DisabilityFrom Empathy to Research with People with Disability
From Empathy to Research with People with Disability
 
Designing for people with cognitive impairments
Designing for people with cognitive impairmentsDesigning for people with cognitive impairments
Designing for people with cognitive impairments
 
How to create a kick ass business case for accessibility
How to create a kick ass business case for accessibilityHow to create a kick ass business case for accessibility
How to create a kick ass business case for accessibility
 
Personalised technical accessibility training: a case study
Personalised technical accessibility training: a case studyPersonalised technical accessibility training: a case study
Personalised technical accessibility training: a case study
 
Making Accessible Web Animations
Making Accessible Web AnimationsMaking Accessible Web Animations
Making Accessible Web Animations
 
Using the black art of marketing to sell accessibility
Using the black art of marketing to sell accessibilityUsing the black art of marketing to sell accessibility
Using the black art of marketing to sell accessibility
 
Design Systems that supports inclusive experiences
Design Systems that supports inclusive experiencesDesign Systems that supports inclusive experiences
Design Systems that supports inclusive experiences
 
Using cognitive walkthroughs for a task-oriented accessibility review
Using cognitive walkthroughs for a task-oriented accessibility reviewUsing cognitive walkthroughs for a task-oriented accessibility review
Using cognitive walkthroughs for a task-oriented accessibility review
 
Creating accessible design systems - OZeWAI 2018
Creating accessible design systems - OZeWAI 2018Creating accessible design systems - OZeWAI 2018
Creating accessible design systems - OZeWAI 2018
 
Investing in your family's future - OZeWAI 2018
Investing in your family's future - OZeWAI 2018Investing in your family's future - OZeWAI 2018
Investing in your family's future - OZeWAI 2018
 
Miles of Accessibility - An 'Accessibility 101'
Miles of Accessibility - An 'Accessibility 101' Miles of Accessibility - An 'Accessibility 101'
Miles of Accessibility - An 'Accessibility 101'
 
Using cognitive walkthroughs to better review designs for accessibility
Using cognitive walkthroughs to better review designs for accessibilityUsing cognitive walkthroughs to better review designs for accessibility
Using cognitive walkthroughs to better review designs for accessibility
 

Recently uploaded

快速办理(Vic毕业证书)惠灵顿维多利亚大学毕业证完成信一模一样
快速办理(Vic毕业证书)惠灵顿维多利亚大学毕业证完成信一模一样快速办理(Vic毕业证书)惠灵顿维多利亚大学毕业证完成信一模一样
快速办理(Vic毕业证书)惠灵顿维多利亚大学毕业证完成信一模一样
3a0sd7z3
 
一比一原版(uc毕业证书)加拿大卡尔加里大学毕业证如何办理
一比一原版(uc毕业证书)加拿大卡尔加里大学毕业证如何办理一比一原版(uc毕业证书)加拿大卡尔加里大学毕业证如何办理
一比一原版(uc毕业证书)加拿大卡尔加里大学毕业证如何办理
dtagbe
 
HijackLoader Evolution: Interactive Process Hollowing
HijackLoader Evolution: Interactive Process HollowingHijackLoader Evolution: Interactive Process Hollowing
HijackLoader Evolution: Interactive Process Hollowing
Donato Onofri
 
cyber crime.pptx..........................
cyber crime.pptx..........................cyber crime.pptx..........................
cyber crime.pptx..........................
GNAMBIKARAO
 
KubeCon & CloudNative Con 2024 Artificial Intelligent
KubeCon & CloudNative Con 2024 Artificial IntelligentKubeCon & CloudNative Con 2024 Artificial Intelligent
KubeCon & CloudNative Con 2024 Artificial Intelligent
Emre Gündoğdu
 
Securing BGP: Operational Strategies and Best Practices for Network Defenders...
Securing BGP: Operational Strategies and Best Practices for Network Defenders...Securing BGP: Operational Strategies and Best Practices for Network Defenders...
Securing BGP: Operational Strategies and Best Practices for Network Defenders...
APNIC
 
快速办理(新加坡SMU毕业证书)新加坡管理大学毕业证文凭证书一模一样
快速办理(新加坡SMU毕业证书)新加坡管理大学毕业证文凭证书一模一样快速办理(新加坡SMU毕业证书)新加坡管理大学毕业证文凭证书一模一样
快速办理(新加坡SMU毕业证书)新加坡管理大学毕业证文凭证书一模一样
3a0sd7z3
 
Honeypots Unveiled: Proactive Defense Tactics for Cyber Security, Phoenix Sum...
Honeypots Unveiled: Proactive Defense Tactics for Cyber Security, Phoenix Sum...Honeypots Unveiled: Proactive Defense Tactics for Cyber Security, Phoenix Sum...
Honeypots Unveiled: Proactive Defense Tactics for Cyber Security, Phoenix Sum...
APNIC
 
怎么办理(umiami毕业证书)美国迈阿密大学毕业证文凭证书实拍图原版一模一样
怎么办理(umiami毕业证书)美国迈阿密大学毕业证文凭证书实拍图原版一模一样怎么办理(umiami毕业证书)美国迈阿密大学毕业证文凭证书实拍图原版一模一样
怎么办理(umiami毕业证书)美国迈阿密大学毕业证文凭证书实拍图原版一模一样
rtunex8r
 
Bengaluru Dreamin' 24 - Personal Branding
Bengaluru Dreamin' 24 - Personal BrandingBengaluru Dreamin' 24 - Personal Branding
Bengaluru Dreamin' 24 - Personal Branding
Tarandeep Singh
 
How to make a complaint to the police for Social Media Fraud.pdf
How to make a complaint to the police for Social Media Fraud.pdfHow to make a complaint to the police for Social Media Fraud.pdf
How to make a complaint to the police for Social Media Fraud.pdf
Infosec train
 
一比一原版新西兰林肯大学毕业证(Lincoln毕业证书)学历如何办理
一比一原版新西兰林肯大学毕业证(Lincoln毕业证书)学历如何办理一比一原版新西兰林肯大学毕业证(Lincoln毕业证书)学历如何办理
一比一原版新西兰林肯大学毕业证(Lincoln毕业证书)学历如何办理
thezot
 

Recently uploaded (12)

快速办理(Vic毕业证书)惠灵顿维多利亚大学毕业证完成信一模一样
快速办理(Vic毕业证书)惠灵顿维多利亚大学毕业证完成信一模一样快速办理(Vic毕业证书)惠灵顿维多利亚大学毕业证完成信一模一样
快速办理(Vic毕业证书)惠灵顿维多利亚大学毕业证完成信一模一样
 
一比一原版(uc毕业证书)加拿大卡尔加里大学毕业证如何办理
一比一原版(uc毕业证书)加拿大卡尔加里大学毕业证如何办理一比一原版(uc毕业证书)加拿大卡尔加里大学毕业证如何办理
一比一原版(uc毕业证书)加拿大卡尔加里大学毕业证如何办理
 
HijackLoader Evolution: Interactive Process Hollowing
HijackLoader Evolution: Interactive Process HollowingHijackLoader Evolution: Interactive Process Hollowing
HijackLoader Evolution: Interactive Process Hollowing
 
cyber crime.pptx..........................
cyber crime.pptx..........................cyber crime.pptx..........................
cyber crime.pptx..........................
 
KubeCon & CloudNative Con 2024 Artificial Intelligent
KubeCon & CloudNative Con 2024 Artificial IntelligentKubeCon & CloudNative Con 2024 Artificial Intelligent
KubeCon & CloudNative Con 2024 Artificial Intelligent
 
Securing BGP: Operational Strategies and Best Practices for Network Defenders...
Securing BGP: Operational Strategies and Best Practices for Network Defenders...Securing BGP: Operational Strategies and Best Practices for Network Defenders...
Securing BGP: Operational Strategies and Best Practices for Network Defenders...
 
快速办理(新加坡SMU毕业证书)新加坡管理大学毕业证文凭证书一模一样
快速办理(新加坡SMU毕业证书)新加坡管理大学毕业证文凭证书一模一样快速办理(新加坡SMU毕业证书)新加坡管理大学毕业证文凭证书一模一样
快速办理(新加坡SMU毕业证书)新加坡管理大学毕业证文凭证书一模一样
 
Honeypots Unveiled: Proactive Defense Tactics for Cyber Security, Phoenix Sum...
Honeypots Unveiled: Proactive Defense Tactics for Cyber Security, Phoenix Sum...Honeypots Unveiled: Proactive Defense Tactics for Cyber Security, Phoenix Sum...
Honeypots Unveiled: Proactive Defense Tactics for Cyber Security, Phoenix Sum...
 
怎么办理(umiami毕业证书)美国迈阿密大学毕业证文凭证书实拍图原版一模一样
怎么办理(umiami毕业证书)美国迈阿密大学毕业证文凭证书实拍图原版一模一样怎么办理(umiami毕业证书)美国迈阿密大学毕业证文凭证书实拍图原版一模一样
怎么办理(umiami毕业证书)美国迈阿密大学毕业证文凭证书实拍图原版一模一样
 
Bengaluru Dreamin' 24 - Personal Branding
Bengaluru Dreamin' 24 - Personal BrandingBengaluru Dreamin' 24 - Personal Branding
Bengaluru Dreamin' 24 - Personal Branding
 
How to make a complaint to the police for Social Media Fraud.pdf
How to make a complaint to the police for Social Media Fraud.pdfHow to make a complaint to the police for Social Media Fraud.pdf
How to make a complaint to the police for Social Media Fraud.pdf
 
一比一原版新西兰林肯大学毕业证(Lincoln毕业证书)学历如何办理
一比一原版新西兰林肯大学毕业证(Lincoln毕业证书)学历如何办理一比一原版新西兰林肯大学毕业证(Lincoln毕业证书)学历如何办理
一比一原版新西兰林肯大学毕业证(Lincoln毕业证书)学历如何办理
 

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