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.

Building an accessible progressive loader


Published on

This presentation for A11y Bytes May 2019, takes you through how to mark up a progress loader using the progress element. Then, eight tips for making the progress loader accessible.

Published in: Education
  • Login to see the comments

Building an accessible progressive loader

  1. 1. Accessibility in pattern libraries Building an accessible progress loader
  2. 2. What is a progress loader?
  3. 3. There are lots of different types of progress loaders.
  4. 4. We’re going to look at a progress loader that takes over the entire page while the process is taking place.
  5. 5. It informs users that a task is currently underway, and how long it should take to finish.
  6. 6. It’s used for tasks that are critical within the overall process.
  7. 7. And with this type of progress loader, users have to wait for the tasks to be completed.
  8. 8. Please wait…
  9. 9. Please wait… Greyed-out page behind
  10. 10. Please wait… Message
  11. 11. Please wait… Progress bar
  12. 12. Please wait… Progress indicator
  13. 13. Accessibility problems
  14. 14. Problem 1: These types of loaders are often not announced to 
 Assistive technology users.
  15. 15. This means that blind users may not be aware that the progress loader has been fired.
  16. 16. Problem 2: There is often a visual indication of progress, but no audio indication.
  17. 17. This means that blind users may not know how long they have to wait, and may assume that an error has occurred.
  18. 18. Problem 3: Keyboard activity is often left unlocked while the loader is in progress.
  19. 19. This means that keyboard-only users may be able to navigate around the page while the loader is active.
  20. 20. Problem 4: There is often insufficient colour contrast between the progress bar and the progress indicator.
  21. 21. This means that some users may not be able to determine the current progress.
  22. 22. Markup
  23. 23. Let's look at one way to mark up a progress loader. Then we can add some accessibility features.
  24. 24. I’m going to show some markup onscreen, but I’ll describe it as we go.
  25. 25. Step 1: Add an overall container.
  26. 26. <div class="loader"> ... </div>
  27. 27. Step 2: Add descriptive text for sighted users.
  28. 28. <div class="loader"> <p>Please wait...</p> </div>
  29. 29. Step 3: Add the <progress>
 element - used to represent the progressive completion
 of a task.
  30. 30. <div class="loader"> <p>Please wait...</p> <progress> </progress> </div>
  31. 31. Step 4: Add the max attribute, which indicates how much of the task needs to be done before it’s complete.
  32. 32. <div class="loader"> <p>Please wait...</p> <progress max="1"> </progress> </div>
  33. 33. Step 5: Add the value attribute, which indicates the current status of the progress bar.
  34. 34. <div class="loader"> <p>Please wait...</p> <progress max="1" value="0.1"> </progress> </div>
  35. 35. The value must be greater than 0.0 and less than or equal to the value of the max attribute.
  36. 36. The value should be dynamically updated using JavaScript.
  37. 37. <div class="loader"> <p>Please wait...</p> <progress max="1" value="0.7812345"> </progress> </div>
  38. 38. This value can be styled with CSS as needed.
  39. 39. Of course, this is just one possible way to mark up a progress loader…
  40. 40. We could use simple <div> elements and ARIA to provide meaning for assistive technologies.
  41. 41. <div class="loader"> <p>Please wait...</p> <div> <div style="width: 10%" role="progressbar" aria-valuemin="0" aria-valuemax="100"
 aria-valuenow=“10"> </div> </div> </div>
  42. 42. However, assuming we stick with the <progress> element solution, how do we make it accessible?
  43. 43. Eight tips to do to improve accessibility
  44. 44. Tip 1: Make sure there is enough color contrast between the progress bar and the indicator.
  45. 45. Tip 2: When the progress loader is fired, focus should be set on the parent container.
  46. 46. Please wait… Focus on parent
  47. 47. Tip 3: Add role="alert" to the parent container.
  48. 48. This means that any DOM changes within the element will be announced to assistive technologies.
  49. 49. <div class="loader" role="alert"> <p>Please wait...</p> <progress max="1" value="0.1"> </progress> </div>
  50. 50. I've used an alert here as I want users to be aware that this is a significant event, worthy of alert status.
  51. 51. This operates like the
 aria-live assertive value, interrupting all other announcements.
  52. 52. Tip 4: Add some dynamically changing text that announces the status for screen readers.
  53. 53. <div class="loader" role="alert"> <p>Please wait...</p> <progress max="1" value="0.1"> <span>Currently loading: 10% complete</span> </progress> </div>
  54. 54. Try not to overwhelm the user by presenting these dynamic updates too often.
  55. 55. Also, reduce the amount of information after the initial announcement.
  56. 56. “Currently loading: 10% complete” “20% complete”
  57. 57. Tip 5: Lock keyboard activity while the loader is in progress.
  58. 58. Tip 6: When the process is complete, send focus back to the relevant area of the page.
  59. 59. Tip 7: Some types of users may benefit from having the percentage value displayed on-screen.
  60. 60. Please wait… Visual value 10%
  61. 61. Tip 8: Always test your proposed solution.
  62. 62. Test with different operating systems, different browsers and different assistive technologies.
  63. 63. And, if possible,
 test with real users.
  64. 64. We’re done! (Thanks)
  65. 65. Russ Weakley Max Design Site: Twitter: Slideshare: Linkedin: