Delivering Accessible Content with WCAG 2.0
STC 2012 SummitMay 22, 2012
Mike Paciello, TPG
Copyright The Paciello Group 2012©
Accessibility: IntroductionWeb Accessibility
Toolbar
Copyright The Paciello Group 2012©
3 Waves of Accessibility Standards
1st – Rehab / Architectural Barriers (Rehab Act/ADA) 2nd – Computer/Education/Employment (AT Act/IDEA) 3rd – Ubiquitous/Harmonized (WCAG 2/508)
Great progress, but still 4 key concerns…
Copyright The Paciello Group 2012©
It can get pretty confusing out there…
1st: The Maze of Standards & Laws
W3C/WAIVPATs
Validation, Certification
TEITAC
EU’s M/376
1194.21 (Software Applications &
Operating Systems)
ISO/ANSI
Section 508
1194.22 (Web-based Intranet & Internet
Information & Applications)
1194.31 Subpart B
(Functional Performance
Criteria)1194.41 Subpart C (Information, Documentation and Support)
3rd Party Apps
Exceptions
WCAG 2.0
Copyright The Paciello Group 2012©
2nd: Litigation
Copyright The Paciello Group 2012©
3rd: The Accessibility Gap “Accessibility Gap”
◦ Emerging information technology growth, adoption vs. assistive technology.
Net Effects◦ AT adapts long after IT is
mainstreamed
◦ People with disabilities & older adults lack mainstream technology inclusion.
◦ Rather than closing, the Gap widens. Time
Acc
essi
bilit
y G
ap
Technology
Accessible Technology
Copyright The Paciello Group 2012©
1
Make Accessible
2Needs AssessmentAnalysis & AuditFix it – 508 & WCAG 2 CompliantUsability TestingQA Tools to maintain
3
How Do WeEngage?
Enable Users
Customized User ExperiencePersonalizationCustomizationIndustry Specific Functionality
4th: Accessibility + Usability = ROI?
--- CONCERNS ---< 2% those with visual disabilities have software to use websites or softwareHow does business justify the investment/ROI?
Copyright The Paciello Group 2012©
Additional Industry Needs…
Copyright The Paciello Group 2012©
◦508 Requirements◦ Depth & Breadth; portal like
◦ Clear path to information ◦ Harmonization w/WCAG 2.0◦ Procurement toolkit◦ “Universal” enforcement
◦Consistent, quantifiable test results◦ Weighted checkpoints; measurable
provisions◦ Compliance score
◦ Scorecard/dashboard toolsUS Access Board / TEITAC gave them…
A Celebration of Usability in Civic Life Access + Usability
TEITAC
New Recommendations for Section 508Sarah Swierenga, Whitney Quesenbery, Kate Walser, and Michael Paciello, Co-Chair, TEITAC
Who: The Telecommunications and Electronic and Information Technology Advisory Board Committee (TEITAC): 41 members from industry, government and disabilities advocacy groups
What: Recommendations for how the U.S. Access Board should update Section 508 (and Section 255) regulations.
Why: To make ICT products accessible to as wide a range of people with disabilities as possible.
When: July 2006 – April 2008
Requirements based on product characteristics rather than product types. How do we classify products that have so many features?
Functional Performance Criteria (FPC) refer to different disability categories and the necessity of providing access to the functionality of products. The FPC have been modified from the previous version to include a note on the role of assistive technology in meeting the FPC. Products must provide at least one mode that allows access to all functionality of the product: A – Without Vision
G – Without SpeechB – With Limited Vision
H – With Limited Reach, Strength or ManipulationC – With Color Vision Deficits I – Without Physical ContactD – Without Hearing
J – With Cognitive, Language, or Learning LimitationsE – With Limited Hearing
Subpart B: Functional Performance Criteria
1194.23(g)Volume Reset2.2.F1194.23(f)Volume (Gain)2.2.E1194.25(f)Volume2.2.D1194.25(e)Audio Connection2.2.C1194.23(i)Interference with Hearing Device2.2.B1194.23(h)Magnetic Coupling2.2.A1194.25(j)Installed or Free-Standing Products2.1.F1194.26(d)Standard Connection2.1.E1194.25(c), 1194.26(b)Touch Operated2.1.D1194.23(k), 1194.26(a)Mechanical Controls2.1.C1194.21(i), 1194.25(j), 1194.25(k)Flashing2.1.B1194.21(j), 1194,25(h)Reflectance Contrast for Legends and Passive Displays2.1.A1194.23(e)Speech Operation1-H Text size1-G1194.21(i), 194.25(g)Color1-F Visual Information1-E Audio information1-D1194.23(j)Pass Through1-C1194.25(d), 1194.26(c) Biometric ID1-B1194.25(a)Closed Functionality1-A Subpart C
Section 508 SourceTEITAC Recommendations
Accessible Content 2.D Accessibility Configuration2.C Video Support 2.B Relay Services Accessibility2.A Training1.2-C Manufacturer Contact1.2-B1194.41(c)Support Services1.2-A Support and E&IT related services1.2 Keyboard Shortcuts1.1-B194.41(a), 194.41(b)Accessible Documentation and Features1.1-A Product Documentation and Help1.1 Information, Documentation & Support1 Subpart D Accessible Templates7.D Prompts7.C Preserve Accessibility Information7.B Accessible Output7.A Authoring Tools7 External Alerting Devices6.G Audio clarity for VoIP6.F Video Support6.E Caller and Status Information6.D1194.23(c) IVR, Auto-Attendant and Messaging6.C1194.23(a)Voice Terminal Hardware & Software6.B1194.23(b)Real-Time Text Reliability & Interoperability6.A1194.24(d), 1194..22(b)Interactive Elements5.C1194.24(d) Video Description5.B1194.24(c)Captions and Transcripts5.A Access to Caption and Video Controls4.C1194.24(b)Supplemental Audio Playback (Process?)4.B1194.24(a)Caption Process4.A Headings and Labels3.BB Error Identification3.AA On Input3.Z On Focus3.Y Labels or Instructions3.X Multiple Ways3.W Assistive Technology3.VV Accessibility Services3.V1194.21(d), (c), (f) & (m)AT Interoperability3.U1194.21(c)Focus Indicator3.T Visual Indication of Keyboard Shortcuts3.SS1194.21(a), (e), (f), (k), (l) & (m)Keyboard Operation3.S1194.22(p), 1194.23(d), 1194.25(b)Timing3.R1194.21(b)Disruption of Access Features3.Q
1194.21(l), 1194.22(l), 1194.22(n)User Interface Components3.P1194.22(g), (h), (i), & (n), & (o), 1194.21(l)Information and Relationships3.O Link Purpose3.N1194.22(d) Reading Sequence3.M1194.25(e)Audio Turnoff3.L1194.21(e)Consistent Identification3.K
1194.21(k), 1194.22(j), 1194.25(i)Flashing (Content and User Interfaces)3.J1194.21(h)Pausing3.I Language of Parts3.H Human Language3.G1194.22(a)Non-text Objects3.F1194.21(j)Color Adjustment3.E1194.21(g)User Preferences3.D Size, shape, location3.C1194.21(j)Contrast3.B1194.21(i), 1194.22(c), 1194.25(h) Color3.A
What’s New?
We considered:
Testability – Can we create standards that are precise and unambiguous enough to easily determine if products meet the requirements, but open enough so that the provisions do not stifle innovation?
Assistive Technology – How can we promote interoperability?
Accessibility for People with Cognitive Disabilities – How do we meet their needs?
Usability of the Standard and Guidelines – How can we make technical requirements clear?
What Else?
1. General Technical Requirements
Subpart C: Technical Provisions
6. Additional Requirements for Real-Time Voice Conversation Functionality
5. Requirements for Audio and/or Video Content
4. Additional Requirements for Audio-Visual Players or Displays
3. Requirements for User Interface and Electronic Content
2. Requirements for Hardware Aspects of Products
7. Additional Requirements for Authoring Tools
The Recommendations
Web Accessibility & WCAG 2.0Web Accessibility
Toolbar
Copyright The Paciello Group 2012©
What is Web accessibility?
Site accessibility is a measure of how effectively all people, including those with disabilities, are able to access and use web properties.
“The power of the web is in its universality. Access by everyone regardless of disability is an essential aspect.”
Tim Berners-LeeFounder of the World Wide Web
Director of W3C
Copyright The Paciello Group 2012©
WCAG 2.0 – Overview (1 of 2) WCAG 2 itself - the document at
www.w3.org/TR/WCAG20 - is the formal Web standard"W3C Recommendation".
It is the only document that defines what is required. (Other documents provide additional information, but are not part of the formal standard.)
WCAG 2 Guidelines and Success Criteria are technology-independent (so as not to go out of date), and specific guidance is provided in the Techniques.
Copyright The Paciello Group 2012©
WCAG 2.0 – Overview (2) Formal W3C Specification, Dec. 2008
Organized around the following 4 principles:◦ Perceivable◦ Operable◦ Understandable◦ Robust
Each principle has guidelines
Each guideline has testable, success criteria
Copyright The Paciello Group 2012©
Perceivable◦ Provide text alternatives for non-text content.◦ Provide captions and alternatives for audio and
video content.◦ Make content adaptable; and make it available to
assistive technologies.◦ Use sufficient contrast to make things easy to see
and hear. Operable Understandable Robust
Copyright The Paciello Group 2012©
Perceivable Operable
◦ Make all functionality keyboard accessible.◦ Give users enough time to read and use content.◦ Do not use content that causes seizures.◦ Help users navigate and find content.
Understandable Robust
Copyright The Paciello Group 2012©
Perceivable Operable Understandable
◦ Make text readable and understandable.◦ Make content appear and operate in predictable
ways.◦ Help users avoid and correct mistakes.
Robust
Copyright The Paciello Group 2012©
Perceivable Operable Understandable Robust
◦ Maximize compatibility with current and future technologies.
Copyright The Paciello Group 2012©
Success Criteria
Content Accessibility Guidelines 2.0http://www.w3.org/TR/WCAG/
Understanding WCAG 2.0http://www.w3.org/TR/UNDERSTANDING-WCAG20/
Techniques for WCAG 2.0http://www.w3.org/TR/WCAG20-TECHS/
WCAG 2.0 Quick Referencehttp://www.w3.org/WAI/WCAG20/quickref/
Key WCAG 2 Documents
Copyright The Paciello Group 2012©
Test Process, Tools & Resources
Web Accessibility Toolbar
Copyright The Paciello Group 2012©
Analysis & AuditFix it – 508 & WCAG 2 CompliantUsability TestingManage & Maintain
Make Software Accessible
3. Visually Impaired not reached
Accessibility analysis, audit and plan to achieve accessibility
Fix code, new process flow, training, help desk support, reassess/retest
User testing of product by people with disabilities
Certification Services, training, process controls
Copyright The Paciello Group 2012©
The Analysis / Test Process
Popular Automated Validation Tools Deque WorldSpace & FireEyes
◦ www.deque.com
HiSoftware Compliance Sheriff◦ www.hisoftware.com
SSB Bart AMP◦ www.ssbbartgroup.com
Copyright The Paciello Group 2012©
Free Test Tools TPG Tools (paciellogroup.com/resources)
◦ Web Accessibility Toolbar ◦ Color Contrast Analyser ◦ aViewer
Dom Inspector (addons.mozilla.org/en-US/firefox/addon/dom-inspector-6622/)◦ (free Firefox extension)
WAVE (wave.webaim.org)◦ (free web page validation service)
MAC OS X Accessibility Inspector (/Developer/Applications/Utilities/Accessibility Tools)
Copyright The Paciello Group 2012©
Web Accessibility Toolbar In-browser Testing Tool
Copyright The Paciello Group 2012©
Color Contrast Analyzer Included in WAT Test for color contrast issues in web and
desktop applications
Copyright The Paciello Group 2012©
aViewer (1 of 3)A tool for inspecting accessibility information
View accessibility information of web content
Copyright The Paciello Group 2012©
aViewer (2 of 3)Accessibility properties
Accessibility tree
HTML code
aViewer 2012 alpha
Copyright The Paciello Group 2012©
aViewer (3 of 3)• Accessibility tree
• Content structure exposed to assistive technology by the browser
• Accessibility properties• Information about
content exposed to assistive technology via accessibility APIs in browsers
Copyright The Paciello Group 2012©
Emerging Challenges & Technologies
Web Accessibility Toolbar
Copyright The Paciello Group 2012©
◦Flash content/player is not capable of exposing an accessible hierarchical structure that has more than two levels. (Ex. Tree structures)
◦Default reading order in Flex UI is often not logical. ◦Keyboard focus inside/outside the Flash player◦Flash content does not inherit high contrast mode / browser specified text size
Flash / Flex
Copyright The Paciello Group 2012©
WAI ARIA? Accessible Rich Internet Applications
◦ W3C Candidate Recommendation◦ Use with any markup language
ARIA is about interaction more than content Bridges the gap between what can be
specified using HTML4 and required semantic elements
Adds semantic information to HTML5 for AT Provides familiar experience to that of regular
desktop: no learning curve for AT users
Copyright The Paciello Group 2012©
What can ARIA do for RIA’s? Make custom widgets understandable to
assistive technology users Fix or correct inaccessible content without
completely recreating widgets from scratch Programmatically indicate relationships
between elements Hide irrelevant visible content from assistive
technology Notify users of dynamic updates
Copyright The Paciello Group 2012©
HTML5
Superset of HTML4 Maintains backward compatibility New semantic elements, primarily for RIA
◦ 30 new elements that can be used with traditional "static" pages
◦ New form controls eliminate need for JavaScript and form validation
◦ Defines error handling for browsers
Copyright The Paciello Group 2012©
Does HTML5 Hurt Accessibility? Short answer: It can… Long answer: It is not ready yet
◦ Limited browser support◦ AT is further behind than browsers
Don’t rely solely on HTML5 for semantics◦ Add ARIA◦ Always test across browsers, assistive technology
and different versions of each
Copyright The Paciello Group 2012©
HTML5 Browser Support
None fully support HTML5 Updates and References
◦ Browser Support: http://html5accessibility.com/◦ Assistive Technology Support: http://
html5accessibility.com/index-aria.html
Copyright The Paciello Group 2012©
Concluding Thoughts / Q&A Challenges
• Content, Navigation, UI• Accessibility of applications• RIA, HTML5 • AT/IT interoperability• Multi-platforms• Usability• Disability awareness
Solutions• Harmonized standards,
laws• WCAG2, TEITAC• End-to-End process• Emerging tools, WAI ARIA
One should be able to see that things are hopeless yet be determined to make them otherwise…”
- F. Scott FitzgeraldCopyright The Paciello Group 2012©