SlideShare a Scribd company logo
1 of 51
Download to read offline
All change for WCAG 2.0
Patrick H. Lauke / Manchester Digital Development Agency / 24 March 2009
WHAT YOU NEED TO KNOW ABOUT THE NEW ACCESSIBILITY GUIDELINES
About me...
● Web Editor for University of Salford
● Web Standards Project (WaSP)
● Author and occasional .net magazine contributor
● NOT an expert?
Outline
● Background on WCAG 1.0
● The painful birth of WCAG 2.0
● Overview of the new guidelines
● Next steps for WCAG 1.0 veterans
Web Content Accessibility Guidelines 1.0
● www.w3.org/TR/WCAG10
● W3C recommendation 5 May 1999
● 14 guidelines
● 75 checkpoints
WCAG 1.0 – problems
● HTML-centric checkpoints, despite separate
techniques document
http://www.w3.org/TR/WAI-WEBCONTENT-TECHS/
● “until user agents” clauses
● Forbids JavaScript and any non-W3C
technologies
● Vague checkpoints
WCAG 2.0 – early attempts
● Work began soon after release of WCAG 1.0
● Many iterations, largely under radar of web devs
● Original “Last Call” April 2006
To Hell with WCAG 2.0
● Joe Clark's vitriolic style
● A List Apart, 23 May 2006
http://www.alistapart.com/articles/tohellwithwcag2
● Main points of concern:
● Overall size of combined guidelines
● Inscrutable language
● Baseline concept
● Omission of markup validation / standards
To Hell with WCAG 2.0
● Generated huge interest from web devs
● Joe Clark started WCAG Samurai project to create
errata for WCAG 1.0
● W3C demoted WCAG 2.0 from Last Call back to
Public Working Draft
WCAG 2.0 back on track
● Joe Clark's leaving speech at @media2007 –
confident that WCAG 2.0 heading in right
direction
● Historical aside: my take on amended WCAG 2.0
http://www.webstandards.org/2007/06/11/review-wcag2-may2007-working-draft/
● Nonetheless released WCAG Samurai Errata
http://wcagsamurai.org/
Web Content Accessibility Guidelines 2.0
● www.w3.org/TR/WCAG20
● W3C recommendation 11 December 2008
WCAG 2.0 suite of documents
WCAG 2.0 suite of documents
● Web Content Accessibility Guidelines 2.0
[normative]
● How to Meet WCAG 2.0 [informative]
● Understanding WCAG 2.0 [informative]
● Techniques for WCAG 2.0 [informative]
● http://www.w3.org/WAI/intro/wcag20
Web Content Accessibility Guidelines 2.0
● 4 general principles
● 12 guidelines
● 61 success criteria
WCAG 2.0 principles
A website should be...
● Perceivable
● Operable
● Usable
● Robust
WCAG 2.0 improvements
● Principles, guidelines and success criteria are
technology-agnostic
WCAG 1.0 examples
● “Guideline 5. Create tables that transform
gracefully”
● “5.3 Do not use tables for layout unless the
table makes sense when linearized.”
● “Note. Once user agents support style sheet positioning,
tables should not be used for layout.”
● So what happens with CSS positioning that breaks
linear flow?
WCAG 2.0 examples
● “Guideline 1.3 Adaptable: Create content that can be presented
in different ways (for example simpler layout) without losing
information or structure.”
● “1.3.2 Meaningful Sequence: When the sequence in which
content is presented affects its meaning, a correct
reading sequence can be programmatically
determined.”
WCAG 2.0 improvements
● WCAG 1.0 “Guideline 11. Use W3C technologies
and guidelines”
● “Where it is not possible to use a W3C technology, or doing
so results in material that does not transform gracefully,
provide an alternative version of the content that is
accessible.”
● WCAG 2.0 can be applied to W3C and non-W3C
technologies (as long as they're accessibility-
supported)
WCAG 2.0 improvements
● Accessibility-supported technologies
● supported by users' assistive technology
● technology must have accessibility-supported
user agents that are available to users
WCAG 2.0 accessibility-supported
● You can use PDF, Flash, even JavaScript
● JavaScript and WAI-ARIA
http://www.w3.org/TR/wai-aria/
● Even if a technology isn't fully accessibility-
supported, as long as you use the supported bits
● Worst case provide fallback that is supported
WCAG 2.0 improvements
● Removes all “until user agents...” clauses
WCAG 1.0 example
● “Guideline 10. Use interim solutions.”
● “10.4 Until user agents handle empty controls correctly, include
default, place-holding characters in edit boxes and text areas.”
WCAG 2.0 improvements
● Each success criterion is more easily testable
● Success criteria give clearer guidance than WCAG
1.0 checkpoints
WCAG 1.0 example
● “Guideline 2. Don't rely on color alone.”
● “2.2 Ensure that foreground and background color
combinations provide sufficient contrast when viewed
by someone having color deficits or when viewed on a
black and white screen.”
● What exactly is “sufficient”?
WCAG 2.0 example
● “Guideline 1.4 Distinguishable: Make it easier for users to see and
hear content including separating foreground from background.”
● AA “1.4.3 Contrast (Minimum): The visual presentation of
text and images of text has a contrast ratio of at least
4.5:1”
● “Large Text: Large-scale text and images of large-scale text
have a contrast ratio of at least 3:1”
● AAA “1.4.6 Contrast (Enhanced): The visual presentation of
text and images of text has a contrast ratio of at least 7:1”
● “Large Text: Large-scale text and images of large-scale text
have a contrast ratio of at least 4.5:1”
WCAG 2.0 improvements
● As a result of clearer, testable SCs some things
are allowed that previously weren't
WCAG 1.0 example
● “Guideline 7. Ensure user control of time-sensitive
content changes.”
● “7.1 Until user agents allow users to control flickering, avoid
causing the screen to flicker.”
● “7.2 Until user agents allow users to control blinking, avoid
causing content to blink[...]”
WCAG 2.0 example
● “Guideline 2.3 Seizures: Do not design content in a
way that is known to cause seizures”
● “2.3.1 Three Flashes or Below Threshold: Web pages do
not contain anything that flashes more than three
times in any one second period, or the flash is
below the general flash and red flash thresholds.”
WCAG 2.0 improvements
● Success criteria focus on the outcomes, not how
they're achieved
WCAG 1.0 example
● “Guideline 9. Design for device-independence.”
● “9.5 Provide keyboard shortcuts to important links
(including those in client-side image maps), form controls,
and groups of form controls.”
● “For example, in HTML, specify shortcuts via the
"accesskey" attribute.”
WCAG 2.0 example
● “Guideline 2.1 Keyboard Accessible: Make all
functionality available from a keyboard.“
● “2.1.1 Keyboard: All functionality of the content is operable
through a keyboard interface [...]”
WCAG 2.0 improvements
● Talks about mechanisms
● “process or technique for achieving a result”
WCAG 2.0 mechanism example
● “Guideline 2.4 Navigable: Provide ways to help users navigate, find
content, and determine where they are.”
● “2.4.1 Bypass Blocks: A mechanism is available to bypass
blocks of content that are repeated on multiple Web
pages.”
● Does this mandate skip links?
WCAG 2.0 mechanism example
● Looking at “How to meet WCAG 2.0”, skip links only
one of a few techniques mentioned
● Sufficient Techniques for 2.4.1 – Bypass Blocks:
● Creating links to skip blocks of repeated material
● Grouping blocks of repeated material in a way that can be
skipped
● Advisory Techniques for 2.4.1 – Bypass Blocks
● [...]
● C6: Positioning content based on structural markup
WCAG 2.0 techniques
● Techniques cover general technologies: HTML,
CSS, JavaScript, WAI-ARIA
● Sufficient and advisory techniques
● Techniques are informative, not normative
● List of techniques is not exhaustive – invent your
own as long as success criteria are fulfilled
WCAG 2.0 conformance
● WCAG 1.0 had duality of priority 1,2,3 that
mapped to levels A, AA, AAA
● WCAG 2.0 just uses A, AA, AAA model for both SCs
and conformance levels
WCAG 2.0 conformance
● Applies to full pages
● Complete processes
● Only accessibility-supported techs are relied on
● Non-interference (when adding non-accessibility-
supported technologies)
● You can conform without a conformance claim
WCAG 2.0 partial conformance
● 3rd
party content (UGC, feeds, etc)
● Use of languages/technologies without accessibility-
support (future-proofing?)
Transition from WCAG 1.0 to WCAG 2.0
● Needs of users with disabilities hasn't changed
● Technology that they use has
● If your site accessible under WCAG 1.0, shouldn't be
too far off WCAG 2.0
Transition from WCAG 1.0 to WCAG 2.0
● How WCAG 1.0 differs from WCAG 2.0
http://www.w3.org/WAI/WCAG20/from10/diff.php
● Comparison WCAG 1.0 checkpoints to WCAG 2.0
http://www.w3.org/WAI/WCAG20/from10/comparison/
● How to update your site from WCAG 1.0 to 2.0
http://www.w3.org/WAI/WCAG20/from10/websites.html
Transition from WCAG 1.0 to WCAG 2.0
● Evaluate your site based on WCAG 2.0 SCs
● Many 1.0 checkpoints map to 2.0 SCs
● Are there 1.0 requirements that have been lifted?
● Test more specific 2.0 SCs
Getting started with WCAG 2.0
● WebAIM's unofficial checklist
http://webaim.org/standards/wcag/checklist
Getting started with WCAG 2.0
● For a “one-stop shop” overview, customisable
WCAG 2.0 quick reference
http://www.w3.org/WAI/WCAG20/quickref/
Recap on WCAG 2.0
● Technology-agnostic – applicable to more
present and future technologies
● Clearly testable Success Criteria
● Focussed on outcome for users, not techniques
● Removes outdated requirements from 1.0
● Overall allows authors more freedom
Thanks
Patrick H. Lauke
http://www.splintered.co.uk

More Related Content

Similar to All you need to know about the evolution of WCAG guidelines

'Effective node.js development' by Viktor Turskyi at OdessaJS'2020
'Effective node.js development' by Viktor Turskyi at OdessaJS'2020'Effective node.js development' by Viktor Turskyi at OdessaJS'2020
'Effective node.js development' by Viktor Turskyi at OdessaJS'2020OdessaJS Conf
 
Wipa Seminar WCAG 2.0
Wipa Seminar WCAG 2.0Wipa Seminar WCAG 2.0
Wipa Seminar WCAG 2.0Roger Hudson
 
Advances in web accessibility
Advances in web accessibilityAdvances in web accessibility
Advances in web accessibilityIntopia
 
Accessibility update for print disability round table
Accessibility update for print disability round tableAccessibility update for print disability round table
Accessibility update for print disability round tableAndrew Arch
 
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
 
Inclusive Design for Web Development Teams
Inclusive Design for Web Development TeamsInclusive Design for Web Development Teams
Inclusive Design for Web Development TeamsShayne Rempel
 
Transition of Accessibility Evaluation Tools to New Standards
Transition of Accessibility Evaluation Tools to New StandardsTransition of Accessibility Evaluation Tools to New Standards
Transition of Accessibility Evaluation Tools to New Standardsw4a
 
Transition of Accessibility Evaluation Tools to New Standards
Transition of Accessibility Evaluation Tools to New StandardsTransition of Accessibility Evaluation Tools to New Standards
Transition of Accessibility Evaluation Tools to New StandardsMarkel Vigo
 
WCAG 2.2 - An Overview of the New Accessibility Guidelines.pptx
WCAG 2.2 - An Overview of the New Accessibility Guidelines.pptxWCAG 2.2 - An Overview of the New Accessibility Guidelines.pptx
WCAG 2.2 - An Overview of the New Accessibility Guidelines.pptxAbilityNet
 
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
 
Techjoomla Infrastructure Extensions - Adding an Enterprise Layer to Joomla!
Techjoomla Infrastructure Extensions - Adding an Enterprise Layer to Joomla!Techjoomla Infrastructure Extensions - Adding an Enterprise Layer to Joomla!
Techjoomla Infrastructure Extensions - Adding an Enterprise Layer to Joomla!Parth Lawate
 
What's New in WCAG 2.2? - AbilityNet webinar
What's New in WCAG 2.2? - AbilityNet webinarWhat's New in WCAG 2.2? - AbilityNet webinar
What's New in WCAG 2.2? - AbilityNet webinarAbilityNet
 

Similar to All you need to know about the evolution of WCAG guidelines (20)

ADA Site Compliance
ADA Site ComplianceADA Site Compliance
ADA Site Compliance
 
'Effective node.js development' by Viktor Turskyi at OdessaJS'2020
'Effective node.js development' by Viktor Turskyi at OdessaJS'2020'Effective node.js development' by Viktor Turskyi at OdessaJS'2020
'Effective node.js development' by Viktor Turskyi at OdessaJS'2020
 
Wipa Seminar WCAG 2.0
Wipa Seminar WCAG 2.0Wipa Seminar WCAG 2.0
Wipa Seminar WCAG 2.0
 
Advances in web accessibility
Advances in web accessibilityAdvances in web accessibility
Advances in web accessibility
 
Accessibility update for print disability round table
Accessibility update for print disability round tableAccessibility update for print disability round table
Accessibility update for print disability round table
 
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
 
adasitecompliance.com
adasitecompliance.comadasitecompliance.com
adasitecompliance.com
 
WCAG
WCAGWCAG
WCAG
 
Inclusive Design for Web Development Teams
Inclusive Design for Web Development TeamsInclusive Design for Web Development Teams
Inclusive Design for Web Development Teams
 
Transforming the web into a real application platform
Transforming the web into a real application platformTransforming the web into a real application platform
Transforming the web into a real application platform
 
Digital Accessibility
Digital AccessibilityDigital Accessibility
Digital Accessibility
 
WCAG for Beginners
WCAG for BeginnersWCAG for Beginners
WCAG for Beginners
 
Transition of Accessibility Evaluation Tools to New Standards
Transition of Accessibility Evaluation Tools to New StandardsTransition of Accessibility Evaluation Tools to New Standards
Transition of Accessibility Evaluation Tools to New Standards
 
Transition of Accessibility Evaluation Tools to New Standards
Transition of Accessibility Evaluation Tools to New StandardsTransition of Accessibility Evaluation Tools to New Standards
Transition of Accessibility Evaluation Tools to New Standards
 
W4a09
W4a09W4a09
W4a09
 
WCAG 2.2 - An Overview of the New Accessibility Guidelines.pptx
WCAG 2.2 - An Overview of the New Accessibility Guidelines.pptxWCAG 2.2 - An Overview of the New Accessibility Guidelines.pptx
WCAG 2.2 - An Overview of the New Accessibility Guidelines.pptx
 
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
 
Techjoomla Infrastructure Extensions - Adding an Enterprise Layer to Joomla!
Techjoomla Infrastructure Extensions - Adding an Enterprise Layer to Joomla!Techjoomla Infrastructure Extensions - Adding an Enterprise Layer to Joomla!
Techjoomla Infrastructure Extensions - Adding an Enterprise Layer to Joomla!
 
What's New in WCAG 2.2? - AbilityNet webinar
What's New in WCAG 2.2? - AbilityNet webinarWhat's New in WCAG 2.2? - AbilityNet webinar
What's New in WCAG 2.2? - AbilityNet webinar
 
SUG Bangalore - Kick Off Session
SUG Bangalore - Kick Off SessionSUG Bangalore - Kick Off Session
SUG Bangalore - Kick Off Session
 

More from Patrick Lauke

These (still) aren't the SCs you're looking for ... (mis)adventures in WCAG 2...
These (still) aren't the SCs you're looking for ... (mis)adventures in WCAG 2...These (still) aren't the SCs you're looking for ... (mis)adventures in WCAG 2...
These (still) aren't the SCs you're looking for ... (mis)adventures in WCAG 2...Patrick Lauke
 
Pointer Events Working Group update / TPAC 2023 / Patrick H. Lauke
Pointer Events Working Group update / TPAC 2023 / Patrick H. LaukePointer Events Working Group update / TPAC 2023 / Patrick H. Lauke
Pointer Events Working Group update / TPAC 2023 / Patrick H. LaukePatrick Lauke
 
These aren't the SCs you're looking for ... (mis)adventures in WCAG 2.x inter...
These aren't the SCs you're looking for ... (mis)adventures in WCAG 2.x inter...These aren't the SCs you're looking for ... (mis)adventures in WCAG 2.x inter...
These aren't the SCs you're looking for ... (mis)adventures in WCAG 2.x inter...Patrick Lauke
 
These aren't the SCs you're looking for ... (mis)adventures in WCAG 2.x inter...
These aren't the SCs you're looking for ... (mis)adventures in WCAG 2.x inter...These aren't the SCs you're looking for ... (mis)adventures in WCAG 2.x inter...
These aren't the SCs you're looking for ... (mis)adventures in WCAG 2.x inter...Patrick Lauke
 
Too much accessibility - good intentions, badly implemented / Public Sector F...
Too much accessibility - good intentions, badly implemented / Public Sector F...Too much accessibility - good intentions, badly implemented / Public Sector F...
Too much accessibility - good intentions, badly implemented / Public Sector F...Patrick Lauke
 
Styling Your Web Pages with Cascading Style Sheets / EDU course / University ...
Styling Your Web Pages with Cascading Style Sheets / EDU course / University ...Styling Your Web Pages with Cascading Style Sheets / EDU course / University ...
Styling Your Web Pages with Cascading Style Sheets / EDU course / University ...Patrick Lauke
 
Evaluating web sites for accessibility with Firefox / Manchester Digital Acce...
Evaluating web sites for accessibility with Firefox / Manchester Digital Acce...Evaluating web sites for accessibility with Firefox / Manchester Digital Acce...
Evaluating web sites for accessibility with Firefox / Manchester Digital Acce...Patrick Lauke
 
Managing and educating content editors - experiences and ideas from the trenc...
Managing and educating content editors - experiences and ideas from the trenc...Managing and educating content editors - experiences and ideas from the trenc...
Managing and educating content editors - experiences and ideas from the trenc...Patrick Lauke
 
Implementing Web Standards across the institution: trials and tribulations of...
Implementing Web Standards across the institution: trials and tribulations of...Implementing Web Standards across the institution: trials and tribulations of...
Implementing Web Standards across the institution: trials and tribulations of...Patrick Lauke
 
Geolinking content - experiments in connecting virtual and physical places / ...
Geolinking content - experiments in connecting virtual and physical places / ...Geolinking content - experiments in connecting virtual and physical places / ...
Geolinking content - experiments in connecting virtual and physical places / ...Patrick Lauke
 
Web Accessibility - an introduction / Salford Business School briefing / Univ...
Web Accessibility - an introduction / Salford Business School briefing / Univ...Web Accessibility - an introduction / Salford Business School briefing / Univ...
Web Accessibility - an introduction / Salford Business School briefing / Univ...Patrick Lauke
 
Doing it in style - creating beautiful sites, the web standards way / WebDD /...
Doing it in style - creating beautiful sites, the web standards way / WebDD /...Doing it in style - creating beautiful sites, the web standards way / WebDD /...
Doing it in style - creating beautiful sites, the web standards way / WebDD /...Patrick Lauke
 
Web standards pragmatism - from validation to the real world / Web Developers...
Web standards pragmatism - from validation to the real world / Web Developers...Web standards pragmatism - from validation to the real world / Web Developers...
Web standards pragmatism - from validation to the real world / Web Developers...Patrick Lauke
 
Ian Lloyd/Patrick H. Lauke: Accessified - practical accessibility fixes any w...
Ian Lloyd/Patrick H. Lauke: Accessified - practical accessibility fixes any w...Ian Lloyd/Patrick H. Lauke: Accessified - practical accessibility fixes any w...
Ian Lloyd/Patrick H. Lauke: Accessified - practical accessibility fixes any w...Patrick Lauke
 
The state of the web - www.salford.ac.uk / 2007
The state of the web - www.salford.ac.uk / 2007The state of the web - www.salford.ac.uk / 2007
The state of the web - www.salford.ac.uk / 2007Patrick Lauke
 
Keyboard accessibility - just because I don't use a mouse doesn't mean I'm se...
Keyboard accessibility - just because I don't use a mouse doesn't mean I'm se...Keyboard accessibility - just because I don't use a mouse doesn't mean I'm se...
Keyboard accessibility - just because I don't use a mouse doesn't mean I'm se...Patrick Lauke
 
WAI-ARIA An introduction to Accessible Rich Internet Applications / JavaScrip...
WAI-ARIA An introduction to Accessible Rich Internet Applications / JavaScrip...WAI-ARIA An introduction to Accessible Rich Internet Applications / JavaScrip...
WAI-ARIA An introduction to Accessible Rich Internet Applications / JavaScrip...Patrick Lauke
 
WAI-ARIA An introduction to Accessible Rich Internet Applications / CSS Minsk...
WAI-ARIA An introduction to Accessible Rich Internet Applications / CSS Minsk...WAI-ARIA An introduction to Accessible Rich Internet Applications / CSS Minsk...
WAI-ARIA An introduction to Accessible Rich Internet Applications / CSS Minsk...Patrick Lauke
 
WAI-ARIA An introduction to Accessible Rich Internet Applications / AccessU 2018
WAI-ARIA An introduction to Accessible Rich Internet Applications / AccessU 2018WAI-ARIA An introduction to Accessible Rich Internet Applications / AccessU 2018
WAI-ARIA An introduction to Accessible Rich Internet Applications / AccessU 2018Patrick Lauke
 
Getting touchy - an introduction to touch and pointer events / Frontend NE / ...
Getting touchy - an introduction to touch and pointer events / Frontend NE / ...Getting touchy - an introduction to touch and pointer events / Frontend NE / ...
Getting touchy - an introduction to touch and pointer events / Frontend NE / ...Patrick Lauke
 

More from Patrick Lauke (20)

These (still) aren't the SCs you're looking for ... (mis)adventures in WCAG 2...
These (still) aren't the SCs you're looking for ... (mis)adventures in WCAG 2...These (still) aren't the SCs you're looking for ... (mis)adventures in WCAG 2...
These (still) aren't the SCs you're looking for ... (mis)adventures in WCAG 2...
 
Pointer Events Working Group update / TPAC 2023 / Patrick H. Lauke
Pointer Events Working Group update / TPAC 2023 / Patrick H. LaukePointer Events Working Group update / TPAC 2023 / Patrick H. Lauke
Pointer Events Working Group update / TPAC 2023 / Patrick H. Lauke
 
These aren't the SCs you're looking for ... (mis)adventures in WCAG 2.x inter...
These aren't the SCs you're looking for ... (mis)adventures in WCAG 2.x inter...These aren't the SCs you're looking for ... (mis)adventures in WCAG 2.x inter...
These aren't the SCs you're looking for ... (mis)adventures in WCAG 2.x inter...
 
These aren't the SCs you're looking for ... (mis)adventures in WCAG 2.x inter...
These aren't the SCs you're looking for ... (mis)adventures in WCAG 2.x inter...These aren't the SCs you're looking for ... (mis)adventures in WCAG 2.x inter...
These aren't the SCs you're looking for ... (mis)adventures in WCAG 2.x inter...
 
Too much accessibility - good intentions, badly implemented / Public Sector F...
Too much accessibility - good intentions, badly implemented / Public Sector F...Too much accessibility - good intentions, badly implemented / Public Sector F...
Too much accessibility - good intentions, badly implemented / Public Sector F...
 
Styling Your Web Pages with Cascading Style Sheets / EDU course / University ...
Styling Your Web Pages with Cascading Style Sheets / EDU course / University ...Styling Your Web Pages with Cascading Style Sheets / EDU course / University ...
Styling Your Web Pages with Cascading Style Sheets / EDU course / University ...
 
Evaluating web sites for accessibility with Firefox / Manchester Digital Acce...
Evaluating web sites for accessibility with Firefox / Manchester Digital Acce...Evaluating web sites for accessibility with Firefox / Manchester Digital Acce...
Evaluating web sites for accessibility with Firefox / Manchester Digital Acce...
 
Managing and educating content editors - experiences and ideas from the trenc...
Managing and educating content editors - experiences and ideas from the trenc...Managing and educating content editors - experiences and ideas from the trenc...
Managing and educating content editors - experiences and ideas from the trenc...
 
Implementing Web Standards across the institution: trials and tribulations of...
Implementing Web Standards across the institution: trials and tribulations of...Implementing Web Standards across the institution: trials and tribulations of...
Implementing Web Standards across the institution: trials and tribulations of...
 
Geolinking content - experiments in connecting virtual and physical places / ...
Geolinking content - experiments in connecting virtual and physical places / ...Geolinking content - experiments in connecting virtual and physical places / ...
Geolinking content - experiments in connecting virtual and physical places / ...
 
Web Accessibility - an introduction / Salford Business School briefing / Univ...
Web Accessibility - an introduction / Salford Business School briefing / Univ...Web Accessibility - an introduction / Salford Business School briefing / Univ...
Web Accessibility - an introduction / Salford Business School briefing / Univ...
 
Doing it in style - creating beautiful sites, the web standards way / WebDD /...
Doing it in style - creating beautiful sites, the web standards way / WebDD /...Doing it in style - creating beautiful sites, the web standards way / WebDD /...
Doing it in style - creating beautiful sites, the web standards way / WebDD /...
 
Web standards pragmatism - from validation to the real world / Web Developers...
Web standards pragmatism - from validation to the real world / Web Developers...Web standards pragmatism - from validation to the real world / Web Developers...
Web standards pragmatism - from validation to the real world / Web Developers...
 
Ian Lloyd/Patrick H. Lauke: Accessified - practical accessibility fixes any w...
Ian Lloyd/Patrick H. Lauke: Accessified - practical accessibility fixes any w...Ian Lloyd/Patrick H. Lauke: Accessified - practical accessibility fixes any w...
Ian Lloyd/Patrick H. Lauke: Accessified - practical accessibility fixes any w...
 
The state of the web - www.salford.ac.uk / 2007
The state of the web - www.salford.ac.uk / 2007The state of the web - www.salford.ac.uk / 2007
The state of the web - www.salford.ac.uk / 2007
 
Keyboard accessibility - just because I don't use a mouse doesn't mean I'm se...
Keyboard accessibility - just because I don't use a mouse doesn't mean I'm se...Keyboard accessibility - just because I don't use a mouse doesn't mean I'm se...
Keyboard accessibility - just because I don't use a mouse doesn't mean I'm se...
 
WAI-ARIA An introduction to Accessible Rich Internet Applications / JavaScrip...
WAI-ARIA An introduction to Accessible Rich Internet Applications / JavaScrip...WAI-ARIA An introduction to Accessible Rich Internet Applications / JavaScrip...
WAI-ARIA An introduction to Accessible Rich Internet Applications / JavaScrip...
 
WAI-ARIA An introduction to Accessible Rich Internet Applications / CSS Minsk...
WAI-ARIA An introduction to Accessible Rich Internet Applications / CSS Minsk...WAI-ARIA An introduction to Accessible Rich Internet Applications / CSS Minsk...
WAI-ARIA An introduction to Accessible Rich Internet Applications / CSS Minsk...
 
WAI-ARIA An introduction to Accessible Rich Internet Applications / AccessU 2018
WAI-ARIA An introduction to Accessible Rich Internet Applications / AccessU 2018WAI-ARIA An introduction to Accessible Rich Internet Applications / AccessU 2018
WAI-ARIA An introduction to Accessible Rich Internet Applications / AccessU 2018
 
Getting touchy - an introduction to touch and pointer events / Frontend NE / ...
Getting touchy - an introduction to touch and pointer events / Frontend NE / ...Getting touchy - an introduction to touch and pointer events / Frontend NE / ...
Getting touchy - an introduction to touch and pointer events / Frontend NE / ...
 

Recently uploaded

Tech-Forward - Achieving Business Readiness For Copilot in Microsoft 365
Tech-Forward - Achieving Business Readiness For Copilot in Microsoft 365Tech-Forward - Achieving Business Readiness For Copilot in Microsoft 365
Tech-Forward - Achieving Business Readiness For Copilot in Microsoft 3652toLead Limited
 
Pigging Solutions Piggable Sweeping Elbows
Pigging Solutions Piggable Sweeping ElbowsPigging Solutions Piggable Sweeping Elbows
Pigging Solutions Piggable Sweeping ElbowsPigging Solutions
 
WordPress Websites for Engineers: Elevate Your Brand
WordPress Websites for Engineers: Elevate Your BrandWordPress Websites for Engineers: Elevate Your Brand
WordPress Websites for Engineers: Elevate Your Brandgvaughan
 
Nell’iperspazio con Rocket: il Framework Web di Rust!
Nell’iperspazio con Rocket: il Framework Web di Rust!Nell’iperspazio con Rocket: il Framework Web di Rust!
Nell’iperspazio con Rocket: il Framework Web di Rust!Commit University
 
Pigging Solutions in Pet Food Manufacturing
Pigging Solutions in Pet Food ManufacturingPigging Solutions in Pet Food Manufacturing
Pigging Solutions in Pet Food ManufacturingPigging Solutions
 
Vertex AI Gemini Prompt Engineering Tips
Vertex AI Gemini Prompt Engineering TipsVertex AI Gemini Prompt Engineering Tips
Vertex AI Gemini Prompt Engineering TipsMiki Katsuragi
 
Benefits Of Flutter Compared To Other Frameworks
Benefits Of Flutter Compared To Other FrameworksBenefits Of Flutter Compared To Other Frameworks
Benefits Of Flutter Compared To Other FrameworksSoftradix Technologies
 
Bluetooth Controlled Car with Arduino.pdf
Bluetooth Controlled Car with Arduino.pdfBluetooth Controlled Car with Arduino.pdf
Bluetooth Controlled Car with Arduino.pdfngoud9212
 
Human Factors of XR: Using Human Factors to Design XR Systems
Human Factors of XR: Using Human Factors to Design XR SystemsHuman Factors of XR: Using Human Factors to Design XR Systems
Human Factors of XR: Using Human Factors to Design XR SystemsMark Billinghurst
 
SIP trunking in Janus @ Kamailio World 2024
SIP trunking in Janus @ Kamailio World 2024SIP trunking in Janus @ Kamailio World 2024
SIP trunking in Janus @ Kamailio World 2024Lorenzo Miniero
 
"ML in Production",Oleksandr Bagan
"ML in Production",Oleksandr Bagan"ML in Production",Oleksandr Bagan
"ML in Production",Oleksandr BaganFwdays
 
Unleash Your Potential - Namagunga Girls Coding Club
Unleash Your Potential - Namagunga Girls Coding ClubUnleash Your Potential - Namagunga Girls Coding Club
Unleash Your Potential - Namagunga Girls Coding ClubKalema Edgar
 
Scanning the Internet for External Cloud Exposures via SSL Certs
Scanning the Internet for External Cloud Exposures via SSL CertsScanning the Internet for External Cloud Exposures via SSL Certs
Scanning the Internet for External Cloud Exposures via SSL CertsRizwan Syed
 
Install Stable Diffusion in windows machine
Install Stable Diffusion in windows machineInstall Stable Diffusion in windows machine
Install Stable Diffusion in windows machinePadma Pradeep
 
Transcript: New from BookNet Canada for 2024: BNC BiblioShare - Tech Forum 2024
Transcript: New from BookNet Canada for 2024: BNC BiblioShare - Tech Forum 2024Transcript: New from BookNet Canada for 2024: BNC BiblioShare - Tech Forum 2024
Transcript: New from BookNet Canada for 2024: BNC BiblioShare - Tech Forum 2024BookNet Canada
 
My Hashitalk Indonesia April 2024 Presentation
My Hashitalk Indonesia April 2024 PresentationMy Hashitalk Indonesia April 2024 Presentation
My Hashitalk Indonesia April 2024 PresentationRidwan Fadjar
 
Bun (KitWorks Team Study 노별마루 발표 2024.4.22)
Bun (KitWorks Team Study 노별마루 발표 2024.4.22)Bun (KitWorks Team Study 노별마루 발표 2024.4.22)
Bun (KitWorks Team Study 노별마루 발표 2024.4.22)Wonjun Hwang
 
My INSURER PTE LTD - Insurtech Innovation Award 2024
My INSURER PTE LTD - Insurtech Innovation Award 2024My INSURER PTE LTD - Insurtech Innovation Award 2024
My INSURER PTE LTD - Insurtech Innovation Award 2024The Digital Insurer
 
CloudStudio User manual (basic edition):
CloudStudio User manual (basic edition):CloudStudio User manual (basic edition):
CloudStudio User manual (basic edition):comworks
 

Recently uploaded (20)

Vulnerability_Management_GRC_by Sohang Sengupta.pptx
Vulnerability_Management_GRC_by Sohang Sengupta.pptxVulnerability_Management_GRC_by Sohang Sengupta.pptx
Vulnerability_Management_GRC_by Sohang Sengupta.pptx
 
Tech-Forward - Achieving Business Readiness For Copilot in Microsoft 365
Tech-Forward - Achieving Business Readiness For Copilot in Microsoft 365Tech-Forward - Achieving Business Readiness For Copilot in Microsoft 365
Tech-Forward - Achieving Business Readiness For Copilot in Microsoft 365
 
Pigging Solutions Piggable Sweeping Elbows
Pigging Solutions Piggable Sweeping ElbowsPigging Solutions Piggable Sweeping Elbows
Pigging Solutions Piggable Sweeping Elbows
 
WordPress Websites for Engineers: Elevate Your Brand
WordPress Websites for Engineers: Elevate Your BrandWordPress Websites for Engineers: Elevate Your Brand
WordPress Websites for Engineers: Elevate Your Brand
 
Nell’iperspazio con Rocket: il Framework Web di Rust!
Nell’iperspazio con Rocket: il Framework Web di Rust!Nell’iperspazio con Rocket: il Framework Web di Rust!
Nell’iperspazio con Rocket: il Framework Web di Rust!
 
Pigging Solutions in Pet Food Manufacturing
Pigging Solutions in Pet Food ManufacturingPigging Solutions in Pet Food Manufacturing
Pigging Solutions in Pet Food Manufacturing
 
Vertex AI Gemini Prompt Engineering Tips
Vertex AI Gemini Prompt Engineering TipsVertex AI Gemini Prompt Engineering Tips
Vertex AI Gemini Prompt Engineering Tips
 
Benefits Of Flutter Compared To Other Frameworks
Benefits Of Flutter Compared To Other FrameworksBenefits Of Flutter Compared To Other Frameworks
Benefits Of Flutter Compared To Other Frameworks
 
Bluetooth Controlled Car with Arduino.pdf
Bluetooth Controlled Car with Arduino.pdfBluetooth Controlled Car with Arduino.pdf
Bluetooth Controlled Car with Arduino.pdf
 
Human Factors of XR: Using Human Factors to Design XR Systems
Human Factors of XR: Using Human Factors to Design XR SystemsHuman Factors of XR: Using Human Factors to Design XR Systems
Human Factors of XR: Using Human Factors to Design XR Systems
 
SIP trunking in Janus @ Kamailio World 2024
SIP trunking in Janus @ Kamailio World 2024SIP trunking in Janus @ Kamailio World 2024
SIP trunking in Janus @ Kamailio World 2024
 
"ML in Production",Oleksandr Bagan
"ML in Production",Oleksandr Bagan"ML in Production",Oleksandr Bagan
"ML in Production",Oleksandr Bagan
 
Unleash Your Potential - Namagunga Girls Coding Club
Unleash Your Potential - Namagunga Girls Coding ClubUnleash Your Potential - Namagunga Girls Coding Club
Unleash Your Potential - Namagunga Girls Coding Club
 
Scanning the Internet for External Cloud Exposures via SSL Certs
Scanning the Internet for External Cloud Exposures via SSL CertsScanning the Internet for External Cloud Exposures via SSL Certs
Scanning the Internet for External Cloud Exposures via SSL Certs
 
Install Stable Diffusion in windows machine
Install Stable Diffusion in windows machineInstall Stable Diffusion in windows machine
Install Stable Diffusion in windows machine
 
Transcript: New from BookNet Canada for 2024: BNC BiblioShare - Tech Forum 2024
Transcript: New from BookNet Canada for 2024: BNC BiblioShare - Tech Forum 2024Transcript: New from BookNet Canada for 2024: BNC BiblioShare - Tech Forum 2024
Transcript: New from BookNet Canada for 2024: BNC BiblioShare - Tech Forum 2024
 
My Hashitalk Indonesia April 2024 Presentation
My Hashitalk Indonesia April 2024 PresentationMy Hashitalk Indonesia April 2024 Presentation
My Hashitalk Indonesia April 2024 Presentation
 
Bun (KitWorks Team Study 노별마루 발표 2024.4.22)
Bun (KitWorks Team Study 노별마루 발표 2024.4.22)Bun (KitWorks Team Study 노별마루 발표 2024.4.22)
Bun (KitWorks Team Study 노별마루 발표 2024.4.22)
 
My INSURER PTE LTD - Insurtech Innovation Award 2024
My INSURER PTE LTD - Insurtech Innovation Award 2024My INSURER PTE LTD - Insurtech Innovation Award 2024
My INSURER PTE LTD - Insurtech Innovation Award 2024
 
CloudStudio User manual (basic edition):
CloudStudio User manual (basic edition):CloudStudio User manual (basic edition):
CloudStudio User manual (basic edition):
 

All you need to know about the evolution of WCAG guidelines

  • 1. All change for WCAG 2.0 Patrick H. Lauke / Manchester Digital Development Agency / 24 March 2009 WHAT YOU NEED TO KNOW ABOUT THE NEW ACCESSIBILITY GUIDELINES
  • 2. About me... ● Web Editor for University of Salford ● Web Standards Project (WaSP) ● Author and occasional .net magazine contributor ● NOT an expert?
  • 3. Outline ● Background on WCAG 1.0 ● The painful birth of WCAG 2.0 ● Overview of the new guidelines ● Next steps for WCAG 1.0 veterans
  • 4.
  • 5. Web Content Accessibility Guidelines 1.0 ● www.w3.org/TR/WCAG10 ● W3C recommendation 5 May 1999 ● 14 guidelines ● 75 checkpoints
  • 6. WCAG 1.0 – problems ● HTML-centric checkpoints, despite separate techniques document http://www.w3.org/TR/WAI-WEBCONTENT-TECHS/ ● “until user agents” clauses ● Forbids JavaScript and any non-W3C technologies ● Vague checkpoints
  • 7. WCAG 2.0 – early attempts ● Work began soon after release of WCAG 1.0 ● Many iterations, largely under radar of web devs ● Original “Last Call” April 2006
  • 8.
  • 9. To Hell with WCAG 2.0 ● Joe Clark's vitriolic style ● A List Apart, 23 May 2006 http://www.alistapart.com/articles/tohellwithwcag2 ● Main points of concern: ● Overall size of combined guidelines ● Inscrutable language ● Baseline concept ● Omission of markup validation / standards
  • 10. To Hell with WCAG 2.0 ● Generated huge interest from web devs ● Joe Clark started WCAG Samurai project to create errata for WCAG 1.0 ● W3C demoted WCAG 2.0 from Last Call back to Public Working Draft
  • 11.
  • 12. WCAG 2.0 back on track ● Joe Clark's leaving speech at @media2007 – confident that WCAG 2.0 heading in right direction ● Historical aside: my take on amended WCAG 2.0 http://www.webstandards.org/2007/06/11/review-wcag2-may2007-working-draft/ ● Nonetheless released WCAG Samurai Errata http://wcagsamurai.org/
  • 13.
  • 14. Web Content Accessibility Guidelines 2.0 ● www.w3.org/TR/WCAG20 ● W3C recommendation 11 December 2008
  • 15. WCAG 2.0 suite of documents
  • 16. WCAG 2.0 suite of documents ● Web Content Accessibility Guidelines 2.0 [normative] ● How to Meet WCAG 2.0 [informative] ● Understanding WCAG 2.0 [informative] ● Techniques for WCAG 2.0 [informative] ● http://www.w3.org/WAI/intro/wcag20
  • 17. Web Content Accessibility Guidelines 2.0 ● 4 general principles ● 12 guidelines ● 61 success criteria
  • 18. WCAG 2.0 principles A website should be... ● Perceivable ● Operable ● Usable ● Robust
  • 19. WCAG 2.0 improvements ● Principles, guidelines and success criteria are technology-agnostic
  • 20. WCAG 1.0 examples ● “Guideline 5. Create tables that transform gracefully” ● “5.3 Do not use tables for layout unless the table makes sense when linearized.” ● “Note. Once user agents support style sheet positioning, tables should not be used for layout.” ● So what happens with CSS positioning that breaks linear flow?
  • 21. WCAG 2.0 examples ● “Guideline 1.3 Adaptable: Create content that can be presented in different ways (for example simpler layout) without losing information or structure.” ● “1.3.2 Meaningful Sequence: When the sequence in which content is presented affects its meaning, a correct reading sequence can be programmatically determined.”
  • 22. WCAG 2.0 improvements ● WCAG 1.0 “Guideline 11. Use W3C technologies and guidelines” ● “Where it is not possible to use a W3C technology, or doing so results in material that does not transform gracefully, provide an alternative version of the content that is accessible.” ● WCAG 2.0 can be applied to W3C and non-W3C technologies (as long as they're accessibility- supported)
  • 23. WCAG 2.0 improvements ● Accessibility-supported technologies ● supported by users' assistive technology ● technology must have accessibility-supported user agents that are available to users
  • 24. WCAG 2.0 accessibility-supported ● You can use PDF, Flash, even JavaScript ● JavaScript and WAI-ARIA http://www.w3.org/TR/wai-aria/ ● Even if a technology isn't fully accessibility- supported, as long as you use the supported bits ● Worst case provide fallback that is supported
  • 25. WCAG 2.0 improvements ● Removes all “until user agents...” clauses
  • 26. WCAG 1.0 example ● “Guideline 10. Use interim solutions.” ● “10.4 Until user agents handle empty controls correctly, include default, place-holding characters in edit boxes and text areas.”
  • 27. WCAG 2.0 improvements ● Each success criterion is more easily testable ● Success criteria give clearer guidance than WCAG 1.0 checkpoints
  • 28. WCAG 1.0 example ● “Guideline 2. Don't rely on color alone.” ● “2.2 Ensure that foreground and background color combinations provide sufficient contrast when viewed by someone having color deficits or when viewed on a black and white screen.” ● What exactly is “sufficient”?
  • 29. WCAG 2.0 example ● “Guideline 1.4 Distinguishable: Make it easier for users to see and hear content including separating foreground from background.” ● AA “1.4.3 Contrast (Minimum): The visual presentation of text and images of text has a contrast ratio of at least 4.5:1” ● “Large Text: Large-scale text and images of large-scale text have a contrast ratio of at least 3:1” ● AAA “1.4.6 Contrast (Enhanced): The visual presentation of text and images of text has a contrast ratio of at least 7:1” ● “Large Text: Large-scale text and images of large-scale text have a contrast ratio of at least 4.5:1”
  • 30. WCAG 2.0 improvements ● As a result of clearer, testable SCs some things are allowed that previously weren't
  • 31. WCAG 1.0 example ● “Guideline 7. Ensure user control of time-sensitive content changes.” ● “7.1 Until user agents allow users to control flickering, avoid causing the screen to flicker.” ● “7.2 Until user agents allow users to control blinking, avoid causing content to blink[...]”
  • 32. WCAG 2.0 example ● “Guideline 2.3 Seizures: Do not design content in a way that is known to cause seizures” ● “2.3.1 Three Flashes or Below Threshold: Web pages do not contain anything that flashes more than three times in any one second period, or the flash is below the general flash and red flash thresholds.”
  • 33. WCAG 2.0 improvements ● Success criteria focus on the outcomes, not how they're achieved
  • 34. WCAG 1.0 example ● “Guideline 9. Design for device-independence.” ● “9.5 Provide keyboard shortcuts to important links (including those in client-side image maps), form controls, and groups of form controls.” ● “For example, in HTML, specify shortcuts via the "accesskey" attribute.”
  • 35. WCAG 2.0 example ● “Guideline 2.1 Keyboard Accessible: Make all functionality available from a keyboard.“ ● “2.1.1 Keyboard: All functionality of the content is operable through a keyboard interface [...]”
  • 36. WCAG 2.0 improvements ● Talks about mechanisms ● “process or technique for achieving a result”
  • 37. WCAG 2.0 mechanism example ● “Guideline 2.4 Navigable: Provide ways to help users navigate, find content, and determine where they are.” ● “2.4.1 Bypass Blocks: A mechanism is available to bypass blocks of content that are repeated on multiple Web pages.” ● Does this mandate skip links?
  • 38. WCAG 2.0 mechanism example ● Looking at “How to meet WCAG 2.0”, skip links only one of a few techniques mentioned ● Sufficient Techniques for 2.4.1 – Bypass Blocks: ● Creating links to skip blocks of repeated material ● Grouping blocks of repeated material in a way that can be skipped ● Advisory Techniques for 2.4.1 – Bypass Blocks ● [...] ● C6: Positioning content based on structural markup
  • 39. WCAG 2.0 techniques ● Techniques cover general technologies: HTML, CSS, JavaScript, WAI-ARIA ● Sufficient and advisory techniques ● Techniques are informative, not normative ● List of techniques is not exhaustive – invent your own as long as success criteria are fulfilled
  • 40. WCAG 2.0 conformance ● WCAG 1.0 had duality of priority 1,2,3 that mapped to levels A, AA, AAA ● WCAG 2.0 just uses A, AA, AAA model for both SCs and conformance levels
  • 41. WCAG 2.0 conformance ● Applies to full pages ● Complete processes ● Only accessibility-supported techs are relied on ● Non-interference (when adding non-accessibility- supported technologies) ● You can conform without a conformance claim
  • 42. WCAG 2.0 partial conformance ● 3rd party content (UGC, feeds, etc) ● Use of languages/technologies without accessibility- support (future-proofing?)
  • 43. Transition from WCAG 1.0 to WCAG 2.0 ● Needs of users with disabilities hasn't changed ● Technology that they use has ● If your site accessible under WCAG 1.0, shouldn't be too far off WCAG 2.0
  • 44. Transition from WCAG 1.0 to WCAG 2.0 ● How WCAG 1.0 differs from WCAG 2.0 http://www.w3.org/WAI/WCAG20/from10/diff.php ● Comparison WCAG 1.0 checkpoints to WCAG 2.0 http://www.w3.org/WAI/WCAG20/from10/comparison/ ● How to update your site from WCAG 1.0 to 2.0 http://www.w3.org/WAI/WCAG20/from10/websites.html
  • 45. Transition from WCAG 1.0 to WCAG 2.0 ● Evaluate your site based on WCAG 2.0 SCs ● Many 1.0 checkpoints map to 2.0 SCs ● Are there 1.0 requirements that have been lifted? ● Test more specific 2.0 SCs
  • 46. Getting started with WCAG 2.0 ● WebAIM's unofficial checklist http://webaim.org/standards/wcag/checklist
  • 47.
  • 48. Getting started with WCAG 2.0 ● For a “one-stop shop” overview, customisable WCAG 2.0 quick reference http://www.w3.org/WAI/WCAG20/quickref/
  • 49.
  • 50. Recap on WCAG 2.0 ● Technology-agnostic – applicable to more present and future technologies ● Clearly testable Success Criteria ● Focussed on outcome for users, not techniques ● Removes outdated requirements from 1.0 ● Overall allows authors more freedom