An Event Apart: “Inclusive UX: Techniques for Everyone”

Derek Featherstone speaking at An Event Apart Seattle 2018 on April 4, 2018.

You and your teams are doing the things that need to be done to create inclusive designs. You’ve been using meaningful, semantic markup from the get-go. You stopped using light grey on slightly darker grey text years ago. Designing and building your apps and sites in an accessible way is just how you work now—you have to try really hard to make things that don’t work with a keyboard. So, what’s next for you? How can you make sure that you’re delivering on the promise of the web by delivering an inclusive design that can be easily used by people with disabilities? In this talk, Derek will tackle the tougher problems through design approaches and practical development techniques that you need to create accessible, modern web sites.

Notes

  • We review wireframes because of their predictive and preventative value
  • Accessibility is an outcome, but inclusive design is a process
    • Inclusive — think of it as an adverb
    • Design — think of it as a verb
  • Inclusive UX design — The intentional facilitation and crafting of the interactions within an ecosystem that incorporates inclusion as a core value
  • It’s possible to build something that is accessible by accident
  • Techniques for teams
    1. Communication
      • The core value of a wireframe is in the conversation, not in the boxes
    2. Reverse engineering
      • Create wireframes from final product — use this to show how time could have been saved if wireframes had been seen at the beginning
      • Getting things at the wireframe stage is way, way better
      • Ask the question “How could we have caught this earlier? How much?”
    3. Interaction tables
      • There’s value in the reference and value in creating it together
  • Tips to improve mobile:
    • Prioritize content
    • Make controls larger
    • Give controls more breathing room
  • Techniques for designers
    1. Color palettes
      • Show color contrasts with color combinations — show good/bad combinations
      • Color palettes should contain both good and bad combinations
    2. Design intention
      • Clarify and communicate design intent
    3. Interface transformation
      • Allow people to change the interface for something that works better for them
  • Techniques for developers
    1. CSS class name review
      • If you have a class of current or active, you are building meaning into your code
      • Look for the “meaning” in your CSS and move it to another layer, like HTML or ARIA
    2. High contrast tweaks
      • Add 1px transparent border around things for high contrast (High Contrast-friendly dropshadow)
      • Look for meaning in your visual design and represent that in HTML or ARIA
    3. Working with gestures
      • Consider simple, complimentary methods (tap) to use with gestures
    4. Black holes
      • Look for keyboard black holes
      • Carousels can be a black hole when you have no idea how big they are, how to get out
      • Help answer the question “What happens if I go down this path?”
      • Consider “How will people stop interacting with this thing we built?”

Related Links