This document provides an introduction to accessibility best practices presented by James Townsend. It discusses digital accessibility, inclusive design principles, best practices for accessible content, design, and development. The key points covered include the importance of inclusive, progressive enhancement and making content perceivable, operable, understandable and robust. Accessibility should be considered at every stage of a digital project to ensure the widest range of people can access content.

1. Introduction to
Accessibility
Best Practices
James Townsend
Shaw Trust Accessibility Services Financial Open Day 2012

2. Who is this guy?
James Townsend
Web Developer, Shaw Trust Accessibility Services
Background
• Front-end Development
• Web Design
• UI/UX
• Accessibility

3. What I will talk about
• Ideas & techniques that you can use to
improve accessibility of your digital
projects
• Not every technique can apply to every project
• Implementing these techniques can help
improve accessibility
• Start small; a little can go a long way
3

4. What I will talk about
1. Digital Accessibility
2. Principles
3. Content
4. Design
5. Development
6. Putting it all together
4

5. 1. Digital Accessibility

6. Digital Devices
Desktop
Games Console
Smart Phone
Portable Tablet
Games Console
Television
6

7. Digital = Connected

8. The Web

9. Web Core Technologies
HTML CSS JavaScript
Browser
Operating System
9

10. Accessibility Implementation
Device Form Factor
Hardware Input Methods
Assistive Technology
Operating System
APIs
Software
Assistive Technology
Browser
10

11. The website: final piece of
the puzzle

12. 2. Principles

13. Inclusive Design

14. What is Inclusive Design?

15. “Inclusive design is where innovation
and imagination flourish. Meeting the
needs of the widest variety of people
does not inhibit creativity. It opens our
minds and inspires excellence.”
Sandi Wassmer

16. Inclusive Design Principles
1. Equitable 6. Preventative
2. Flexible 7. Tolerant
3. Straightforward 8. Effortless
4. Perceptible 9. Accommodating
5. Informative 10.Consistent
16

17. How does this improve
accessibility?

18. User-focused

19. Usability = Accessibility

20. Progressive Enhancement

21. What is Progressive
Enhancement?

22. “Progressive enhancement is a strategy for web design
that emphasizes accessibility, semantic HTML markup,
and external stylesheet and scripting technologies.
Progressive enhancement uses web technologies in a
layered fashion that allows everyone to access the basic
content and functionality of a web page, using any
browser or Internet connection, while also providing an
enhanced version of the page to those with more
advanced browser software or greater bandwidth.”
Wikipedia

23. Progressive Enhancement
vs
Graceful Degradation

24. Graceful Degradation Progressive Enhancement
Build for modern browsers but Provide a basic level of user
provide a lower level of user experience for all browsers
experience to older browsers but build in advanced
functionality that newer
browsers can utilise
24

25. Progressive Enhancement &
Layers of Accessibility

26. Layers of Accessibility
HTML
26

27. Layers of Accessibility
CSS
HTML
27

28. Layers of Accessibility
JavaScript
CSS
HTML
28

29. Layers of Accessibility
CSS for JavaScript
JavaScript
CSS
HTML
29

30. Layers of Accessibility
WAI-ARIA
CSS for JavaScript
JavaScript
CSS
HTML
30

31. POUR

32. W3C WCAG 2.0
• Perceivable
• Operable
• Understandable
• Robust
32

33. POUR
Difficulty Problem Solution
Hearing Cannot hear media Make it Perceivable
Difficulty with mouse,
Mobility Make it Operable
keyboard
Difficulty with text
Cognitive Make it Understandable
content
Cannot see the content
Visual Make it Robust
or colour
33

34. Knowing principles helps
you learn techniques

35. Putting principles into action

36. 3. Content

37. Content is King

38. What we talk about
when we talk about
content

39. Text
Credit: microsoft.com
39

40. Text - Comments
Credit: reuters.com
40

41. Text – Error Messages
Credit: linkedin.com
41

42. Images
Credit: apple.com
42

43. Data Visualisation
Credit: mint.com
43

44. Audio
Credit: bbc.co.uk
44

45. Video
Credit: starbucks.com
45

46. Content & Accessibility
Type of Content Restriction
Text Cognitive
Hearing (Sign first language)
Images Visual
Data Visualisation Visual
Cognitive
Audio & Video Hearing Impaired
46

47. How can we make content
more accessible?

48. Content Best Practices
• Make it easy to understand
• Use a logical structure
• Break up long content into sections
• Place important information at the top
• Provide alternative text for non-text
elements
48

49. 4. Design

50. What is Design?

51. “Design is the process of conceptualising
and creating something tangible, in order
to serve a specific purpose.”

52. Design Best Practices
• Keep it simple
• Make it responsive
• Place important information at the top
• Use highly contrasting colours
• Don’t rely on colour alone
• Use large font sizes
52

53. 4. Development

54. Web Technologies
• HTML
• CSS
• JavaScript
• WAI-ARIA
54

55. Development Best Practices
• Use standards
• Semantics
• Validate
• Progressive enhancement
• Don’t rely on mouse events
• Provide alternatives
55

56. 5. Putting it all together

57. Accessibility at every stage
of the digital project

58. The one web approach

59. Questions?

60. Thank you!