SlideShare ist ein Scribd-Unternehmen logo
1 von 23
Downloaden Sie, um offline zu lesen
WCAG 2.0
for Designers
Designing Accessible Content
Tim Madle, Associate Creative Director
tmadle@brunnerworks.com
Web Content Accessibility
Guidelines (WCAG) are a series
of guidelines for making web
content accessible for all users,
especially those with disabilities.
The full current version (2.0) lives here: w3.org/TR/WCAG/
Level A	We must satisfy these requirements,
otherwise it will be impossible for one or
more groups to access the web content.
Level AA	We should satisfy these requirements,
otherwise some groups will find it difficult to
access the web content.
Level AAA	We may satisfy these requirements,
in order to make it easier for some groups
to access the web content.
Of the 38 Level A and AA provisions,
about 50%impact
website design.
Visual /Audio
Design
Guideline 1.4.1	Level A
Color
Color should not be the only visual means of conveying essential
information. Recommended strategies include providing text
cues or using patterns in addition to different colors.
Guideline 1.4.3	Level AA
Contrast
Text should have a contrast ratio1
of at least 4.5 to 1 to
accommodate users with mild visual impairments. Exceptions
include text that is large,2
purely decorative, part of an inactive
interface component or part of a logo.
1
There are many online tools to check contrast ratio, including snook.ca/technical/colour_contrast/colour.html.
2
Large text is defined as ≥18px if not bold and ≥14px if bold, for which a 3 to 1 contrast ratio is sufficient.
Guideline 1.4.4	Level AA
Text Size
Text should be resizable up to 200% for users
with mild visual impairments.1
1
Many modern browsers provide a zoom function for the entire page to accommodate this.
Guideline 2.3.1	Level A
Seizures
Content should not be designed in a way known to cause
seizures in users with photosensitive epilepsy. Elements
occupying a significant portion of the display that flash more than
three times in one second should be tested for compliance.1
1
The Trace Center Photosensitive Epilepsy Analysis Tool (PEAT) is available at trace.wisc.edu/peat/
Guideline 2.4.7	Level AA
Focus
Users with motor impairments who rely on the keyboard to
navigate need a clear visual focus indicator.1
1
Many modern browser’s include built-in support to accommodate this.
Guideline 3.2.4	Level AA
Consistency
Users with disabilities may develop search strategies to efficiently
navigate a site, so label recurring functions consistently.
Guideline 3.3.2	Level A
Forms
Labels or instructions should be included whenever user
input is required, and should be positioned near the elements
they reference.
Guideline 3.3.2	Level A
Instructions
Instructions should not depend solely on a user’s ability to see
the content as presented. For example, “Press the button on the
right” requires visual information, while “Press the ‘submit’ button
on the right” does not.
Guideline 1.4.2	Level A
Audio
Audio that plays automatically may interfere with screen readers.
Any audio that plays automatically must be less than three
seconds, or provide an easily accessible mechanism to stop it.
Interaction
Design
Guideline 2.1.1	Level A
Keyboard
Sites should be fully operable using only the keyboard.
Guideline 3.2.3	Level AA
Navigation
Navigation should appear in a consistent and predictable
order throughout a site so users can efficiently navigate.
Guideline 2.4.3	Level A
Focus Order
When navigating in a sequential order (e.g. via the Tab key),
the focus should follow the natural reading order.
Guidelines 3.2.1, 3.2.2	Level A
On Focus/Input
Because it can be disorienting, changes of context should not
occur when shifting focus or choosing from a selection, but
rather when the user takes a specific action to do so.
Guideline 3.3.1	Level A
Errors
If an input error is detected, the error should be identified and
described to the user in a text form.
Guideline 2.2.2	Level A
Motion/Updates
Content that moves or automatically updates can cause issues
for those with disabilities. Ways to start and stop such activity
should be provided.
Guideline 2.2.1	Level A
Time Limits
Users with disabilities may require significantly more time to
complete tasks due to limitations in assistive technologies,
so time limits should be avoided whenever possible.1
1
Exceptions include when the user can turn off, adjust or extend the time limit as needed, when it is a real-time limit (e.g. an online auction),
when the time limit is essential to the activity, or when it is longer than 20 hours.
Guarino Reid, Loretta and Andi Snow-Weaver. “WCAG 2.0 for Designers: Beyond Screen Readers and Captions”
Proceedings of the 13th International Conference on Human-Computer Interaction. Springer-Verlag, 2009. pp. 674-682. v1 July 24, 2013 1:50 PM

Weitere ähnliche Inhalte

Was ist angesagt?

WCAG 2.1 and POUR
WCAG 2.1 and POURWCAG 2.1 and POUR
WCAG 2.1 and POURAlena Huang
 
ADA Compliance and Website Accessibility
ADA Compliance and Website AccessibilityADA Compliance and Website Accessibility
ADA Compliance and Website AccessibilitySilverTech
 
Web accessibility 101: The why, who, what, and how of "a11y"
Web accessibility 101: The why, who, what, and how of "a11y"Web accessibility 101: The why, who, what, and how of "a11y"
Web accessibility 101: The why, who, what, and how of "a11y"ecentricarts
 
Tactics to Successfully Scope and Estimate UX Projects
Tactics to Successfully Scope and Estimate UX ProjectsTactics to Successfully Scope and Estimate UX Projects
Tactics to Successfully Scope and Estimate UX ProjectsBelatrix Software
 
Website Accessibility
Website AccessibilityWebsite Accessibility
Website AccessibilityNishan Bose
 
WCAG 2.1: What You Need to Know About the Most Recent Accessibility Standards
WCAG 2.1: What You Need to Know About the Most Recent Accessibility StandardsWCAG 2.1: What You Need to Know About the Most Recent Accessibility Standards
WCAG 2.1: What You Need to Know About the Most Recent Accessibility StandardsUXPA International
 
Design System in Figma A to Z.pdf
Design System in Figma A to Z.pdfDesign System in Figma A to Z.pdf
Design System in Figma A to Z.pdfAtiqur Rahaman
 
Design Token & Figma Variables.pdf
Design Token & Figma Variables.pdfDesign Token & Figma Variables.pdf
Design Token & Figma Variables.pdfAtiqur Rahaman
 
Web Accessibility for Web Developers
Web Accessibility for Web DevelopersWeb Accessibility for Web Developers
Web Accessibility for Web DevelopersAlexander Loechel
 
Web accessibility: it’s everyone’s responsibility
Web accessibility: it’s everyone’s responsibilityWeb accessibility: it’s everyone’s responsibility
Web accessibility: it’s everyone’s responsibilityMedia Access Australia
 
Introduction To Web Accessibility
Introduction To Web AccessibilityIntroduction To Web Accessibility
Introduction To Web AccessibilitySteven Swafford
 
Ui ux designing principles
Ui ux designing principlesUi ux designing principles
Ui ux designing principlesDzung Nguyen
 
Web accessibility
Web accessibilityWeb accessibility
Web accessibilityAGILEDROP
 
UI-UX Practical Talking - Mohamed Shehata
UI-UX Practical Talking - Mohamed ShehataUI-UX Practical Talking - Mohamed Shehata
UI-UX Practical Talking - Mohamed ShehataMohamed Shehata
 

Was ist angesagt? (20)

WCAG 2.1 and POUR
WCAG 2.1 and POURWCAG 2.1 and POUR
WCAG 2.1 and POUR
 
ADA Compliance and Website Accessibility
ADA Compliance and Website AccessibilityADA Compliance and Website Accessibility
ADA Compliance and Website Accessibility
 
Web accessibility 101: The why, who, what, and how of "a11y"
Web accessibility 101: The why, who, what, and how of "a11y"Web accessibility 101: The why, who, what, and how of "a11y"
Web accessibility 101: The why, who, what, and how of "a11y"
 
UX Strategy Part-1
UX Strategy Part-1UX Strategy Part-1
UX Strategy Part-1
 
Tactics to Successfully Scope and Estimate UX Projects
Tactics to Successfully Scope and Estimate UX ProjectsTactics to Successfully Scope and Estimate UX Projects
Tactics to Successfully Scope and Estimate UX Projects
 
Website Accessibility
Website AccessibilityWebsite Accessibility
Website Accessibility
 
WCAG 2.1: What You Need to Know About the Most Recent Accessibility Standards
WCAG 2.1: What You Need to Know About the Most Recent Accessibility StandardsWCAG 2.1: What You Need to Know About the Most Recent Accessibility Standards
WCAG 2.1: What You Need to Know About the Most Recent Accessibility Standards
 
Design System in Figma A to Z.pdf
Design System in Figma A to Z.pdfDesign System in Figma A to Z.pdf
Design System in Figma A to Z.pdf
 
Design Token & Figma Variables.pdf
Design Token & Figma Variables.pdfDesign Token & Figma Variables.pdf
Design Token & Figma Variables.pdf
 
Web Accessibility for Web Developers
Web Accessibility for Web DevelopersWeb Accessibility for Web Developers
Web Accessibility for Web Developers
 
Design System.pdf
Design System.pdfDesign System.pdf
Design System.pdf
 
Accessibility
AccessibilityAccessibility
Accessibility
 
UI-UX Services | Web Designing Services
UI-UX Services | Web Designing ServicesUI-UX Services | Web Designing Services
UI-UX Services | Web Designing Services
 
Web accessibility: it’s everyone’s responsibility
Web accessibility: it’s everyone’s responsibilityWeb accessibility: it’s everyone’s responsibility
Web accessibility: it’s everyone’s responsibility
 
Introduction To Web Accessibility
Introduction To Web AccessibilityIntroduction To Web Accessibility
Introduction To Web Accessibility
 
Ui ux designing principles
Ui ux designing principlesUi ux designing principles
Ui ux designing principles
 
Design System
Design SystemDesign System
Design System
 
Web accessibility
Web accessibilityWeb accessibility
Web accessibility
 
Web design
Web designWeb design
Web design
 
UI-UX Practical Talking - Mohamed Shehata
UI-UX Practical Talking - Mohamed ShehataUI-UX Practical Talking - Mohamed Shehata
UI-UX Practical Talking - Mohamed Shehata
 

Andere mochten auch

Wordcamp 2014 - How to Perform an Accessibility Audit
Wordcamp 2014   - How to Perform an Accessibility AuditWordcamp 2014   - How to Perform an Accessibility Audit
Wordcamp 2014 - How to Perform an Accessibility AuditJanis Yee
 
Design with accessibility in mind
Design with accessibility in mindDesign with accessibility in mind
Design with accessibility in mindMike Donahue
 
BBC Olympics: An accessibility case study
BBC Olympics: An accessibility case studyBBC Olympics: An accessibility case study
BBC Olympics: An accessibility case studyAlistair Duggin
 
Accessibility & UI Development
Accessibility & UI DevelopmentAccessibility & UI Development
Accessibility & UI DevelopmentCharlie Perrins
 
Practical Accessibility - Midwest UX conference 2011
Practical Accessibility - Midwest UX conference 2011Practical Accessibility - Midwest UX conference 2011
Practical Accessibility - Midwest UX conference 2011Chris Merkel
 
Web usability, navigation & accessibility
Web usability, navigation & accessibilityWeb usability, navigation & accessibility
Web usability, navigation & accessibilityChristoffer Rietz
 
Accessibility for Happy Designers
Accessibility for Happy DesignersAccessibility for Happy Designers
Accessibility for Happy DesignersSandi Wassmer
 
The Hotel Industry - Timeshare
The Hotel Industry - TimeshareThe Hotel Industry - Timeshare
The Hotel Industry - Timesharewiniata
 
Introduction to accessibility
Introduction to accessibilityIntroduction to accessibility
Introduction to accessibilityJoseph McLarty
 
UXR2/17: Accessibility Trends – Anspruch und Wirklichkeit der Barrierefreihei...
UXR2/17: Accessibility Trends – Anspruch und Wirklichkeit der Barrierefreihei...UXR2/17: Accessibility Trends – Anspruch und Wirklichkeit der Barrierefreihei...
UXR2/17: Accessibility Trends – Anspruch und Wirklichkeit der Barrierefreihei...uxHH
 
Web Standards, HTML 5 & Accessibility - What makes a site accessible today?
Web Standards, HTML 5 & Accessibility - What makes a site accessible today?Web Standards, HTML 5 & Accessibility - What makes a site accessible today?
Web Standards, HTML 5 & Accessibility - What makes a site accessible today?Ted Drake
 
Accessibility for Hybrid Mobile
Accessibility for Hybrid MobileAccessibility for Hybrid Mobile
Accessibility for Hybrid MobileBobby Bristol
 
Web Standards and Accessibility
Web Standards and AccessibilityWeb Standards and Accessibility
Web Standards and AccessibilityNick DeNardis
 
The Velvet Rope - making user experience accessible
The Velvet Rope - making user experience accessibleThe Velvet Rope - making user experience accessible
The Velvet Rope - making user experience accessibleHenny Swan
 
SharePoint 2010 Web Standards & Accessibility
SharePoint 2010 Web Standards & AccessibilitySharePoint 2010 Web Standards & Accessibility
SharePoint 2010 Web Standards & AccessibilityMavention
 
2017 CSUN Color Contrast
2017 CSUN Color Contrast2017 CSUN Color Contrast
2017 CSUN Color ContrastCrystal Baker
 
Assistive technologies and devices for visually impaired
Assistive technologies and devices for visually impairedAssistive technologies and devices for visually impaired
Assistive technologies and devices for visually impairedUmar Shuaib
 

Andere mochten auch (20)

Wordcamp 2014 - How to Perform an Accessibility Audit
Wordcamp 2014   - How to Perform an Accessibility AuditWordcamp 2014   - How to Perform an Accessibility Audit
Wordcamp 2014 - How to Perform an Accessibility Audit
 
Accessibility Audit
Accessibility AuditAccessibility Audit
Accessibility Audit
 
Steps to WCAG 2.0
Steps to WCAG 2.0Steps to WCAG 2.0
Steps to WCAG 2.0
 
Design with accessibility in mind
Design with accessibility in mindDesign with accessibility in mind
Design with accessibility in mind
 
BBC Olympics: An accessibility case study
BBC Olympics: An accessibility case studyBBC Olympics: An accessibility case study
BBC Olympics: An accessibility case study
 
Accessibility & UI Development
Accessibility & UI DevelopmentAccessibility & UI Development
Accessibility & UI Development
 
Practical Accessibility - Midwest UX conference 2011
Practical Accessibility - Midwest UX conference 2011Practical Accessibility - Midwest UX conference 2011
Practical Accessibility - Midwest UX conference 2011
 
Web usability, navigation & accessibility
Web usability, navigation & accessibilityWeb usability, navigation & accessibility
Web usability, navigation & accessibility
 
Accessibility for Happy Designers
Accessibility for Happy DesignersAccessibility for Happy Designers
Accessibility for Happy Designers
 
The Hotel Industry - Timeshare
The Hotel Industry - TimeshareThe Hotel Industry - Timeshare
The Hotel Industry - Timeshare
 
Introduction to accessibility
Introduction to accessibilityIntroduction to accessibility
Introduction to accessibility
 
UXR2/17: Accessibility Trends – Anspruch und Wirklichkeit der Barrierefreihei...
UXR2/17: Accessibility Trends – Anspruch und Wirklichkeit der Barrierefreihei...UXR2/17: Accessibility Trends – Anspruch und Wirklichkeit der Barrierefreihei...
UXR2/17: Accessibility Trends – Anspruch und Wirklichkeit der Barrierefreihei...
 
Web Standards, HTML 5 & Accessibility - What makes a site accessible today?
Web Standards, HTML 5 & Accessibility - What makes a site accessible today?Web Standards, HTML 5 & Accessibility - What makes a site accessible today?
Web Standards, HTML 5 & Accessibility - What makes a site accessible today?
 
Accessibility for Hybrid Mobile
Accessibility for Hybrid MobileAccessibility for Hybrid Mobile
Accessibility for Hybrid Mobile
 
Web Standards and Accessibility
Web Standards and AccessibilityWeb Standards and Accessibility
Web Standards and Accessibility
 
The Velvet Rope - making user experience accessible
The Velvet Rope - making user experience accessibleThe Velvet Rope - making user experience accessible
The Velvet Rope - making user experience accessible
 
SharePoint 2010 Web Standards & Accessibility
SharePoint 2010 Web Standards & AccessibilitySharePoint 2010 Web Standards & Accessibility
SharePoint 2010 Web Standards & Accessibility
 
2017 CSUN Color Contrast
2017 CSUN Color Contrast2017 CSUN Color Contrast
2017 CSUN Color Contrast
 
Accessible Responsive Web Design
Accessible Responsive Web DesignAccessible Responsive Web Design
Accessible Responsive Web Design
 
Assistive technologies and devices for visually impaired
Assistive technologies and devices for visually impairedAssistive technologies and devices for visually impaired
Assistive technologies and devices for visually impaired
 

Ähnlich wie WCAG 2.0 for Designers

WCAG2 Guidelines and Cognitive Impairment a11y ldn 2011
WCAG2 Guidelines and Cognitive Impairment a11y ldn 2011WCAG2 Guidelines and Cognitive Impairment a11y ldn 2011
WCAG2 Guidelines and Cognitive Impairment a11y ldn 2011Graham Armfield
 
Web a11y beyond guidelines
Web a11y beyond guidelinesWeb a11y beyond guidelines
Web a11y beyond guidelinesrach123
 
Accessibility for Content Developer, Designer, Code Developer and Tester
Accessibility for Content Developer, Designer, Code Developer and TesterAccessibility for Content Developer, Designer, Code Developer and Tester
Accessibility for Content Developer, Designer, Code Developer and TesterJatin Kochhar
 
Implementing WCAG 2.2 into Your Digital Strategy
Implementing WCAG 2.2 into Your Digital StrategyImplementing WCAG 2.2 into Your Digital Strategy
Implementing WCAG 2.2 into Your Digital Strategy3Play Media
 
Ideas 5 - Roger Hudson - Understanding WCAG 2.0
Ideas 5 - Roger Hudson - Understanding WCAG 2.0Ideas 5 - Roger Hudson - Understanding WCAG 2.0
Ideas 5 - Roger Hudson - Understanding WCAG 2.0awia
 
Wipa Seminar WCAG 2.0
Wipa Seminar WCAG 2.0Wipa Seminar WCAG 2.0
Wipa Seminar WCAG 2.0Roger Hudson
 
Accessibility testing kailash 26_nov_ 2010
Accessibility testing kailash 26_nov_ 2010Accessibility testing kailash 26_nov_ 2010
Accessibility testing kailash 26_nov_ 2010Kailash More
 
A Web Design Framework for Improved Accessibility for People with Disabilitie...
A Web Design Framework for Improved Accessibility for People with Disabilitie...A Web Design Framework for Improved Accessibility for People with Disabilitie...
A Web Design Framework for Improved Accessibility for People with Disabilitie...Yeliz Yesilada
 
RBC Royal Bank : An Accessibility Evaluation & Recommendations
RBC Royal Bank : An Accessibility Evaluation & RecommendationsRBC Royal Bank : An Accessibility Evaluation & Recommendations
RBC Royal Bank : An Accessibility Evaluation & RecommendationsSivaprasad Paliyath (CUA - HFI)
 
Building accessible web components without tears
Building accessible web components without tearsBuilding accessible web components without tears
Building accessible web components without tearsRuss Weakley
 
Beginner’s Guide to WCAG 2.0 – Know Your Way Around Web Accessibility Rules
Beginner’s Guide to WCAG 2.0 – Know Your Way Around Web Accessibility RulesBeginner’s Guide to WCAG 2.0 – Know Your Way Around Web Accessibility Rules
Beginner’s Guide to WCAG 2.0 – Know Your Way Around Web Accessibility RulesJohn McNabb
 
Accessibility Update: Section 508 and WCAG in a Library 2.0 World
Accessibility Update: Section 508 and WCAG in a Library 2.0 WorldAccessibility Update: Section 508 and WCAG in a Library 2.0 World
Accessibility Update: Section 508 and WCAG in a Library 2.0 WorldNina McHale
 
Managing Accessibility Compliance
Managing Accessibility ComplianceManaging Accessibility Compliance
Managing Accessibility ComplianceKeana Lynch
 
Authoring tool accessibility guidelines (ATAG)
Authoring tool accessibility guidelines (ATAG)Authoring tool accessibility guidelines (ATAG)
Authoring tool accessibility guidelines (ATAG)AdhithyaHarshan
 
What's New in WCAG 2.1
What's New in WCAG 2.1What's New in WCAG 2.1
What's New in WCAG 2.1Jennifer Smith
 
Upa Conference Loic Nunez 18 June2008
Upa Conference Loic Nunez 18 June2008Upa Conference Loic Nunez 18 June2008
Upa Conference Loic Nunez 18 June2008Loic Nunez
 
Seth Duffy Accessibility97035
Seth Duffy   Accessibility97035Seth Duffy   Accessibility97035
Seth Duffy Accessibility97035FNian
 

Ähnlich wie WCAG 2.0 for Designers (20)

WCAG2 Guidelines and Cognitive Impairment a11y ldn 2011
WCAG2 Guidelines and Cognitive Impairment a11y ldn 2011WCAG2 Guidelines and Cognitive Impairment a11y ldn 2011
WCAG2 Guidelines and Cognitive Impairment a11y ldn 2011
 
Web a11y beyond guidelines
Web a11y beyond guidelinesWeb a11y beyond guidelines
Web a11y beyond guidelines
 
Accessibility for Content Developer, Designer, Code Developer and Tester
Accessibility for Content Developer, Designer, Code Developer and TesterAccessibility for Content Developer, Designer, Code Developer and Tester
Accessibility for Content Developer, Designer, Code Developer and Tester
 
Implementing WCAG 2.2 into Your Digital Strategy
Implementing WCAG 2.2 into Your Digital StrategyImplementing WCAG 2.2 into Your Digital Strategy
Implementing WCAG 2.2 into Your Digital Strategy
 
Ideas 5 - Roger Hudson - Understanding WCAG 2.0
Ideas 5 - Roger Hudson - Understanding WCAG 2.0Ideas 5 - Roger Hudson - Understanding WCAG 2.0
Ideas 5 - Roger Hudson - Understanding WCAG 2.0
 
Wipa Seminar WCAG 2.0
Wipa Seminar WCAG 2.0Wipa Seminar WCAG 2.0
Wipa Seminar WCAG 2.0
 
Accessibility testing kailash 26_nov_ 2010
Accessibility testing kailash 26_nov_ 2010Accessibility testing kailash 26_nov_ 2010
Accessibility testing kailash 26_nov_ 2010
 
A Web Design Framework for Improved Accessibility for People with Disabilitie...
A Web Design Framework for Improved Accessibility for People with Disabilitie...A Web Design Framework for Improved Accessibility for People with Disabilitie...
A Web Design Framework for Improved Accessibility for People with Disabilitie...
 
RBC Royal Bank : An Accessibility Evaluation & Recommendations
RBC Royal Bank : An Accessibility Evaluation & RecommendationsRBC Royal Bank : An Accessibility Evaluation & Recommendations
RBC Royal Bank : An Accessibility Evaluation & Recommendations
 
Building accessible web components without tears
Building accessible web components without tearsBuilding accessible web components without tears
Building accessible web components without tears
 
Microsoft Word - Sample Report
Microsoft Word - Sample ReportMicrosoft Word - Sample Report
Microsoft Word - Sample Report
 
WCAG for Beginners
WCAG for BeginnersWCAG for Beginners
WCAG for Beginners
 
Beginner’s Guide to WCAG 2.0 – Know Your Way Around Web Accessibility Rules
Beginner’s Guide to WCAG 2.0 – Know Your Way Around Web Accessibility RulesBeginner’s Guide to WCAG 2.0 – Know Your Way Around Web Accessibility Rules
Beginner’s Guide to WCAG 2.0 – Know Your Way Around Web Accessibility Rules
 
Accessibility Update: Section 508 and WCAG in a Library 2.0 World
Accessibility Update: Section 508 and WCAG in a Library 2.0 WorldAccessibility Update: Section 508 and WCAG in a Library 2.0 World
Accessibility Update: Section 508 and WCAG in a Library 2.0 World
 
Managing Accessibility Compliance
Managing Accessibility ComplianceManaging Accessibility Compliance
Managing Accessibility Compliance
 
Authoring tool accessibility guidelines (ATAG)
Authoring tool accessibility guidelines (ATAG)Authoring tool accessibility guidelines (ATAG)
Authoring tool accessibility guidelines (ATAG)
 
doumi94
doumi94doumi94
doumi94
 
What's New in WCAG 2.1
What's New in WCAG 2.1What's New in WCAG 2.1
What's New in WCAG 2.1
 
Upa Conference Loic Nunez 18 June2008
Upa Conference Loic Nunez 18 June2008Upa Conference Loic Nunez 18 June2008
Upa Conference Loic Nunez 18 June2008
 
Seth Duffy Accessibility97035
Seth Duffy   Accessibility97035Seth Duffy   Accessibility97035
Seth Duffy Accessibility97035
 

Mehr von Brunner

YouTube Infographic
YouTube InfographicYouTube Infographic
YouTube InfographicBrunner
 
Twitter Infographic
Twitter InfographicTwitter Infographic
Twitter InfographicBrunner
 
Pinterest Infographic
Pinterest InfographicPinterest Infographic
Pinterest InfographicBrunner
 
LinkedIn Infographic
LinkedIn InfographicLinkedIn Infographic
LinkedIn InfographicBrunner
 
Instagram Infographic
Instagram InfographicInstagram Infographic
Instagram InfographicBrunner
 
Facebook Infographic
Facebook InfographicFacebook Infographic
Facebook InfographicBrunner
 
The Consumers' Path To Home Improvement
The Consumers' Path To Home ImprovementThe Consumers' Path To Home Improvement
The Consumers' Path To Home ImprovementBrunner
 
Cross Platform Infographic
Cross Platform Infographic Cross Platform Infographic
Cross Platform Infographic Brunner
 
Programmatic: Using Technology to Automate the Buying and Selling of Digital Ads
Programmatic: Using Technology to Automate the Buying and Selling of Digital AdsProgrammatic: Using Technology to Automate the Buying and Selling of Digital Ads
Programmatic: Using Technology to Automate the Buying and Selling of Digital AdsBrunner
 
What Does Integrated Marketing Mean to Today’s (and Tomorrow’s) PR Professional?
What Does Integrated Marketing Mean to Today’s (and Tomorrow’s) PR Professional?What Does Integrated Marketing Mean to Today’s (and Tomorrow’s) PR Professional?
What Does Integrated Marketing Mean to Today’s (and Tomorrow’s) PR Professional?Brunner
 
Agency innovation labs 10 steps to success
Agency innovation labs   10 steps to successAgency innovation labs   10 steps to success
Agency innovation labs 10 steps to successBrunner
 
Designing Websites in Photoshop
Designing Websites in PhotoshopDesigning Websites in Photoshop
Designing Websites in PhotoshopBrunner
 
Brunner 30-Minute Power Lunch: Social Commerce
Brunner 30-Minute Power Lunch: Social CommerceBrunner 30-Minute Power Lunch: Social Commerce
Brunner 30-Minute Power Lunch: Social CommerceBrunner
 
Brunner Vine POV
Brunner Vine POVBrunner Vine POV
Brunner Vine POVBrunner
 
Social Commerce 101 - From Conversations to Sales
Social Commerce 101  - From Conversations to SalesSocial Commerce 101  - From Conversations to Sales
Social Commerce 101 - From Conversations to SalesBrunner
 
Engage moms shaun quigley lo_sophomo
Engage moms shaun quigley lo_sophomoEngage moms shaun quigley lo_sophomo
Engage moms shaun quigley lo_sophomoBrunner
 
Engage moms shaun quigley lo_sophomo
Engage moms shaun quigley lo_sophomoEngage moms shaun quigley lo_sophomo
Engage moms shaun quigley lo_sophomoBrunner
 
Marketing health michelle latta facebook a place for healthy discussions
Marketing health michelle latta facebook a place for healthy discussionsMarketing health michelle latta facebook a place for healthy discussions
Marketing health michelle latta facebook a place for healthy discussionsBrunner
 
2011: Realign Your Digital Strategy for a Smarter, Faster World
2011: Realign Your Digital Strategy for a Smarter, Faster World 2011: Realign Your Digital Strategy for a Smarter, Faster World
2011: Realign Your Digital Strategy for a Smarter, Faster World Brunner
 
CPG Mobile Marketing Strategy
CPG Mobile Marketing Strategy CPG Mobile Marketing Strategy
CPG Mobile Marketing Strategy Brunner
 

Mehr von Brunner (20)

YouTube Infographic
YouTube InfographicYouTube Infographic
YouTube Infographic
 
Twitter Infographic
Twitter InfographicTwitter Infographic
Twitter Infographic
 
Pinterest Infographic
Pinterest InfographicPinterest Infographic
Pinterest Infographic
 
LinkedIn Infographic
LinkedIn InfographicLinkedIn Infographic
LinkedIn Infographic
 
Instagram Infographic
Instagram InfographicInstagram Infographic
Instagram Infographic
 
Facebook Infographic
Facebook InfographicFacebook Infographic
Facebook Infographic
 
The Consumers' Path To Home Improvement
The Consumers' Path To Home ImprovementThe Consumers' Path To Home Improvement
The Consumers' Path To Home Improvement
 
Cross Platform Infographic
Cross Platform Infographic Cross Platform Infographic
Cross Platform Infographic
 
Programmatic: Using Technology to Automate the Buying and Selling of Digital Ads
Programmatic: Using Technology to Automate the Buying and Selling of Digital AdsProgrammatic: Using Technology to Automate the Buying and Selling of Digital Ads
Programmatic: Using Technology to Automate the Buying and Selling of Digital Ads
 
What Does Integrated Marketing Mean to Today’s (and Tomorrow’s) PR Professional?
What Does Integrated Marketing Mean to Today’s (and Tomorrow’s) PR Professional?What Does Integrated Marketing Mean to Today’s (and Tomorrow’s) PR Professional?
What Does Integrated Marketing Mean to Today’s (and Tomorrow’s) PR Professional?
 
Agency innovation labs 10 steps to success
Agency innovation labs   10 steps to successAgency innovation labs   10 steps to success
Agency innovation labs 10 steps to success
 
Designing Websites in Photoshop
Designing Websites in PhotoshopDesigning Websites in Photoshop
Designing Websites in Photoshop
 
Brunner 30-Minute Power Lunch: Social Commerce
Brunner 30-Minute Power Lunch: Social CommerceBrunner 30-Minute Power Lunch: Social Commerce
Brunner 30-Minute Power Lunch: Social Commerce
 
Brunner Vine POV
Brunner Vine POVBrunner Vine POV
Brunner Vine POV
 
Social Commerce 101 - From Conversations to Sales
Social Commerce 101  - From Conversations to SalesSocial Commerce 101  - From Conversations to Sales
Social Commerce 101 - From Conversations to Sales
 
Engage moms shaun quigley lo_sophomo
Engage moms shaun quigley lo_sophomoEngage moms shaun quigley lo_sophomo
Engage moms shaun quigley lo_sophomo
 
Engage moms shaun quigley lo_sophomo
Engage moms shaun quigley lo_sophomoEngage moms shaun quigley lo_sophomo
Engage moms shaun quigley lo_sophomo
 
Marketing health michelle latta facebook a place for healthy discussions
Marketing health michelle latta facebook a place for healthy discussionsMarketing health michelle latta facebook a place for healthy discussions
Marketing health michelle latta facebook a place for healthy discussions
 
2011: Realign Your Digital Strategy for a Smarter, Faster World
2011: Realign Your Digital Strategy for a Smarter, Faster World 2011: Realign Your Digital Strategy for a Smarter, Faster World
2011: Realign Your Digital Strategy for a Smarter, Faster World
 
CPG Mobile Marketing Strategy
CPG Mobile Marketing Strategy CPG Mobile Marketing Strategy
CPG Mobile Marketing Strategy
 

Kürzlich hochgeladen

The_Canvas_of_Creative_Mastery_Newsletter_April_2024_Version.pdf
The_Canvas_of_Creative_Mastery_Newsletter_April_2024_Version.pdfThe_Canvas_of_Creative_Mastery_Newsletter_April_2024_Version.pdf
The_Canvas_of_Creative_Mastery_Newsletter_April_2024_Version.pdfAmirYakdi
 
Kala jadu for love marriage | Real amil baba | Famous amil baba | kala jadu n...
Kala jadu for love marriage | Real amil baba | Famous amil baba | kala jadu n...Kala jadu for love marriage | Real amil baba | Famous amil baba | kala jadu n...
Kala jadu for love marriage | Real amil baba | Famous amil baba | kala jadu n...babafaisel
 
Editorial design Magazine design project.pdf
Editorial design Magazine design project.pdfEditorial design Magazine design project.pdf
Editorial design Magazine design project.pdftbatkhuu1
 
Delhi Call Girls Paharganj 9711199171 ☎✔👌✔ Whatsapp Hard And Sexy Vip Call
Delhi Call Girls Paharganj 9711199171 ☎✔👌✔ Whatsapp Hard And Sexy Vip CallDelhi Call Girls Paharganj 9711199171 ☎✔👌✔ Whatsapp Hard And Sexy Vip Call
Delhi Call Girls Paharganj 9711199171 ☎✔👌✔ Whatsapp Hard And Sexy Vip Callshivangimorya083
 
DragonBall PowerPoint Template for demo.pptx
DragonBall PowerPoint Template for demo.pptxDragonBall PowerPoint Template for demo.pptx
DragonBall PowerPoint Template for demo.pptxmirandajeremy200221
 
VIP Call Girls Service Bhagyanagar Hyderabad Call +91-8250192130
VIP Call Girls Service Bhagyanagar Hyderabad Call +91-8250192130VIP Call Girls Service Bhagyanagar Hyderabad Call +91-8250192130
VIP Call Girls Service Bhagyanagar Hyderabad Call +91-8250192130Suhani Kapoor
 
VVIP CALL GIRLS Lucknow 💓 Lucknow < Renuka Sharma > 7877925207 Escorts Service
VVIP CALL GIRLS Lucknow 💓 Lucknow < Renuka Sharma > 7877925207 Escorts ServiceVVIP CALL GIRLS Lucknow 💓 Lucknow < Renuka Sharma > 7877925207 Escorts Service
VVIP CALL GIRLS Lucknow 💓 Lucknow < Renuka Sharma > 7877925207 Escorts Servicearoranaina404
 
Call Girls in Kalkaji Delhi 8264348440 call girls ❤️
Call Girls in Kalkaji Delhi 8264348440 call girls ❤️Call Girls in Kalkaji Delhi 8264348440 call girls ❤️
Call Girls in Kalkaji Delhi 8264348440 call girls ❤️soniya singh
 
Brookefield Call Girls: 🍓 7737669865 🍓 High Profile Model Escorts | Bangalore...
Brookefield Call Girls: 🍓 7737669865 🍓 High Profile Model Escorts | Bangalore...Brookefield Call Girls: 🍓 7737669865 🍓 High Profile Model Escorts | Bangalore...
Brookefield Call Girls: 🍓 7737669865 🍓 High Profile Model Escorts | Bangalore...amitlee9823
 
Case Study of Hotel Taj Vivanta, Pune
Case Study of Hotel Taj Vivanta, PuneCase Study of Hotel Taj Vivanta, Pune
Case Study of Hotel Taj Vivanta, PuneLukeKholes
 
Verified Trusted Call Girls Adugodi💘 9352852248 Good Looking standard Profil...
Verified Trusted Call Girls Adugodi💘 9352852248  Good Looking standard Profil...Verified Trusted Call Girls Adugodi💘 9352852248  Good Looking standard Profil...
Verified Trusted Call Girls Adugodi💘 9352852248 Good Looking standard Profil...kumaririma588
 
The history of music videos a level presentation
The history of music videos a level presentationThe history of music videos a level presentation
The history of music videos a level presentationamedia6
 
Design Inspiration for College by Slidesgo.pptx
Design Inspiration for College by Slidesgo.pptxDesign Inspiration for College by Slidesgo.pptx
Design Inspiration for College by Slidesgo.pptxTusharBahuguna2
 
VIP Call Girls Service Mehdipatnam Hyderabad Call +91-8250192130
VIP Call Girls Service Mehdipatnam Hyderabad Call +91-8250192130VIP Call Girls Service Mehdipatnam Hyderabad Call +91-8250192130
VIP Call Girls Service Mehdipatnam Hyderabad Call +91-8250192130Suhani Kapoor
 
Fashion trends before and after covid.pptx
Fashion trends before and after covid.pptxFashion trends before and after covid.pptx
Fashion trends before and after covid.pptxVanshNarang19
 
Booking open Available Pune Call Girls Nanded City 6297143586 Call Hot India...
Booking open Available Pune Call Girls Nanded City  6297143586 Call Hot India...Booking open Available Pune Call Girls Nanded City  6297143586 Call Hot India...
Booking open Available Pune Call Girls Nanded City 6297143586 Call Hot India...Call Girls in Nagpur High Profile
 
Pooja 9892124323, Call girls Services and Mumbai Escort Service Near Hotel Hy...
Pooja 9892124323, Call girls Services and Mumbai Escort Service Near Hotel Hy...Pooja 9892124323, Call girls Services and Mumbai Escort Service Near Hotel Hy...
Pooja 9892124323, Call girls Services and Mumbai Escort Service Near Hotel Hy...Pooja Nehwal
 
VVIP Pune Call Girls Hadapsar (7001035870) Pune Escorts Nearby with Complete ...
VVIP Pune Call Girls Hadapsar (7001035870) Pune Escorts Nearby with Complete ...VVIP Pune Call Girls Hadapsar (7001035870) Pune Escorts Nearby with Complete ...
VVIP Pune Call Girls Hadapsar (7001035870) Pune Escorts Nearby with Complete ...Call Girls in Nagpur High Profile
 

Kürzlich hochgeladen (20)

The_Canvas_of_Creative_Mastery_Newsletter_April_2024_Version.pdf
The_Canvas_of_Creative_Mastery_Newsletter_April_2024_Version.pdfThe_Canvas_of_Creative_Mastery_Newsletter_April_2024_Version.pdf
The_Canvas_of_Creative_Mastery_Newsletter_April_2024_Version.pdf
 
Kala jadu for love marriage | Real amil baba | Famous amil baba | kala jadu n...
Kala jadu for love marriage | Real amil baba | Famous amil baba | kala jadu n...Kala jadu for love marriage | Real amil baba | Famous amil baba | kala jadu n...
Kala jadu for love marriage | Real amil baba | Famous amil baba | kala jadu n...
 
Editorial design Magazine design project.pdf
Editorial design Magazine design project.pdfEditorial design Magazine design project.pdf
Editorial design Magazine design project.pdf
 
Delhi Call Girls Paharganj 9711199171 ☎✔👌✔ Whatsapp Hard And Sexy Vip Call
Delhi Call Girls Paharganj 9711199171 ☎✔👌✔ Whatsapp Hard And Sexy Vip CallDelhi Call Girls Paharganj 9711199171 ☎✔👌✔ Whatsapp Hard And Sexy Vip Call
Delhi Call Girls Paharganj 9711199171 ☎✔👌✔ Whatsapp Hard And Sexy Vip Call
 
DragonBall PowerPoint Template for demo.pptx
DragonBall PowerPoint Template for demo.pptxDragonBall PowerPoint Template for demo.pptx
DragonBall PowerPoint Template for demo.pptx
 
VIP Call Girls Service Bhagyanagar Hyderabad Call +91-8250192130
VIP Call Girls Service Bhagyanagar Hyderabad Call +91-8250192130VIP Call Girls Service Bhagyanagar Hyderabad Call +91-8250192130
VIP Call Girls Service Bhagyanagar Hyderabad Call +91-8250192130
 
VVIP CALL GIRLS Lucknow 💓 Lucknow < Renuka Sharma > 7877925207 Escorts Service
VVIP CALL GIRLS Lucknow 💓 Lucknow < Renuka Sharma > 7877925207 Escorts ServiceVVIP CALL GIRLS Lucknow 💓 Lucknow < Renuka Sharma > 7877925207 Escorts Service
VVIP CALL GIRLS Lucknow 💓 Lucknow < Renuka Sharma > 7877925207 Escorts Service
 
Call Girls in Kalkaji Delhi 8264348440 call girls ❤️
Call Girls in Kalkaji Delhi 8264348440 call girls ❤️Call Girls in Kalkaji Delhi 8264348440 call girls ❤️
Call Girls in Kalkaji Delhi 8264348440 call girls ❤️
 
Brookefield Call Girls: 🍓 7737669865 🍓 High Profile Model Escorts | Bangalore...
Brookefield Call Girls: 🍓 7737669865 🍓 High Profile Model Escorts | Bangalore...Brookefield Call Girls: 🍓 7737669865 🍓 High Profile Model Escorts | Bangalore...
Brookefield Call Girls: 🍓 7737669865 🍓 High Profile Model Escorts | Bangalore...
 
Case Study of Hotel Taj Vivanta, Pune
Case Study of Hotel Taj Vivanta, PuneCase Study of Hotel Taj Vivanta, Pune
Case Study of Hotel Taj Vivanta, Pune
 
Verified Trusted Call Girls Adugodi💘 9352852248 Good Looking standard Profil...
Verified Trusted Call Girls Adugodi💘 9352852248  Good Looking standard Profil...Verified Trusted Call Girls Adugodi💘 9352852248  Good Looking standard Profil...
Verified Trusted Call Girls Adugodi💘 9352852248 Good Looking standard Profil...
 
The history of music videos a level presentation
The history of music videos a level presentationThe history of music videos a level presentation
The history of music videos a level presentation
 
Design Inspiration for College by Slidesgo.pptx
Design Inspiration for College by Slidesgo.pptxDesign Inspiration for College by Slidesgo.pptx
Design Inspiration for College by Slidesgo.pptx
 
B. Smith. (Architectural Portfolio.).pdf
B. Smith. (Architectural Portfolio.).pdfB. Smith. (Architectural Portfolio.).pdf
B. Smith. (Architectural Portfolio.).pdf
 
VIP Call Girls Service Mehdipatnam Hyderabad Call +91-8250192130
VIP Call Girls Service Mehdipatnam Hyderabad Call +91-8250192130VIP Call Girls Service Mehdipatnam Hyderabad Call +91-8250192130
VIP Call Girls Service Mehdipatnam Hyderabad Call +91-8250192130
 
Fashion trends before and after covid.pptx
Fashion trends before and after covid.pptxFashion trends before and after covid.pptx
Fashion trends before and after covid.pptx
 
Booking open Available Pune Call Girls Nanded City 6297143586 Call Hot India...
Booking open Available Pune Call Girls Nanded City  6297143586 Call Hot India...Booking open Available Pune Call Girls Nanded City  6297143586 Call Hot India...
Booking open Available Pune Call Girls Nanded City 6297143586 Call Hot India...
 
Pooja 9892124323, Call girls Services and Mumbai Escort Service Near Hotel Hy...
Pooja 9892124323, Call girls Services and Mumbai Escort Service Near Hotel Hy...Pooja 9892124323, Call girls Services and Mumbai Escort Service Near Hotel Hy...
Pooja 9892124323, Call girls Services and Mumbai Escort Service Near Hotel Hy...
 
VVIP Pune Call Girls Hadapsar (7001035870) Pune Escorts Nearby with Complete ...
VVIP Pune Call Girls Hadapsar (7001035870) Pune Escorts Nearby with Complete ...VVIP Pune Call Girls Hadapsar (7001035870) Pune Escorts Nearby with Complete ...
VVIP Pune Call Girls Hadapsar (7001035870) Pune Escorts Nearby with Complete ...
 
young call girls in Vivek Vihar🔝 9953056974 🔝 Delhi escort Service
young call girls in Vivek Vihar🔝 9953056974 🔝 Delhi escort Serviceyoung call girls in Vivek Vihar🔝 9953056974 🔝 Delhi escort Service
young call girls in Vivek Vihar🔝 9953056974 🔝 Delhi escort Service
 

WCAG 2.0 for Designers

  • 1. WCAG 2.0 for Designers Designing Accessible Content Tim Madle, Associate Creative Director tmadle@brunnerworks.com
  • 2. Web Content Accessibility Guidelines (WCAG) are a series of guidelines for making web content accessible for all users, especially those with disabilities. The full current version (2.0) lives here: w3.org/TR/WCAG/
  • 3. Level A We must satisfy these requirements, otherwise it will be impossible for one or more groups to access the web content. Level AA We should satisfy these requirements, otherwise some groups will find it difficult to access the web content. Level AAA We may satisfy these requirements, in order to make it easier for some groups to access the web content.
  • 4. Of the 38 Level A and AA provisions, about 50%impact website design.
  • 6. Guideline 1.4.1 Level A Color Color should not be the only visual means of conveying essential information. Recommended strategies include providing text cues or using patterns in addition to different colors.
  • 7. Guideline 1.4.3 Level AA Contrast Text should have a contrast ratio1 of at least 4.5 to 1 to accommodate users with mild visual impairments. Exceptions include text that is large,2 purely decorative, part of an inactive interface component or part of a logo. 1 There are many online tools to check contrast ratio, including snook.ca/technical/colour_contrast/colour.html. 2 Large text is defined as ≥18px if not bold and ≥14px if bold, for which a 3 to 1 contrast ratio is sufficient.
  • 8. Guideline 1.4.4 Level AA Text Size Text should be resizable up to 200% for users with mild visual impairments.1 1 Many modern browsers provide a zoom function for the entire page to accommodate this.
  • 9. Guideline 2.3.1 Level A Seizures Content should not be designed in a way known to cause seizures in users with photosensitive epilepsy. Elements occupying a significant portion of the display that flash more than three times in one second should be tested for compliance.1 1 The Trace Center Photosensitive Epilepsy Analysis Tool (PEAT) is available at trace.wisc.edu/peat/
  • 10. Guideline 2.4.7 Level AA Focus Users with motor impairments who rely on the keyboard to navigate need a clear visual focus indicator.1 1 Many modern browser’s include built-in support to accommodate this.
  • 11. Guideline 3.2.4 Level AA Consistency Users with disabilities may develop search strategies to efficiently navigate a site, so label recurring functions consistently.
  • 12. Guideline 3.3.2 Level A Forms Labels or instructions should be included whenever user input is required, and should be positioned near the elements they reference.
  • 13. Guideline 3.3.2 Level A Instructions Instructions should not depend solely on a user’s ability to see the content as presented. For example, “Press the button on the right” requires visual information, while “Press the ‘submit’ button on the right” does not.
  • 14. Guideline 1.4.2 Level A Audio Audio that plays automatically may interfere with screen readers. Any audio that plays automatically must be less than three seconds, or provide an easily accessible mechanism to stop it.
  • 16. Guideline 2.1.1 Level A Keyboard Sites should be fully operable using only the keyboard.
  • 17. Guideline 3.2.3 Level AA Navigation Navigation should appear in a consistent and predictable order throughout a site so users can efficiently navigate.
  • 18. Guideline 2.4.3 Level A Focus Order When navigating in a sequential order (e.g. via the Tab key), the focus should follow the natural reading order.
  • 19. Guidelines 3.2.1, 3.2.2 Level A On Focus/Input Because it can be disorienting, changes of context should not occur when shifting focus or choosing from a selection, but rather when the user takes a specific action to do so.
  • 20. Guideline 3.3.1 Level A Errors If an input error is detected, the error should be identified and described to the user in a text form.
  • 21. Guideline 2.2.2 Level A Motion/Updates Content that moves or automatically updates can cause issues for those with disabilities. Ways to start and stop such activity should be provided.
  • 22. Guideline 2.2.1 Level A Time Limits Users with disabilities may require significantly more time to complete tasks due to limitations in assistive technologies, so time limits should be avoided whenever possible.1 1 Exceptions include when the user can turn off, adjust or extend the time limit as needed, when it is a real-time limit (e.g. an online auction), when the time limit is essential to the activity, or when it is longer than 20 hours.
  • 23. Guarino Reid, Loretta and Andi Snow-Weaver. “WCAG 2.0 for Designers: Beyond Screen Readers and Captions” Proceedings of the 13th International Conference on Human-Computer Interaction. Springer-Verlag, 2009. pp. 674-682. v1 July 24, 2013 1:50 PM