1.
Accessible Design
by Maja Benke

2.
A 11 y
A ccessibilit y

3.
Why is Accessibility
important?

4.
Disabilities

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

6.
Every Fifth Person

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

8.
Accessibility is for
Everyone!

9.
What is Accessible
Design?

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

11.
Password in Uppercase

12.
Most Common
Mistakes
Best Practices

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

14.
Additional Style beside Color

15.
Low Color Contrast
High Color Contrast

16.
Low Contrast

17.
Low Contrast

18.
Low Contrast

19.
contrastchecker.com

20.
Sketch WCAG

21.
Sketch WCAG

22.
Hard-to-Read
Typography
Easy-to-Read
Typography

23.
Titeltext
Titeltext
Titeltext
Titeltext
Titeltext
Titeltext
Titeltext
Titeltext

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

25.
Overdesigned
Text Style
Natural
Text Style

26.
Overdesigned
Text Style

27.
Unstructured Text
Use of Text Elements

28.
Messy Structure
Clear
Site Structure

29.
Random Use of HTML
Elements
Semantic
Markup

30.
Useless Link Label
Clear and
meaningfull Link
Labels

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

32.
Single Content Format
Mix of
Content Formats

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

34.
No Choice for Users
User Controls
Behavior of
Elements

35.
Elements Behavior
Links Slider
Audio Video

36.
Potential Conflicts
between User Groups

37.
vs.
Color Contrast
Too Low Too Bright

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

39.
vs.
Dyslexia Font
Dyslexia
Font
Dyslexia
Types

40.
Dyslexia Font

41.
Dyslexia
• Large Font Size and Line Height
• Provide Easy Access to Important Information
• Important Information at the Beginning
• Don’t be Afraid to Keep it Short
• Use Text Elements

42.
Strategy for
Accessible Websites

43.
Play Around and Test

44.
Strategy for
Accessible Websites
• Form follows Function!
• Integrate A11y from the Beginning
• Define Design Styleguide and Content Styleguide
with A11y in Mind
• Do „Best-Practice“ in Every Area you are Involved in!
• Be Empathic!

45.
Resources

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

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

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

49.
A11y Meetup London

50.
Slides:
@wp1x1