O slideshow foi denunciado.
Utilizamos seu perfil e dados de atividades no LinkedIn para personalizar e exibir anúncios mais relevantes. Altere suas preferências de anúncios quando desejar.
BILL TYLER
11.APRIL.2015
A11Y
3 COMMON MISTAKES OF WEBSITE ACCESSIBILITY
ABOUT ME
30+ yrs. of UI/UX Design & Development
12+ yrs. in medical devices
12+ yrs. in plans & providers
2X dot-com survi...
AGENDA
• Background: Accessibility (A11y) & WCAG 2.0
• A11y: Usual Process
• 3 A11y Mistakes: #1, #2 & #3
• What to Do: De...
A11Y
Accessibility
11 Letters
ACCESSIBILITY AFFECTS A
PERSON NEAR YOU
About 1 in 5 Americans have
one or more diagnosed
psychological or physical
disabi...
LIVE LONG ENOUGH AND
YOU
will be “disabled”
in some way
A11Y
TODAY
“COMMON KNOWLEDGE”
USUAL PROCESS
NO ONE THINKS ABOUT ACCESSIBILITY
…except the accessibility expert
OFTEN A REVIEW BY AN A11Y EXPERT OR QA
…a...
TYPICAL A11Y PROCESS
ADD
A11Y
HERE
NO!
ACCESSIBILITY IS NOT
• “MAGIC PIXIE DUST”
• A “MYSTERIOUS” PROCESS
• A LAST PASS
• A FEATURE
• “SPECIAL CODE”
• LIMITED TO...
WE FOUND
3 COMMON MISTAKES
1. OWNERSHIP: Developer
2. ISSUES: Code
3. ENTRY POINT: Coding
WHAT
TO DO?
WHAT TO DO
ANALYZE
A11Y …or
WCAG 2.0
WE
WCAG 2.0
WCAG
2.0?
WCAG 2.0
Web Content
Accessibility Guidelines
Version 2.0
WCAG 2.0
WEB CONTENT ACCESSIBILITY GUIDELINES v2.0
• International Standard from W3C (Worldwide Web Consortium)
• Covers S...
Cn u spk
WCAG?
wcag2madeeasy.com
A11Y TARGET:
WCAG 2.0
AA
Conformance
AA CONFORMANCE =
38
A & AA CRITS
23 AAA – OPTIONAL
• Not required, “Extra Credit,” Goals
THE NEED:
ANALYZE
THE 38 A & AA CRITS
MEET THE “SQUEEGEE”
SQUEEGEE
Demystifying
WCAG criteria with
3 questions
THE 3 SQUEEGEE QUESTIONS
WHOSE,
WHAT &
WHERE
SQUEEGEE QUESTION #1
WHOSE IS IT?
WHO “OWNS” EACH CRITERION
& RELATED ISSUES?
WHO OWNS THEM?
1. A11Y SPECIALIST
2. BUSINESS OWNER
3. INTERACTION (IX) DESIGNER – Wireframes
4. VISUAL (VX) DESIGNER – Co...
WHOSE IS IT?
SQUEEGEE: OWNERSHIP RESULTS
PRIMARY OWNERSHIP
IX Designer: 37% (14)
Content Author: 24% (9)
Developer: 21% (8...
WHOSE IS IT?
SQUEEGEE: OWNERSHIP DEFINED
PRIMARY OWNER
The Role with most concern/expertise on subject
- One and only one
...
WHOSE IS IT?
EXAMPLE: COLORS
PRIMARY OWNERSHIP
Vx Designer has final say on color selection
SECONDARY OWNERSHIP
IX Designe...
IF OWNERS
DON’T TAKE RESPONSIBILITY
THEY LEAVE THEIR
DECISIONS TO CHANCE
OR DEVELOPERS
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%...
WHAT IS IT REALLY?
SQUEEGEE: TYPES DEFINED
53% BEST PRACTICES
• Team members probably already know and do them
• May just ...
SQUEEGEE QUESTION #3
WHERE IS IT
ENTERING?
WHAT DESIGN DECISIONS
OR DELIVERABLES “INTRODUCE” IT?
WHERE IS IT COMING IN?
SQUEEGEE: ENTRY POINT RESULTS
PRIMARY INTRODUCTION POINTS
Wireframes: 50% (19)
User Story/Standard ...
WHERE IS IT COMING IN?
SQUEEGEE: ENTRY POINTS DEFINED
50% WIREFRAMES
• Structure of interface
24% USER STORY/STANDARD REQU...
SO… AGAIN…
WHAT’S GOING
WRONG?
THE PROCESS IS WRONG
ADD
A11Y
HERE
LIKE USABILITY…
ACCESSIBILITY SHOULD
BE BUILT-IN AT THE START
…& NOT AN AFTERTHOUGHT
A211Y
OUR SOLUTION:
A211y
Assigned
Accessibility
11 Letters
A211Y IN A NUTSHELL:
ASSIGN EACH
WCAG SUCCESS
CRITERION TO
APROPRIATE
TEAM ROLES
A211Y:
EXISTING SITE TRIAGE
Existing site that needs to be
made accessible -- OR -- Issues
wait until the end of a new sit...
A211Y:
NEW SITE (IDEAL PROCESS)
In the ideal process issues
resolved earlier by owners during
design
Owners more aware of ...
A211Y:
SPRINT PROCESS
Style Guide: Address
system-wide design issues
(visual, interaction, content,
implementation)
Epic &...
A211Y:
SQUEEGEE EXAMPLES
A211Y EXAMPLE: SC 1.3.3
SENSORY CHARACTERISTICS
EXAMPLE: “Press the green button on the right”
PRIMARY OWNER: Content Auth...
A211Y EXAMPLE: SC 2.2.1
TIMING ADJUSTABLE
EXAMPLE: “Session timeout in 2 minutes.
Do you want to continue? Yes / No”
PRIMA...
A211Y EXAMPLE: SC 2.4.5
MULTIPLE WAYS
EXAMPLE: Search, Site Map & Tree navigation
PRIMARY OWNER: IX Designer
SECONDARY OWN...
A211Y EXAMPLE: SC 4.1.2
NAME, ROLE, VALUE
EXAMPLE: “Cool (RIA) Widgets”
PRIMARY OWNER: Developer
SECONDARY OWNER(S): IX De...
A211Y EXAMPLE: SC 1.4.3
COLOR CONTRAST
EXAMPLE: “Blue on light blue”
PRIMARY OWNER: Vx Designer
SECONDARY OWNER(S): None
C...
SO…
TO
SUMMARIZE
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%
MISTAKE #3: ENTRY POINT
WHERE IS IT (ENTERING)?
50% of a11y
issues enter in
wireframes
Coding: 5%
FIX EARLY
FIX OFTEN
Current
(Don’t)
Triage
Site
New
Site
A211Y:
SQUEEGEE: OTHER INFO
FREQUENCY OF OCCURRENCE
• Every page
• Often
• Rare
• “Never”
ESCALATION TO A11Y SME
SCOPE
• C...
Q&A
BILL@BILLTYLER.NET
@BILLTYLER
THANK YOU
Próximos SlideShares
Carregando em…5
×
Próximos SlideShares
Rethinking Accessibility: Role-Based Analysis of WCAG 2.0 - CSUN 2017
Avançar
Transfira para ler offline e ver em ecrã inteiro.

2

Compartilhar

Baixar para ler offline

Moneyball AA11y Minnebar 11.aprile.2015

Baixar para ler offline

Moneyball AA11y Minnebar 11.aprile.2015

  1. 1. BILL TYLER 11.APRIL.2015 A11Y 3 COMMON MISTAKES OF WEBSITE ACCESSIBILITY
  2. 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
  3. 3. 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
  4. 4. A11Y Accessibility 11 Letters
  5. 5. ACCESSIBILITY AFFECTS A PERSON NEAR YOU About 1 in 5 Americans have one or more diagnosed psychological or physical disabilities
  6. 6. LIVE LONG ENOUGH AND YOU will be “disabled” in some way
  7. 7. A11Y TODAY “COMMON KNOWLEDGE”
  8. 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”
  9. 9. TYPICAL A11Y PROCESS ADD A11Y HERE
  10. 10. NO!
  11. 11. ACCESSIBILITY IS NOT • “MAGIC PIXIE DUST” • A “MYSTERIOUS” PROCESS • A LAST PASS • A FEATURE • “SPECIAL CODE” • LIMITED TO JUST ONE ROLE
  12. 12. WE FOUND 3 COMMON MISTAKES 1. OWNERSHIP: Developer 2. ISSUES: Code 3. ENTRY POINT: Coding
  13. 13. WHAT TO DO?
  14. 14. WHAT TO DO ANALYZE A11Y …or WCAG 2.0
  15. 15. WE WCAG 2.0
  16. 16. WCAG 2.0?
  17. 17. WCAG 2.0 Web Content Accessibility Guidelines Version 2.0
  18. 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/
  19. 19. Cn u spk WCAG? wcag2madeeasy.com
  20. 20. A11Y TARGET: WCAG 2.0 AA Conformance
  21. 21. AA CONFORMANCE = 38 A & AA CRITS 23 AAA – OPTIONAL • Not required, “Extra Credit,” Goals
  22. 22. THE NEED: ANALYZE THE 38 A & AA CRITS
  23. 23. MEET THE “SQUEEGEE”
  24. 24. SQUEEGEE Demystifying WCAG criteria with 3 questions
  25. 25. THE 3 SQUEEGEE QUESTIONS WHOSE, WHAT & WHERE
  26. 26. SQUEEGEE QUESTION #1 WHOSE IS IT? WHO “OWNS” EACH CRITERION & RELATED ISSUES?
  27. 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. 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. 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. 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. 31. IF OWNERS DON’T TAKE RESPONSIBILITY THEY LEAVE THEIR DECISIONS TO CHANCE OR DEVELOPERS
  32. 32. SQUEEGEE QUESTION #2 WHAT IS IT? WHAT IS IT REALLY? IS IT “NEW” TO OWNER? SHORT ANSWER IS (usually): NO.
  33. 33. WHAT IS IT REALLY? SQUEEGEE: TYPE RESULTS PRIMARY TYPES Best Practices: 53% (20) Primarily A11y: 39% (15) User Stories: 8% (3)
  34. 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
  35. 35. SQUEEGEE QUESTION #3 WHERE IS IT ENTERING? WHAT DESIGN DECISIONS OR DELIVERABLES “INTRODUCE” IT?
  36. 36. 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%”
  37. 37. 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
  38. 38. SO… AGAIN… WHAT’S GOING WRONG?
  39. 39. THE PROCESS IS WRONG ADD A11Y HERE
  40. 40. LIKE USABILITY… ACCESSIBILITY SHOULD BE BUILT-IN AT THE START …& NOT AN AFTERTHOUGHT
  41. 41. A211Y OUR SOLUTION:
  42. 42. A211y Assigned Accessibility 11 Letters
  43. 43. A211Y IN A NUTSHELL: ASSIGN EACH WCAG SUCCESS CRITERION TO APROPRIATE TEAM ROLES
  44. 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. 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. 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
  47. 47. A211Y: SQUEEGEE EXAMPLES
  48. 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. 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. 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. 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. 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
  53. 53. SO… TO SUMMARIZE
  54. 54. MISTAKE #1: OWNERSHIP WHOSE IS IT? Developers ONLY own 1 in 5 a11y issues (criteria) IX Designers are #1
  55. 55. MISTAKE #2: ISSUES WHAT IS IT? Over 50% of a11y issues are existing best practices A11y-specific is 40%
  56. 56. MISTAKE #3: ENTRY POINT WHERE IS IT (ENTERING)? 50% of a11y issues enter in wireframes Coding: 5%
  57. 57. FIX EARLY FIX OFTEN Current (Don’t) Triage Site New Site
  58. 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
  59. 59. Q&A BILL@BILLTYLER.NET @BILLTYLER THANK YOU
  • LindsayKarp

    Mar. 2, 2017
  • BrianNess

    Jan. 25, 2017

Vistos

Vistos totais

449

No Slideshare

0

De incorporações

0

Número de incorporações

3

Ações

Baixados

5

Compartilhados

0

Comentários

0

Curtir

2

×