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 London 2018

2.137 Aufrufe

Veröffentlicht am

Talk at WordCamp London 2018 for Accessible Design.

What makes a Design accessible.

Video will be online soon on https://wordpress.tv/. Just search for WordCamp London 2018, my Name or Accessible Design.

Veröffentlicht in: Design
  • If you’re looking for a great essay service then you should check out ⇒ www.HelpWriting.net ⇐. A friend of mine asked them to write a whole dissertation for him and he said it turned out great! Afterwards I also ordered an essay from them and I was very happy with the work I got too.
       Antworten 
    Sind Sie sicher, dass Sie …  Ja  Nein
    Ihre Nachricht erscheint hier
  • Hi there! I just wanted to share a list of sites that helped me a lot during my studies: .................................................................................................................................... www.EssayWrite.best - Write an essay .................................................................................................................................... www.LitReview.xyz - Summary of books .................................................................................................................................... www.Coursework.best - Online coursework .................................................................................................................................... www.Dissertations.me - proquest dissertations .................................................................................................................................... www.ReMovie.club - Movies reviews .................................................................................................................................... www.WebSlides.vip - Best powerpoint presentations .................................................................................................................................... www.WritePaper.info - Write a research paper .................................................................................................................................... www.EddyHelp.com - Homework help online .................................................................................................................................... www.MyResumeHelp.net - Professional resume writing service .................................................................................................................................. www.HelpWriting.net - Help with writing any papers ......................................................................................................................................... Save so as not to lose
       Antworten 
    Sind Sie sicher, dass Sie …  Ja  Nein
    Ihre Nachricht erscheint hier
  • Get Paid To Write Articles? YES! View 1000s of companies hiring online writers now! ●●● http://t.cn/AieXS62G
       Antworten 
    Sind Sie sicher, dass Sie …  Ja  Nein
    Ihre Nachricht erscheint hier
  • Hey guys! Who wants to chat with me? More photos with me here 👉 http://www.bit.ly/katekoxx
       Antworten 
    Sind Sie sicher, dass Sie …  Ja  Nein
    Ihre Nachricht erscheint hier
  • Attended the live talk at WC LDN 2018, it was great!
       Antworten 
    Sind Sie sicher, dass Sie …  Ja  Nein
    Ihre Nachricht erscheint hier

Accessible Design WordCamp London 2018

  1. 1. Accessible Design by Maja Benke
  2. 2. A 11 y A ccessibilit y
  3. 3. Why is Accessibility important?
  4. 4. Disabilities
  5. 5. Disabilities Cognitive Physical Audio Visual Credit: Icons designed by Freepik from Flaticon
  6. 6. Every Fifth Person
  7. 7. IBM TRAINING MANUAL 1991 "For people without disabilities, technology makes things easier. For people with disabilities, technology makes things possible."
  8. 8. Accessibility is for Everyone!
  9. 9. What is Accessible Design?
  10. 10. Accessible Design • Supports the Content • Supports the Functionality • Provide Access to Everyone
  11. 11. Password in Uppercase
  12. 12. Most Common 
 Mistakes Best Practices
  13. 13. Color as Single Indicator of Information Additional Style 
 beside Color
  14. 14. Additional Style beside Color
  15. 15. Low Color Contrast High Color Contrast
  16. 16. Low Contrast
  17. 17. Low Contrast
  18. 18. Low Contrast
  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. 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. 42. Strategy for Accessible Websites
  43. 43. Play Around and Test
  44. 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. 45. Resources
  46. 46. Cheat-Sheet - Poster „Dos and don'ts on designing for accessibility“ - by gov.uk
  47. 47. WordPress A11y Handbook make.wordpress.org/ accessibility/handbook/ best-practices/
  48. 48. Book - by Laura Kalbag „Accessibility for Everyone“
  49. 49. A11y Meetup London
  50. 50. Slides:
 @wp1x1

×