2. 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
8. 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”
18. 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/
27. 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
28. 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)
29. 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
30. 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
31. IF OWNERS
DON’T TAKE RESPONSIBILITY
THEY LEAVE THEIR
DECISIONS TO CHANCE
OR DEVELOPERS
32. SQUEEGEE QUESTION #2
WHAT IS IT?
WHAT IS IT REALLY?
IS IT “NEW” TO OWNER?
SHORT ANSWER IS (usually): NO.
33. WHAT IS IT REALLY?
SQUEEGEE: TYPE RESULTS
PRIMARY TYPES
Best Practices: 53% (20)
Primarily A11y: 39% (15)
User Stories: 8% (3)
34. 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
43. A211Y IN A NUTSHELL:
ASSIGN EACH
WCAG SUCCESS
CRITERION TO
APROPRIATE
TEAM ROLES
44. 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
45. 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
46. 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
48. 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
49. 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
50. 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
51. 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
52. 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
58. 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
