Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Accessible UX
Going beyond WCAG
Jon Gibbins,
@dotjay
#ID24 #a11y #UX
19 May 2016
Accessible UX
Accessible UX: Going beyond WCAG
Problems
1. Accessibility cannot be done by one person in your team
▸ Don’t just be the a...
Accessible UX: Going beyond WCAG
Problems
2. QA and testing phase often too late for accessibility
▸Think about accessibil...
Accessible UX: Going beyond WCAG
Problems
3. Accessibility not built into development processes
▸ BS 8878
▸ Not a set of d...
Accessible UX: Going beyond WCAG
I don’t have all the answers
▸Accessibility is contextual
▸Accessibility comes with exper...
Accessible UX: Going beyond WCAG
Accessible UX: Going beyond WCAG
Incorporate accessibility in UX design
process
▸Research
▸Define
▸Wireframe
▸Test with pe...
Accessible UX: Going beyond WCAG
Research
▸Think about accessibility early
▸Accessibility more likely to
▸get baked into p...
Accessible UX: Going beyond WCAG
Research
▸Putting people first goes a long way towards accessibility
▸Include people with...
Accessible UX: Going beyond WCAG
Define
▸Information architecture
▸Plan understandable structure
▸Plan heading structure
Accessible UX: Going beyond WCAG
Define
▸Labelling
▸Use concise, clear, consistent and descriptive labels
▸Form controls
▸...
Accessible UX: Going beyond WCAG
Design
▸Design with accessibility in mind
▸Multimodal interactions – choice
▸Familiarity
...
Accessible UX: Going beyond WCAG
Design
▸Contrast
▸4.5:1 at least (higher for mobile – see later)
▸Colour combinations
▸Av...
Accessible UX: Going beyond WCAG
http://webaim.org/resources/designers/
Accessible UX: Going beyond WCAG
Wireframe
▸Wireframe with accessibility in mind
▸Fix accessibility before it hits the scr...
Accessible UX: Going beyond WCAG
Accessible UX: Going beyond WCAG
“Menu”
Article
headings
Accessible UX: Going beyond WCAG
Test
▸Incorporate people with disabilities
▸Wireframe and design reviews
▸Prototype testi...
UX meets
WCAG
Accessible UX: Going beyond WCAG
Accessible UX: Going beyond WCAG
Information & Relationships
▸Sometimes adding semantics is not enough
▸Did you know?
▸Doe...
Accessible UX: Going beyond WCAG
Information & Relationships
▸Sometimes adding semantics is not enough
▸Did you know?
▸Doe...
Accessible UX: Going beyond WCAG
Information & Relationships
▸Use of structure helps
▸Context
▸Overview
▸Navigation
▸Also ...
Accessible UX: Going beyond WCAG
Language
▸Define for page
▸Define where there are changes
▸If you don’t…
Accessible UX: Going beyond WCAG
Language
<p>
Sur le Pont d'Avignon
L'on y danse, l'on y danse
Sur le Pont d'Avignon
L'on ...
Accessible UX: Going beyond WCAG
Language
<p lang="fr">
Sur le Pont d'Avignon
L'on y danse, l'on y danse
Sur le Pont d'Avi...
Accessible UX: Going beyond WCAG
Instruction & Orientation
▸Informative label text
▸Informative heading text
▸Informative ...
Accessible UX: Going beyond WCAG
Images of Text
▸We know about alternative text
▸Images of text is not flexible
▸Cannot be...
Accessible UX: Going beyond WCAG
Content (WCAG 2.0 Level AAA)
▸Reading level
▸Use of plain language whenever possible
▸Avo...
Beyond WCAG
Accessible UX: Going beyond WCAG
Design
▸Sans-serif fonts for body text
▸Supplementing with imagery and iconography
▸WCAG ...
Accessible UX: Going beyond WCAG
Design for mobile
▸Touch target sizes and spacing
▸When designing for touch, make sure th...
Accessible UX: Going beyond WCAG
Content
▸Good accessibility begins with content
Accessible UX: Going beyond WCAG
Accessible UX: Going beyond WCAG
Writing style
▸Make your point clear first then explain
▸One point per paragraph
▸Use sho...
Accessible UX: Going beyond WCAG
CAPS
▸Harder to read (dyslexia)
▸Shouting, caps can cause different reading by screen
rea...
Accessible UX: Going beyond WCAG
Screen reader nuances
▸Using semantic markup helps
▸But screen readers can still get thin...
Accessible UX: Going beyond WCAG
Screen reader pronunciation
▸We have language selection in WCAG, but what about
pronuncia...
Accessible UX: Going beyond WCAG
Hyphenation
▸Example: E-newsletter
▸iOS
▸ enewsletter “ehneyewsleta” = ˌe njuːsletər (sou...
Accessible UX: Going beyond WCAG
Compound words
▸Compound words are commonplace
▸Homepage
▸Sitemap
▸"Signup" announced as ...
Accessible UX: Going beyond WCAG
Read / Reading
▸“Reeding” vs “Redding”
▸<h2>Get reading</h2> = “Get Redding”
▸<a href="#"...
Accessible UX: Going beyond WCAG
Emphasis
▸“Skip to content” vs “Skip to main content”
▸“con tent” vs “con tent”
Accessible UX: Going beyond WCAG
Date format
▸ambiguity, clarity (e.g. US versus UK)
▸01 03 2015 could be “1st of March” o...
Accessible UX: Going beyond WCAG
Long numbers
▸Phone numbers
▸Company numbers
▸<span> trick
▸<span>0824</span>5475
▸CSS 3 ...
Accessible UX: Going beyond WCAG
Moving forward
▸More testing currently being done in this area.
▸Other pronunciation exam...
Accessible UX: Going beyond WCAG
Responsibility?
▸Users?
▸Software vendors?
▸Developers?
▸Content creators?
▸Web standards?
Accessible UX: Going beyond WCAG
Responsibility?
▸Users?
▸Software vendors?
▸Developers?
▸Content creators?
▸Web standards...
Accessible UX: Going beyond WCAG
Final points
▸Test, test, test!
▸No. (one-word sentence) is read by VoiceOver on iPad
cor...
What can I do?
Accessible UX: Going beyond WCAG
Jon has personal connections to
accessibility.
Accessible UX: Going beyond WCAG
Jon has personal connections to
accessibility.
Photo credit: Jon Gibbins with thanks to D...
Accessible UX: Going beyond WCAG
Empathy
▸Most of us have a connection to accessibility
Accessible UX: Going beyond WCAG
Empathy
▸Mobile
▸small screens
▸text sizes
▸touch targets and keys
▸environment (hands-fr...
Accessible UX: Going beyond WCAG
Empathy
▸Ageing
▸We are all ageing
▸Multiple disabilities of different types
Accessible UX: Going beyond WCAG
Empathy
▸Accessibility is about understanding people and the barriers
that they face
▸Get...
Accessible UX: Going beyond WCAG
Commit
▸Establish an ongoing commitment to accessibility
▸Create an accessibility stateme...
Resources
Accessible UX: Going beyond WCAG
Resources: accessibility books
▸A Web for Everyone:
Designing Accessible User
Experiences...
Accessible UX: Going beyond WCAG
Resources: guidelines
▸Guidelines for mobile and platform-specific
▸WCAG 2.0
▸http://www....
Accessible UX: Going beyond WCAG
Resources: W3C WAI
▸David Sloan has a good run down of helpful UX resources
▸http://www.p...
Accessible UX: Going beyond WCAG
Resources: W3C WAI (continued)
▸Involving users in evaluation
▸http://www.w3.org/WAI/eval...
Questions?
#sharetheoran
https://youtu.be/x9MvEZskR6o
Thanks!
Jon Gibbins, @dotjay
@DigA11y
Upcoming SlideShare
Loading in …5
×

Accessible UX: Going beyond WCAG (#ID24)

960 views

Published on

How do the Web Content Accessibility Guidelines relate to UX design? What about if we look beyond the guidelines to where the standards are not enough?

Talk from #ID24 for Global Accessibility Awareness Day, 19 May 2016.

http://www.inclusivedesign24.org/#talk19
https://www.youtube.com/watch?v=Dtyy04T7frY&list=PL95LOQw9SLWxmcZtzBiFuT9HAJKFJnl2n&index=19

Published in: Internet
  • Login to see the comments

Accessible UX: Going beyond WCAG (#ID24)

  1. 1. Accessible UX Going beyond WCAG Jon Gibbins, @dotjay #ID24 #a11y #UX 19 May 2016
  2. 2. Accessible UX
  3. 3. Accessible UX: Going beyond WCAG Problems 1. Accessibility cannot be done by one person in your team ▸ Don’t just be the accessibility guy/gal ▸ Raise awareness ▸ Teach ▸ Learn
  4. 4. Accessible UX: Going beyond WCAG Problems 2. QA and testing phase often too late for accessibility ▸Think about accessibility as early as possible ▸Bake it into your process
  5. 5. Accessible UX: Going beyond WCAG Problems 3. Accessibility not built into development processes ▸ BS 8878 ▸ Not a set of development guidelines ▸ Project management roadmap for ensuring that web products are built in an accessible way
  6. 6. Accessible UX: Going beyond WCAG I don’t have all the answers ▸Accessibility is contextual ▸Accessibility comes with experience ▸Accessibility is not just about code
  7. 7. Accessible UX: Going beyond WCAG
  8. 8. Accessible UX: Going beyond WCAG Incorporate accessibility in UX design process ▸Research ▸Define ▸Wireframe ▸Test with people ▸Iterate
  9. 9. Accessible UX: Going beyond WCAG Research ▸Think about accessibility early ▸Accessibility more likely to ▸get baked into prototypes ▸persist through development ▸make it into production at an acceptable level
  10. 10. Accessible UX: Going beyond WCAG Research ▸Putting people first goes a long way towards accessibility ▸Include people with disabilities for diverse personas ▸Different disabilities, different needs ▸Older people (often first time users) ▸Plan to test with similar people
  11. 11. Accessible UX: Going beyond WCAG Define ▸Information architecture ▸Plan understandable structure ▸Plan heading structure
  12. 12. Accessible UX: Going beyond WCAG Define ▸Labelling ▸Use concise, clear, consistent and descriptive labels ▸Form controls ▸Navigation ▸Link text
  13. 13. Accessible UX: Going beyond WCAG Design ▸Design with accessibility in mind ▸Multimodal interactions – choice ▸Familiarity ▸Design patterns ▸Iconography ▸Layout ▸Content order
  14. 14. Accessible UX: Going beyond WCAG Design ▸Contrast ▸4.5:1 at least (higher for mobile – see later) ▸Colour combinations ▸Avoid red/green ▸Avoid red/black ▸Don’t use colour alone ▸Test using colour blindness tools
  15. 15. Accessible UX: Going beyond WCAG http://webaim.org/resources/designers/
  16. 16. Accessible UX: Going beyond WCAG Wireframe ▸Wireframe with accessibility in mind ▸Fix accessibility before it hits the screens, e.g. order ▸Documenting accessibility as you go will help future iterations ▸Annotate wireframes with accessibility detail ▸Show structure, headings, labels, order
  17. 17. Accessible UX: Going beyond WCAG
  18. 18. Accessible UX: Going beyond WCAG “Menu” Article headings
  19. 19. Accessible UX: Going beyond WCAG Test ▸Incorporate people with disabilities ▸Wireframe and design reviews ▸Prototype testing ▸User testing ▸User sessions, be prepared for interactions to take longer ▸Is the test lab accessible? Can you test at home or remotely?
  20. 20. UX meets WCAG
  21. 21. Accessible UX: Going beyond WCAG
  22. 22. Accessible UX: Going beyond WCAG Information & Relationships ▸Sometimes adding semantics is not enough ▸Did you know? ▸Does <em> or <strong> get pronounced differently in screen readers?
  23. 23. Accessible UX: Going beyond WCAG Information & Relationships ▸Sometimes adding semantics is not enough ▸Did you know? ▸Does <em> or <strong> get pronounced differently in screen readers? Not by default! ▸Do not rely on them for very important information. ▸Consider whether the content deserves to be a heading, or could be supplemented with iconography (alternative text), etc.
  24. 24. Accessible UX: Going beyond WCAG Information & Relationships ▸Use of structure helps ▸Context ▸Overview ▸Navigation ▸Also breaks up content to make is more digestible ▸Markup ▸Headings ▸Landmarks ▸Lists
  25. 25. Accessible UX: Going beyond WCAG Language ▸Define for page ▸Define where there are changes ▸If you don’t…
  26. 26. Accessible UX: Going beyond WCAG Language <p> Sur le Pont d'Avignon L'on y danse, l'on y danse Sur le Pont d'Avignon L'on y danse tous en rond </p>
  27. 27. Accessible UX: Going beyond WCAG Language <p lang="fr"> Sur le Pont d'Avignon L'on y danse, l'on y danse Sur le Pont d'Avignon L'on y danse tous en rond </p>
  28. 28. Accessible UX: Going beyond WCAG Instruction & Orientation ▸Informative label text ▸Informative heading text ▸Informative error messages
  29. 29. Accessible UX: Going beyond WCAG Images of Text ▸We know about alternative text ▸Images of text is not flexible ▸Cannot be selected ▸Cannot be used with “Speak Selection” features ▸Sighted screen reader user?!
  30. 30. Accessible UX: Going beyond WCAG Content (WCAG 2.0 Level AAA) ▸Reading level ▸Use of plain language whenever possible ▸Avoid unnecessary jargon and slang ▸Line length ▸Do not use justified text ▸Glossary
  31. 31. Beyond WCAG
  32. 32. Accessible UX: Going beyond WCAG Design ▸Sans-serif fonts for body text ▸Supplementing with imagery and iconography ▸WCAG doesn't really cover this ▸Helps people with learning disabilities, dyslexia, reading a second language
  33. 33. Accessible UX: Going beyond WCAG Design for mobile ▸Touch target sizes and spacing ▸When designing for touch, make sure the tap size of the navigation item is at least 7mm (equivalent) ▸Finger tips are ~7mm ▸Reachability ▸Zoom design ▸Labels above control ▸Higher colour contrast due to mobile context, e.g. glare ▸BBC guidelines suggest 7:1 ratio (the WCAG AAA requirement)
  34. 34. Accessible UX: Going beyond WCAG Content ▸Good accessibility begins with content
  35. 35. Accessible UX: Going beyond WCAG
  36. 36. Accessible UX: Going beyond WCAG Writing style ▸Make your point clear first then explain ▸One point per paragraph ▸Use short line lengths wherever possible ▸Helps people who are deaf, have dyslexia, dementia or other cognitive and learning disabilities ▸See W3C COGA Techniques (Working Draft)
  37. 37. Accessible UX: Going beyond WCAG CAPS ▸Harder to read (dyslexia) ▸Shouting, caps can cause different reading by screen readers
  38. 38. Accessible UX: Going beyond WCAG Screen reader nuances ▸Using semantic markup helps ▸But screen readers can still get things wrong
  39. 39. Accessible UX: Going beyond WCAG Screen reader pronunciation ▸We have language selection in WCAG, but what about pronunciation?
  40. 40. Accessible UX: Going beyond WCAG Hyphenation ▸Example: E-newsletter ▸iOS ▸ enewsletter “ehneyewsleta” = ˌe njuːsletər (sounds Russian) ▸ e-newsletter “ee newsletter” = ˈiːnuːzˌletər (correct) ▸Android ▸ enewsletter “eh newsletter” = ˌenuːzˌletər (wrong “e” sound) ▸ e-newsletter “ee newsletter” = ˈiːnuːzˌletər (correct) ▸Windows mobile ▸ enewsletter “ee newsletter” = ˈiːnuːzˌletər (correct) ▸ e-newsletter “ee newsletter” = ˈiːnuːzˌletər (correct)
  41. 41. Accessible UX: Going beyond WCAG Compound words ▸Compound words are commonplace ▸Homepage ▸Sitemap ▸"Signup" announced as "sig–nup" in VoiceOver iOS ▸Spaces and hyphens are your friends.
  42. 42. Accessible UX: Going beyond WCAG Read / Reading ▸“Reeding” vs “Redding” ▸<h2>Get reading</h2> = “Get Redding” ▸<a href="#">Read more</a> = “Red more”
  43. 43. Accessible UX: Going beyond WCAG Emphasis ▸“Skip to content” vs “Skip to main content” ▸“con tent” vs “con tent”
  44. 44. Accessible UX: Going beyond WCAG Date format ▸ambiguity, clarity (e.g. US versus UK) ▸01 03 2015 could be “1st of March” or “3rd of January” ▸An interesting thing to note in VoiceOver ▸it sometimes reads numbers strangely ▸for example: 2013 = “twenty thirteen inches” ▸“Date expected in dd/mm/yyyy format” ▸“millimetres” in some speech engines
  45. 45. Accessible UX: Going beyond WCAG Long numbers ▸Phone numbers ▸Company numbers ▸<span> trick ▸<span>0824</span>5475 ▸CSS 3 speak-as: digits ▸Very poor support but should improve
  46. 46. Accessible UX: Going beyond WCAG Moving forward ▸More testing currently being done in this area. ▸Other pronunciation examples: ▸http://lab.dotjay.co.uk/tests/screen-readers/pronunciation/
  47. 47. Accessible UX: Going beyond WCAG Responsibility? ▸Users? ▸Software vendors? ▸Developers? ▸Content creators? ▸Web standards?
  48. 48. Accessible UX: Going beyond WCAG Responsibility? ▸Users? ▸Software vendors? ▸Developers? ▸Content creators? ▸Web standards? All of us!
  49. 49. Accessible UX: Going beyond WCAG Final points ▸Test, test, test! ▸No. (one-word sentence) is read by VoiceOver on iPad correctly, but on iPhone it reads it as “number”. ▸These changes to our content are clearer for all!
  50. 50. What can I do?
  51. 51. Accessible UX: Going beyond WCAG Jon has personal connections to accessibility.
  52. 52. Accessible UX: Going beyond WCAG Jon has personal connections to accessibility. Photo credit: Jon Gibbins with thanks to Drake Music Project
  53. 53. Accessible UX: Going beyond WCAG Empathy ▸Most of us have a connection to accessibility
  54. 54. Accessible UX: Going beyond WCAG Empathy ▸Mobile ▸small screens ▸text sizes ▸touch targets and keys ▸environment (hands-free, noise, rain)
  55. 55. Accessible UX: Going beyond WCAG Empathy ▸Ageing ▸We are all ageing ▸Multiple disabilities of different types
  56. 56. Accessible UX: Going beyond WCAG Empathy ▸Accessibility is about understanding people and the barriers that they face ▸Getting your own experience of accessibility helps you to put yourself in the shoes of others and keep accessibility in mind when building and testing your sites and applications
  57. 57. Accessible UX: Going beyond WCAG Commit ▸Establish an ongoing commitment to accessibility ▸Create an accessibility statement ▸Get an accessibility champion on your team
  58. 58. Resources
  59. 59. Accessible UX: Going beyond WCAG Resources: accessibility books ▸A Web for Everyone: Designing Accessible User Experiences by Sarah Horton and Whitney Quesenbery ▸Design Meets Disability by Graham Pullin
  60. 60. Accessible UX: Going beyond WCAG Resources: guidelines ▸Guidelines for mobile and platform-specific ▸WCAG 2.0 ▸http://www.w3.org/WAI/WCAG20/ ▸BBC Mobile Accessibility Guidelines ▸http://www.bbc.co.uk/guidelines/futuremedia/accessibility/mobile ▸BBC GEL – How to design for accessibility ▸http://www.bbc.co.uk/gel/guidelines/how-to-design-for-accessibility
  61. 61. Accessible UX: Going beyond WCAG Resources: W3C WAI ▸David Sloan has a good run down of helpful UX resources ▸http://www.paciellogroup.com/blog/2013/06/accessible-user-experience-and-w3c-wai/ ▸Designing for Inclusion ▸http://www.w3.org/WAI/users/Overview.html ▸Effective involvement of people with disabilities in the design process ▸Planning and Implementing Web Accessibility ▸http://www.w3.org/WAI/managing.html ▸Involving Users in Web Projects for Better, Easier Accessibility ▸http://www.w3.org/WAI/users/involving
  62. 62. Accessible UX: Going beyond WCAG Resources: W3C WAI (continued) ▸Involving users in evaluation ▸http://www.w3.org/WAI/eval/users.html ▸Mobile Accessibility ▸http://www.w3.org/WAI/mobile/ ▸Shared Web Experiences: Barriers Common to Mobile Device Users and People with Disabilities ▸http://www.w3.org/WAI/mobile/experiences
  63. 63. Questions?
  64. 64. #sharetheoran https://youtu.be/x9MvEZskR6o
  65. 65. Thanks! Jon Gibbins, @dotjay @DigA11y

×