Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.

Accessible Design WordCamp Europe 2018 in Belgrad

1.234 Aufrufe

Veröffentlicht am

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

Veröffentlicht in: Design
  • Als Erste(r) kommentieren

  • Gehören Sie zu den Ersten, denen das gefällt!

Accessible Design WordCamp Europe 2018 in Belgrad

  1. 1. Accessible Design by Maja Benke
  2. 2. A 11 y A ccessibilit y
  3. 3. For who is Accessibility important?
  4. 4. Disabilities
  5. 5. Disabilities Cognitive Physical Audio Visual Credit: Icons designed by Freepik from Flaticon
  6. 6. Disabilities Temporary Permanently Credit: Icons designed by Freepik from Flaticon
  7. 7. Every Fifth Person
  8. 8. IBM TRAINING MANUAL 1991 "For people without disabilities, technology makes things easier. For people with disabilities, technology makes things possible."
  9. 9. Accessibility is for Everyone! http://adrianroselli.com/2017/06/slides- from-wordcamp-europe.html
  10. 10. What is Accessible Design?
  11. 11. Accessible Design • Supports the Content • Supports the Functionality • Provide Access to Everyone
  12. 12. Password in Uppercase
  13. 13. Most Common 
 Mistakes Best Practices
  14. 14. Color as Single Indicator of Information Additional Style 
 beside Color
  15. 15. Additional Style beside Color
  16. 16. Make Links Visible
  17. 17. Low Color Contrast High Color Contrast
  18. 18. Contrast AA Between 21:1 and 4.5:1
  19. 19. contrastchecker.com
  20. 20. Sketch WCAG
  21. 21. Sketch WCAG
  22. 22. Hard-to-Read
 Typography Easy-to-Read
 Typography
  23. 23. Titeltext Titeltext Titeltext Titeltext Titeltext Titeltext Titeltext Titeltext
  24. 24. - The Telegraph „Internet is becoming unreadable because of a trend towards lighter, thinner fonts“
  25. 25. Overdesigned Text Style Natural Text Style
  26. 26. Overdesigned Text Style
  27. 27. Unstructured Text Use of Text Elements
  28. 28. Messy Structure Clear Site Structure
  29. 29. Random Use of HTML Elements Semantic Markup
  30. 30. Useless Link Label Clear and meaningfull Link Labels
  31. 31. Contact us See our Guidelines Click here Follow this Link
  32. 32. Single Content Format Mix of Content Formats
  33. 33. Mix of Content Formats Credit: Icons designed by Freepik from Flaticon
  34. 34. No Choice for Users User Controls Behavior of Elements
  35. 35. Elements Behavior Links Slider Audio Video
  36. 36. Potential Conflicts between User Groups
  37. 37. vs. Color Contrast Too Low Too Bright
  38. 38. vs. Text Styles bold, italic, uppercase Dyslexia
  39. 39. vs. Dyslexia Font Dyslexia Font Dyslexia Types
  40. 40. Dyslexia Font
  41. 41. 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
  42. 42. Strategy for Accessible Websites
  43. 43. Workflow 1. Select Content Formats
 2. Create Layout with Semantic in Mind 

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

  46. 46. Style in Black and White first
  47. 47. Workflow 1. Select Content Formats
 2. Create Layout with Semantic in Mind 
 3. Style the Text Elements (in black and white)
 4. Add Color
  48. 48. Add Color later
  49. 49. 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)
  50. 50. 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!
  51. 51. Resources
  52. 52. Cheat-Sheet - Poster „Dos and don'ts on designing for accessibility“ - by gov.uk
  53. 53. WordPress A11y Handbook make.wordpress.org/ accessibility/handbook/ best-practices/
  54. 54. Book - by Laura Kalbag „Accessibility for Everyone“
  55. 55. Newsletter a11yweekly.com
  56. 56. Thank You!
 
 @WP1x1

×