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.

Not Perfect, "Always Better: A Story of Inclusion" by Derek Featherstone - Now What? Conference 2017

750 views

Published on

Jake walked out of the conference room after meeting with Claire (VP of Engineering) and Sanjay (Design Director). He almost felt their glare burning a hole through his shirt. Jake had just sat through a hour-long meeting reviewing the user feedback from last year’s site launch. There had been reports of some accessibility issues for some time, but they’d been mostly ignored. The picture wasn’t getting any better: they were missing out on a lot of potential revenue by being hostile to people with disabilities.

Jake pulled out his phone and sent a message to his team in Slack. “We’ve got some work to do”

What was his next move? How did he begin the work and start to prioritize what needed to be done? How did he change the team’s process to include accessibility in EVERY post launch plan? Check in with Derek to find out what Jake and his team did next; you’ll learn what you need to do after a site launch to ensure your site is both accessible and easy to use by people with disabilities… and stays that way.

Published in: Technology
  • Be the first to comment

  • Be the first to like this

Not Perfect, "Always Better: A Story of Inclusion" by Derek Featherstone - Now What? Conference 2017

  1. 1. Not perfect, always better a story of inclusion @feather Derek Featherstone
  2. 2. Jake Team Lead Sanjay Design Director Claire VP Engineering
  3. 3. incrediWeb Company
  4. 4. I’m really struggling to select a colour for the shirt I want; the buttons are too close together for me. “ ”
  5. 5. I can’t seem to change the size of the text “ ”
  6. 6. I’m trying to buy this but I can’t do it with the keyboard “ ”
  7. 7. I can’t quite understand this video... there’s too much background noise, and no captions. “ ”
  8. 8. I’m having a tough time remembering what went wrong and how to fix it. “ ”
  9. 9. Help.
  10. 10. Step 1: Set a goal.
  11. 11. Perfect.
  12. 12. • absolute • finished • done • no changes needed • nothing left to do • unachievable • overwhelming • don’t know where to start
  13. 13. Better.
  14. 14. • relative • improvement over any previous state • shows progress • room to grow • never“done” • first steps • “we can do this” • starting somewhere is better doing nothing
  15. 15. Step 1: Start and learn quickly.
  16. 16. Step 1: Start and learn quickly. • Look to the standards (WCAG 2.0) • Get started, try to fix 20 things next week. • Use that week to figure out how long the other 217 issues will take.
  17. 17. Step 2: Research and plan.
  18. 18. Check In 1. Are you a U.S. citizen? 2. Have you ever been denied entry to the U.S.? Yes No Yes No 3. Do you have a TSA Redress Number? 4. If yes, please enter it: Yes No Quit << Previous Next >> Layout:
 Consider proximity, pattern of use for low-vision
  19. 19. Check In 1. Are you a U.S. citizen? 2. Have you ever been denied entry to the U.S.? Yes No Yes No 3. Do you have a TSA Redress Number? 4. If yes, please enter it: Yes No Quit << Previous Next >>
  20. 20. Check In 1. Are you a U.S. citizen? 2. Have you ever been denied entry to the U.S.? Yes No Yes No 3. Do you have a TSA Redress Number? 4. If yes, please enter it: Yes No Quit or Go Back Next >> Not sure? Use layout to create the right chunks.
 Use pattern of use to lead the eye to action.
  21. 21. Straw test Complete an interaction
 while looking through
 the hole in this card People with low vision can face challenges with proximity, where related content is visually far apart. Placing related content close together and in a logical order helps users to be successful.
  22. 22. I’m trying to buy this but I can’t do it with the keyboard“ ”
  23. 23. I’m really struggling to select a colour for the shirt I want; the buttons are too close together for me. “ ”
  24. 24. I can’t seem to change the size of the text “ ”
  25. 25. I can’t quite understand this video... there’s too much background noise, and no captions. “ ”
  26. 26. I’m having a tough time remembering what went wrong and how to fix it. “ ”
  27. 27. Step 2: Research and plan. • Talk with people, or get help. • Create a prioritized remediation plan. • Keyboard issues • Image/media issues • Forms issues
  28. 28. What are priorities? • Highest business value • High impact, low complexity • Highest risk • Can we solve other problems too?
  29. 29. Step 3: Create your standard.
  30. 30. Step 3: Create your standard. • Evolves to always get better. • “Here’s how we are going to do things” • Document those standards in your pattern libraries, style guides, and design systems. • Use this for hiring and onboarding
  31. 31. Keyboard top 5 1. All interactive elements can be reached with keyboard with theTab key. 2. Interactive elements can be tabbed through in a predictable, logical order. 3. Interactive elements can be used with the keyboard when they have focus. 4. Focus indicator is visible while tabbing through the page. 5. Tabindex, when used, is never set higher than 0 (tabindex="0").
  32. 32. Images/media top 5 1. All images and media have text equivalents in the form of alt text, captions, and/or transcripts, that convey the equivalent meaning as the images/media. 2. Decorative images use empty/null alt attributes (alt=“") or are CSS background images. 3. Informative images are described with a text equivalent (usually using alt). 4. Informative images with adjacent content that describes the image have empty/null alt attributes. 5. Functional images (image buttons, links with image content, etc.) use alt text to describe their purpose.
  33. 33. Forms top 5 1. Text labels are marked up using the label element and for/id attributes. 2. Form labels are clear and informative. 3. Required fields are programmatically indicated to assistive technology. 4. Forms are not automatically submitted. 5. Users can prevent and correct errors with ease.
  34. 34. Step 4: Commit to the future.
  35. 35. Step 4: Commit to the future. • Continue to evolve patterns/guides/ systems. • Study things we don’t know about • One dedicated accessibility sprint every quarter. • Include people with disabilities in the process: ideation, design, usability testing
  36. 36. Jake Team Lead Sanjay Design Director Claire VP Engineering
  37. 37. The power of the Web is in its universality. Access by everyone regardless of disability is an essential aspect. Sir Tim Berners-Lee
  38. 38. Not perfect, always better. @feather Derek Featherstone

×