Date post: | 21-Aug-2015 |
Category: |
Documents |
Upload: | bill-tyler |
View: | 16 times |
Download: | 1 times |
ABOUT ME 30+ yrs. of UI/UX Design & Development 12+ yrs. in medical devices 12+ yrs. in plans & providers 2X dot-com survivor Started web 1996 Started accessibility 2002 Material presented represents 1+ yr. of ongoing research & analysis at Optum Technology
AGENDA • Background: Accessibility (A11y) & WCAG 2.0 • A11y: Usual Process • 3 A11y Mistakes: #1, #2 & #3 • What to Do: Demystify WCAG 2.0 & A11y • A211y: Moneyball Approach • Examples: 5 Crits Reviewed • Q&A
ACCESSIBILITY AFFECTS A PERSON NEAR YOU
About 1 in 5 Americans have one or more diagnosed psychological or physical disabilities
USUAL PROCESS NO ONE THINKS ABOUT ACCESSIBILITY …except the accessibility expert
OFTEN A REVIEW BY AN A11Y EXPERT OR QA …at the end of the development
ALL ISSUES DIRECTED TO DEVELOPERS TO FIX …or with help from an a11y expert FINAL RESULT: “SORT OF ACCESSIBLE SITE”
TYPICAL A11Y PROCESS
ADD A11Y HERE QA / A11y Testing
Developers
Content Author
Visual (Vx) Designer
Interaction (IX) Designer
Business Owner
ACCESSIBILITY IS NOT
• “MAGIC PIXIE DUST” • A “MYSTERIOUS” PROCESS • A LAST PASS • A FEATURE • “SPECIAL CODE” • LIMITED TO JUST ONE ROLE
WCAG 2.0 WEB CONTENT ACCESSIBILITY GUIDELINES v2.0
• International Standard from W3C (Worldwide Web Consortium) • Covers Sect. 508 – U.S. Government Standard
• Both now (1998) and future (2015?) versions • Used and/or referenced by many other countries
STRUCTURE
• 4 Principles • 12 Guidelines • 61 Success Criteria (SC or “Crits”)
• 3 Levels from A (lowest) to AAA (highest) • Hundreds of Techniques
More on WCAG 2.0: http://www.w3.org/TR/WCAG/
WHO OWNS THEM? 1. A11Y SPECIALIST 2. BUSINESS OWNER 3. INTERACTION (IX) DESIGNER – Wireframes
4. VISUAL (VX) DESIGNER – Comps, Style Guide
5. CONTENT AUTHOR – Text, Audio & Video
6. DEVELOPER – HTML, CSS, JavaScript
7. QUALITY ASSURANCE (QA) TESTER Note: YMMV (Your Mileage May Vary) • There may not be 1:1 relationship between roles & people. • One person may have multiple roles; one role may be split amongst multiple people
WHOSE IS IT? SQUEEGEE: OWNERSHIP RESULTS
PRIMARY OWNERSHIP IX Designer: 37% (14) Content Author: 24% (9) Developer: 21% (8) Vx Designer: 16% (6) Business Owner: 3% (1)
WHOSE IS IT? SQUEEGEE: OWNERSHIP DEFINED
PRIMARY OWNER The Role with most concern/expertise on subject - One and only one
SECONDARY OWNER Role(s) with major influence on criterion
CONTRIBUTOR (IMPACT) Roles that affect indirectly or are not deeply involved
WHOSE IS IT? EXAMPLE: COLORS
PRIMARY OWNERSHIP Vx Designer has final say on color selection
SECONDARY OWNERSHIP IX Designer’s wireframes use colors
CONTRIBUTOR Business Owner brand guidelines provide palette
SQUEEGEE QUESTION #2
WHAT IS IT? WHAT IS IT REALLY?
IS IT “NEW” TO OWNER?
SHORT ANSWER IS (usually): NO.
WHAT IS IT REALLY? SQUEEGEE: TYPE RESULTS PRIMARY TYPES Best Practices: 53% (20) Primarily A11y: 39% (15) User Stories: 8% (3)
WHAT IS IT REALLY? SQUEEGEE: TYPES DEFINED 53% BEST PRACTICES
• Team members probably already know and do them • May just need to revise or apply more of them
39% PRIMARILY A11Y • Team members may not know these • A11y Experts train them to help fill in the gaps
8% USER STORIES/STANDARD REQUIREMENTS
• Team members already DO these • Nothing changes (at all)
• Except, maybe, some details
WHERE IS IT COMING IN? SQUEEGEE: ENTRY POINT RESULTS
PRIMARY INTRODUCTION POINTS Wireframes: 50% (19) User Story/Standard Req.: 24% (9) Style Guide: 18% (7) Code: 5% (2) Content: 2% (1) Design Comps: “0%”
WHERE IS IT COMING IN? SQUEEGEE: ENTRY POINTS DEFINED 50% WIREFRAMES
• Structure of interface 24% USER STORY/STANDARD REQUIREMENTS
• Definition of functionality 18% STYLE GUIDES
• General site presentation 5% CODE
• HTML, CSS, JavaScript 2% CONTENT
• Text (small & large), terminology, video, audio 0% DESIGN COMPS
• Feature presentation design
THE PROCESS IS WRONG
ADD A11Y HERE QA / A11y Testing
Developers
Content Author
Visual (Vx) Designer
Interaction (IX) Designer
Business Owner
A211Y: EXISTING SITE TRIAGE
Existing site that needs to be made accessible -- OR -- Issues wait until the end of a new site Whatever the case QA or A11y testing happens after development is complete Issues assigned to primary owner
• Where they belong • To those who created the
issue • To those who know & care
more about the decision
QA / A11y Testing
Developers
Content Author
Visual (Vx) Designer
Interaction (IX) Designer
Business Owner
A211Y: NEW SITE (IDEAL PROCESS)
In the ideal process issues resolved earlier by owners during design Owners more aware of issues & standards More “pairs of eyes” aware of potential issues kicking deliverable back to owners Fewer issues make it to testing
QA / A11y Testing
Developers
Content Author
Visual (Vx) Designer
Interaction (IX) Designer
Business Owner
A211Y: SPRINT PROCESS
Style Guide: Address system-wide design issues (visual, interaction, content,
implementation)
Epic & User Stories (& backlog): Create & Groom
to adequately address a11y needs & requirements
Wireframes & User Stories
(Requirements): “Design in” accessible
interactions Design Comps: Review (against style guide) to prevent inaccessible
presentation Review text & non-text
content appropriateness, technical barriers and level
of distraction
Review code and interfaces for technical
implementation issues & possible accessibility
barriers
A211Y EXAMPLE: SC 1.3.3 SENSORY CHARACTERISTICS EXAMPLE: “Press the green button on the right” PRIMARY OWNER: Content Author SECONDARY OWNER(S): None CONTRIBUTOR(S): None TYPE: A11y, “Best Practice” ENTRY POINT: Content NOTES: • Rare instance of single owner, no secondary
owner or contributor • Example of a “Never” event
A211Y EXAMPLE: SC 2.2.1 TIMING ADJUSTABLE EXAMPLE: “Session timeout in 2 minutes. Do you want to continue? Yes / No” PRIMARY OWNER: Business Owner SECONDARY OWNER(S): IX Designer CONTRIBUTOR(S): None TYPE: Standard Requirements ENTRY POINT: User Story / Requirements NOTES: • Business Owner’s only primary ownership criterion • Rare Standard Requirement case
A211Y EXAMPLE: SC 2.4.5 MULTIPLE WAYS EXAMPLE: Search, Site Map & Tree navigation
PRIMARY OWNER: IX Designer SECONDARY OWNER(S): None CONTRIBUTOR(S): None TYPE: Best Practice, Standard Feature ENTRY POINT: Wireframes (primary), Long Content
NOTES:
• One of several IX Designer-only primary criteria
A211Y EXAMPLE: SC 4.1.2 NAME, ROLE, VALUE EXAMPLE: “Cool (RIA) Widgets” PRIMARY OWNER: Developer SECONDARY OWNER(S): IX Designer CONTRIBUTOR(S): None TYPE: Best Practices, A11y ENTRY POINT(S): Code (primary), Wireframes NOTES: • Developer is primary since implementation is critical
and IX Designer may not provide all details • IX Designer should identify key field properties
A211Y EXAMPLE: SC 1.4.3 COLOR CONTRAST EXAMPLE: “Blue on light blue”
PRIMARY OWNER: Vx Designer SECONDARY OWNER(S): None CONTRIBUTOR(S): Business Owner (Branding) TYPE: A11y (possibly best practice) ENTRY POINT(S): Style Guide (primary), Comps
NOTES:
• One of several Vx Designer primary ownership crits • Vx Designer has no secondary ownership
MISTAKE #1: OWNERSHIP WHOSE IS IT?
Developers ONLY own 1 in 5 a11y issues (criteria) IX Designers are #1
MISTAKE #2: ISSUES WHAT IS IT?
Over 50% of a11y issues are existing best practices A11y-specific is 40%
FIX EARLY FIX OFTEN
Current (Don’t)
QA / A11y Testing
Developers
Content Author
Visual (Vx) Designer
Interaction (IX) Designer
Business Owner
QA / A11y Testing
Developers
Content Author
Visual (Vx) Designer
Interaction (IX) Designer
Business Owner
QA / A11y Testing
Developers
Content Author
Visual (Vx) Designer
Interaction (IX) Designer
Business Owner
Triage Site
New Site
A211Y: SQUEEGEE: OTHER INFO
FREQUENCY OF OCCURRENCE • Every page • Often • Rare • “Never”
ESCALATION TO A11Y SME SCOPE
• Core / Common (site-wide) • Page / Feature • Content (CMS)
DESIGN ELEMENTS AFFECTED • Visual Design • Semantics • Forms • Keyboard / Control • Standards • Design Patterns • Content • Time-Based Media (video, audio)
HOW IMPLEMENTED
• Content • (Code) Libraries • Page Templates • HTML • CSS