Successfully reported this slideshow.
Your SlideShare is downloading. ×

Help designers make accessible websites

Help designers make accessible websites

Download to read offline

Almost 1 in 5 people in UK have disabilities, which represents 19% of the population.

The goal of the project in this case study was to design a web tool to assist and educate designers in creating accessible websites.

Almost 1 in 5 people in UK have disabilities, which represents 19% of the population.

The goal of the project in this case study was to design a web tool to assist and educate designers in creating accessible websites.

More Related Content

Related Books

Free with a 30 day trial from Scribd

See all

Related Audiobooks

Free with a 30 day trial from Scribd

See all

Help designers make accessible websites

  1. 1. Help designers make accessible websites Case study
  2. 2. Hello! I’m Stergios Kritikos
  3. 3. I’m currently based in Edinburgh 3 years professional experience in UX / UI Design MSc user experience design Currently working at
  4. 4. “ The power of the Web is in its universality. Access by everyone regardless of disability is an essential aspect ”. Tim Berners-Lee W3C Director and inventor of the World Wide Web
  5. 5. Vision • Blindness • Low vision • Colour-blindness
  6. 6. Hearing • Deafness • Hard of hearing
  7. 7. Motor Inability to use mouse & keyboard
  8. 8. Cognitive • Learning • Distraction • Focus • Inability to remember
  9. 9. in UK have disabilities, which represents the 19% of the population. Source: gov.uk 1 in 5 people
  10. 10. “Know your users” “Target audience”“User needs”
  11. 11. of web designers and developers are taking action in order to create accessible websites? Then why only… Source: Thatcher, J. (Ed.). (2006). Web accessibility: Web standards and regulatory compliance. Berkeley, CA: Friends of ED 1%
  12. 12. For many designers, understand and apply accessibility guidelines is a complex task.
  13. 13. Colour contrast Forms Alt-text Navigation Multimedia Keyboard Content Readable Screen readers Seizures Adaptable Compatible Structure Evaluation
  14. 14. I was trying to find a new path
  15. 15. Make a portal for designers & developers that can help them create accessible websites. MSc project Supervisor: Rachel Menzies Project goal
  16. 16. Steps to solution Followed a user-centred approach to design a web accessibility portal
  17. 17. Research Online questionnaire Design ideas Focus Group Refinement Evaluation Step 1
  18. 18. Popular accessibility guidelines • Web content (WCAG) • Authoring tool (ATAG) • User agent (UAAG) • WAI-ARIA (Rich applications)
  19. 19. WCAG 2.0 • International standard • Developed by the Web Accessibility Initiative
  20. 20. WCAG 2.0 • 4 Principles Perceivable, Operable, Understandable, Robust • Each principle has guidelines • Each guideline has testable, success criteria Level A, AA, AAA
  21. 21. Some evaluation tools:
  22. 22. But… “No tool will be able to pick up every accessibility barrier on a website”.
  23. 23. We need to manual checking accessibility audit user testing combine an automated tool with
  24. 24. Research Online questionnaire Design ideas Focus Group Refinement Evaluation Step 2
  25. 25. Discover… Awareness Frequency Design process 37 participants
  26. 26. Are you aware of WCAG? No Yes 24% 76%
  27. 27. How often apply WCAG 9 13 11 4 NEVER OFTEN USUALLY ALWAYS
  28. 28. When do you apply WCAG? 1st prototype (before evaluation) 1st prototype (after evaluation) Near to completion 29%23% 48%
  29. 29. When do you apply WCAG? Near to completion 29% Which means… More time More money
  30. 30. Research Online questionnaire Design ideas Focus Group Refinement Evaluation Step 3
  31. 31. Existing process Research Design Development Evaluation
  32. 32. Accessibility-centred process Research – Learn / Explore accessibility Design – Dos & Don’ts Development – WCAG guidelines Evaluation - Automated tool & manual Testing
  33. 33. Personas
  34. 34. John Smith – Web developer • His boss asked him to design an accessible website for a client. • Looking for guidance
  35. 35. Alison Mcdonald – Web designer • Wants to browse web accessibility guidelines. • Wants to read tips. • Wants to find design examples.
  36. 36. Jason Conor – Web designer • Read tips and advice for each guideline. • Looking for an understandable way of checking a website for WCAG violations.
  37. 37. Sketches
  38. 38. https://www.w3.org/WAI/WC AG20/quickref/
  39. 39. • Guidelines checklist • Split principles to sections • Coding examples • Advice with simple explanations
  40. 40. • Website URL checker • Live Preview • Filters • How to fix violations • Mark resolves problems
  41. 41. • Q&A • Website URL checker • Guidelines checklist
  42. 42. Research Online questionnaire Design ideas Focus Group Refinement Evaluation Step 4
  43. 43. 4 Participants Evaluation of design ideas Advantages and disadvantages of each design idea Focus group
  44. 44. Focus group results Advantages • Smart filtering on guidelines • Easy navigation • Some features similar to original WCAG website Disadvantages • Isn’t clear where to start • Forces you to browse all guidelines • No search • Can’t create personalized filters
  45. 45. Research Online questionnaire Design ideas Focus Group Refinement Evaluation Step 5
  46. 46. Refinement Homepage redesign Improved checklist Section for design suggestions Added hints on the evaluation tool
  47. 47. Final User Interface
  48. 48. • Creates a clear path • Start to finish • Following existing workflow
  49. 49. • Q&A • Articles • Introduction
  50. 50. • Good & bad use with design examples • Design patterns
  51. 51. • Visibility of principles • Filtering • Checklist
  52. 52. • Better reference on each guideline
  53. 53. Research Online questionnaire Design ideas Focus Group Refinement Evaluation Step 6
  54. 54. Evaluation Heuristic evaluation on the final UI based on the 10 usability heuristics by Jakob Nielsen. https://www.nngroup.com/articles/ten-usability-heuristics/
  55. 55. Future work • Implementation • Include more guidelines • Launch a demo
  56. 56. Lessons learnt • Important to create awareness • Be inclusive • Spread the word
  57. 57. Conclusion • Consider accessibility at the beginning of a project • Include people with disabilities on the research phase & testing
  58. 58. Conclusion • Engage people around you • We need to explore more accessibility-centred processes
  59. 59. Thank you! Any questions ? @StergiosKr stergioskr@gmail.com www.stergioskritikos.com

×