delivering accessible content with wcag 2.0

Delivering Accessible Content with WCAG 2.0

STC 2012 SummitMay 22, 2012

Mike Paciello, TPG

Copyright The Paciello Group 2012©

Accessibility: IntroductionWeb Accessibility

Toolbar


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…


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


2nd: Litigation


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


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?


Additional Industry Needs…


◦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


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


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.


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


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


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


Perceivable Operable Understandable

◦ Make text readable and understandable.◦ Make content appear and operate in predictable

ways.◦ Help users avoid and correct mistakes.

Robust


Perceivable Operable Understandable Robust

◦ Maximize compatibility with current and future technologies.


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


Test Process, Tools & Resources

Web Accessibility Toolbar


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


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


http://www.deque.com/

http://www.hisoftware.com/

http://www.ssbbartgroup.com/

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)


http://www.paciellogroup.com/blog/?p=635




https://addons.mozilla.org/en-US/firefox/addon/6622/

http://accessibility.linuxfoundation.org/a11yweb/util/accprobe/

http://developer.apple.com/library/mac/

http://developer.apple.com/library/mac/

Web Accessibility Toolbar In-browser Testing Tool


Color Contrast Analyzer Included in WAT Test for color contrast issues in web and

desktop applications


aViewer (1 of 3)A tool for inspecting accessibility information

View accessibility information of web content


aViewer (2 of 3)Accessibility properties

Accessibility tree

HTML code

aViewer 2012 alpha


http://www.paciellogroup.com/blog/2012/05/aviewer-2012-alpha/

http://www.paciellogroup.com/blog/2012/05/aviewer-2012-alpha/

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


Emerging Challenges & Technologies

Web Accessibility Toolbar


◦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


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


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


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


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


HTML5 Browser Support

None fully support HTML5 Updates and References

◦ Browser Support: http://html5accessibility.com/◦ Assistive Technology Support: http://

html5accessibility.com/index-aria.html


http://html5accessibility.com/

http://html5accessibility.com/index-aria.html

http://html5accessibility.com/index-aria.html

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©