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