Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Design Before Code - Global Accessibility Awareness Day Edition


Published on

Accessibility is a difficult challenge at the best of times. The best way to include accessibility in a website or app is to start with design. This talk goes over five tips for designers (and for the people who work with them) to get started in incorporating accessibility into their work.

Published in: Design
  • Be the first to comment

  • Be the first to like this

Design Before Code - Global Accessibility Awareness Day Edition

  1. 1. DESIGN BEFORE CODE Thinking About Accessibility from the Ground Up Caitlin Geier
  2. 2. CONTEXT: About Me  UX Designer at Deque Systems  Live in Ann Arbor, MI  No disabilities………yet.
  3. 3. CONTEXT: My Role at Deque
  4. 4. WHAT TO THINK ABOUT Images Audio and video Icons Colors Visual cues Headings Landmarks Skip links Keyboard focus Information architecture Navigation ConsistencyReadability Reading order Links Typography Data tables Forms Custom controls Error prevention Dynamic content Touch Lots of stuff. Session timeouts Valid code Duplicate IDs Programmatic association Keyboard operability Screen reader compatibility Name, role, value Pause, stop, hide Links vs buttons Error association
  5. 5. WHAT TO ACTUALLY THINK ABOUT Usability Users Teamwork Tricky Parts Patterns
  6. 6. KEY #1: Understand Usability Ask: Is it usable? Then you’re halfway there already.
  7. 7. Accessibility Usability
  8. 8. Usability Accessibility
  9. 9. NIELSEN’S 10 HEURISTICS 1. Visibility of system status 2. Match between system and real world 3. User control and freedom 4. Error prevention 5. Help users recognize, diagnose, and recover from errors 6. Consistency and standards 7. Recognition over recall 8. Flexibility and efficiency of use 9. Aesthetic and minimalist design 10. Help and documentation
  10. 10. KEY #2: Understand Your Users Everyone is disabled at some point in their lives.
  11. 11. USER RESEARCH 15-20% of people have a disability
  12. 12. WEAR THEIR SHOES Simulating disabilities  Work outside on a sunny day  Ditch the mouse, use a keyboard  Test with your mother  NoCoffee extension
  13. 13. NoCoffee Plugin for Chrome
  14. 14. KEY #3: Work With Your Team Product Manager Researcher Designer Content Creator Developer QA
  15. 15. DESIGN COST Scope Prototype Build Ship State of Design Ideas Wireframes, prototypes Product under development Product released to public Effort Very low effort to change Low effort to change Medium-high effort to change Very high effort to change SHIFT LEFT
  16. 16. YOU ARE NOT A SILO
  17. 17. KEY #4: Understand the Tricky Bits  Forms  Tables  Custom Controls  Dynamic Content
  18. 18. FORMS: Labels Mailchimp pattern library - forms Blizzard's Battlenet sign-up form GOOD BAD
  19. 19. FORMS: Help Text Mailchimp pattern library - forms
  20. 20. FORMS: Errors Mailchimp pattern library - forms
  21. 21. TABLES Column Headers Row Headers
  22. 22. TABLES: With form controls Example from: [citation needed]
  23. 23. TABLES: All of the headers! Smashing Magazine: Designer User Interfaces for Business Web Applications
  24. 24. TABLES: Should it be a table? Well Traveled Mile: "Ultimate Guide to Booking American Airline Awards: Part 2"
  25. 25. CUSTOM CONTROLS: What are they? Anything that doesn’t use standard HTML control elements.
  26. 26. CUSTOM CONTROLS Mailchimp pattern library - forms
  27. 27. CUSTOM CONTROLS Virgin America home page
  28. 28. DYNAMIC CONTENT Blizzard's Battlenet sign-up form
  29. 29. KEY #5: Style Guide / Pattern Library  Colors  Typography  Forms  Tables  Notifications  Icons  Content guidelines
  30. 30. U.S. Web Design Standards
  31. 31. Salesforce “Lighting” Design System
  32. 32. Usability Users Teamwork Tricky Parts Patterns
  33. 33. QUESTIONS @CaitlinGeier