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.

1. Help designers make
accessible websites
Case study

2. Hello! I’m Stergios Kritikos

3. I’m currently based in Edinburgh
3 years professional experience in UX / UI Design
MSc user experience design
Currently working at

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. Vision
• Blindness
• Low vision
• Colour-blindness

6. Hearing
• Deafness
• Hard of hearing

7. Motor
Inability to use
mouse &
keyboard

8. Cognitive
• Learning
• Distraction
• Focus
• Inability to
remember

9. in UK have disabilities, which represents
the 19% of the population.
Source: gov.uk
1 in 5 people

10. “Know your users”
“Target audience”“User needs”

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. For many designers, understand and apply
accessibility guidelines is a complex task.

13. Colour contrast
Forms
Alt-text
Navigation
Multimedia
Keyboard
Content
Readable
Screen readers
Seizures
Adaptable
Compatible
Structure
Evaluation

14. I was trying to find
a new path

15. Make a portal for designers &
developers that can help them
create accessible websites.
MSc project
Supervisor: Rachel Menzies
Project goal

16. Steps to solution
Followed a user-centred approach to
design a web accessibility portal

17. Research
Online
questionnaire
Design
ideas
Focus
Group
Refinement
Evaluation
Step 1

18. Popular accessibility guidelines
• Web content (WCAG)
• Authoring tool (ATAG)
• User agent (UAAG)
• WAI-ARIA (Rich applications)

19. WCAG 2.0
• International standard
• Developed by the Web Accessibility Initiative

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. Some evaluation tools:

22. But…
“No tool will be able to
pick up every accessibility
barrier on a website”.

23. We need to
manual checking
accessibility audit
user testing
combine an automated tool with

24. Research
Online
questionnaire
Design
ideas
Focus
Group
Refinement
Evaluation
Step 2

25. Discover…
Awareness
Frequency
Design process
37 participants

26. Are you aware of WCAG?
No Yes
24% 76%

27. How often apply WCAG
9
13
11
4
NEVER OFTEN USUALLY ALWAYS

28. When do you apply WCAG?
1st prototype
(before evaluation)
1st prototype
(after evaluation)
Near to
completion
29%23% 48%

29. When do you apply WCAG?
Near to
completion
29%
Which means…
More time More money

30. Research
Online
questionnaire
Design
ideas
Focus
Group
Refinement
Evaluation
Step 3

31. Existing process
Research
Design
Development
Evaluation

32. Accessibility-centred process
Research – Learn / Explore accessibility
Design – Dos & Don’ts
Development – WCAG guidelines
Evaluation - Automated tool &
manual Testing

33. Personas

34. John Smith – Web developer
• His boss asked him to design an accessible
website for a client.
• Looking for guidance

35. Alison Mcdonald – Web designer
• Wants to browse web accessibility guidelines.
• Wants to read tips.
• Wants to find design examples.

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. Sketches

38. https://www.w3.org/WAI/WC
AG20/quickref/

39. • Guidelines checklist
• Split principles to sections
• Coding examples
• Advice with simple
explanations

40. • Website URL checker
• Live Preview
• Filters
• How to fix violations
• Mark resolves problems

41. • Q&A
• Website URL checker
• Guidelines checklist

42. Research
Online
questionnaire
Design
ideas
Focus
Group
Refinement
Evaluation
Step 4

43. 4 Participants Evaluation
of design ideas
Advantages and disadvantages
of each design idea
Focus group

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. Research
Online
questionnaire
Design
ideas
Focus
Group
Refinement
Evaluation
Step 5

46. Refinement
Homepage redesign
Improved checklist
Section for design suggestions
Added hints on the evaluation tool

47. Final User
Interface

48. • Creates a clear path
• Start to finish
• Following existing
workflow

49. • Q&A
• Articles
• Introduction

50. • Good & bad use with
design examples
• Design patterns

51. • Visibility of principles
• Filtering
• Checklist

52. • Better reference on
each guideline

53. Research
Online
questionnaire
Design
ideas
Focus
Group
Refinement
Evaluation
Step 6

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. Future work
• Implementation
• Include more guidelines
• Launch a demo

56. Lessons learnt
• Important to create awareness
• Be inclusive
• Spread the word

57. Conclusion
• Consider accessibility at the beginning
of a project
• Include people with disabilities on the
research phase & testing

58. Conclusion
• Engage people around you
• We need to explore more accessibility-centred
processes

59. Thank you! Any questions ?
@StergiosKr
stergioskr@gmail.com
www.stergioskritikos.com