Do's and Don'ts in Accessible Design. Workflow, tools and resources to design accessible Websites.

1. Accessible Design
by Maja Benke

2. A 11 y
A ccessibilit y

3. For who is Accessibility
important?

4. Disabilities

5. Disabilities
Cognitive Physical Audio Visual
Credit: Icons designed by Freepik from Flaticon

6. Disabilities
Temporary Permanently
Credit: Icons designed by Freepik from Flaticon

7. Every Fifth Person

8. IBM TRAINING MANUAL 1991
"For people without disabilities, technology
makes things easier.
For people with disabilities, technology makes
things possible."

9. Accessibility is for
Everyone!
http://adrianroselli.com/2017/06/slides-
from-wordcamp-europe.html

10. What is Accessible
Design?

11. Accessible Design
• Supports the Content
• Supports the Functionality
• Provide Access to Everyone

12. Password in Uppercase

13. Most Common
Mistakes
Best Practices

14. Color as Single
Indicator of Information
Additional Style
beside Color

17. Additional Style beside Color

19. Make Links Visible

20. Low Color Contrast
High Color Contrast

24. Contrast
AA
Between 21:1 and 4.5:1

25. contrastchecker.com

26. Sketch WCAG

27. Sketch WCAG

28. Hard-to-Read
Typography
Easy-to-Read
Typography

29. Titeltext
Titeltext
Titeltext
Titeltext
Titeltext
Titeltext
Titeltext
Titeltext

30. - The Telegraph
„Internet is becoming unreadable
because of a trend towards lighter,
thinner fonts“

31. Overdesigned
Text Style
Natural
Text Style

32. Overdesigned
Text Style

33. Unstructured Text
Use of Text Elements

35. Messy Structure
Clear
Site Structure

37. Random Use of HTML
Elements
Semantic
Markup

39. Useless Link Label
Clear and
meaningfull Link
Labels

40. Contact us
See our Guidelines
Click here
Follow this Link

41. Single Content Format
Mix of
Content Formats

42. Mix of
Content Formats
Credit: Icons designed by Freepik from Flaticon

43. No Choice for Users
User Controls
Behavior of
Elements

44. Elements Behavior
Links Slider
Audio Video

45. Potential Conflicts
between User Groups

46. vs.
Color Contrast
Too Low Too Bright

47. vs.
Text Styles
bold, italic,
uppercase
Dyslexia

48. vs.
Dyslexia Font
Dyslexia
Font
Dyslexia
Types

49. Dyslexia Font

50. Accesssibility Text
• Large Font Size and Line Height
• Provide Easy Access to Important Information
• Don’t be Afraid to Keep it Short
• Use Text Elements

51. Strategy for
Accessible Websites

52. Workflow
1. Select Content Formats
2. Create Layout with Semantic in Mind

53. Semantic Layout

54. Workflow
1. Select Content Formats
2. Create Layout with Semantic in Mind
3. Style the Text Elements (in black and white)

55. Style in Black and White first

56. Workflow
1. Select Content Formats
2. Create Layout with Semantic in Mind
3. Style the Text Elements (in black and white)
4. Add Color

57. Add Color later

58. Workflow
1. Select Content Formats
2. Create Layout with Semantic in Mind
3. Style the Text Elements (in black and white)
4. Add Color
5. Create Styleguide (for Developers + Content
Creators)

59. Strategy for
Accessible Websites
• Design is not Art!
• Form follows Function!
• Integrate A11y from the Beginning!
• Train your Accessibility-Thinking-Muscle!
• Define Design Styleguide and Content Styleguide with Explanations
for A11y
• Do „Best-Practice“ in Every Area you are Involved in!
• Be Empathic!

60. Resources

61. Cheat-Sheet - Poster
„Dos and don'ts on
designing for
accessibility“
- by gov.uk

62. WordPress A11y Handbook
make.wordpress.org/
accessibility/handbook/
best-practices/

63. Book
- by Laura Kalbag
„Accessibility for
Everyone“

64. Newsletter
a11yweekly.com

65. Thank You!
@WP1x1