Create an Accessible Step Progress Bar for All Users!
🚀 Boost your accessibility game: • Role Alert vs ARIA Live: Key Differences E...
Today, we will make the HTML Step Progress bar web-accessible.
The step Progress bar is a very useful component that helps the user understands the progress that they have made so far in multi-step applications.
The Step progress bar can be either interactive, wherein you can tab through and make selections to move back to the completed steps, just like bread crumbs or it can be noninteractive, that is it's read-only and its primary purpose is to indicate the progress made so far.
We will be covering both interactive and noninteractive Step progress bars in our tutorial today.
Do watch the video till the end and let me know what have you used the most recently, INTERACTIVE OR NONINTERACTIVE Step Progress bar?
👉Join our growing community on Instagram https://www.instagram.com/skillssingh...
👉You can connect with me on Telegram, to get updates on the upcoming videos: https://t.me/webAccessibilityTutorials
👉 Dig deeper with detailed articles: / askparamsingh
📚 Materials/References:
GitHub Code: https://github.com/skillssingh/ADASer...
Please refer to the following timeline to jump to the section that you are interested in:
Timecodes
0:00 What is a Step Progress Bar?
0:50 Accessible Behavior
1:27 WAI-ARIA Attributes
2:35 Code for Non-Interactive Step Progress Bar
12:30 JAWS Screen Reader for Step Progress Bar
13:45 Code for Interactive Step Progress Bar
💓Thank you for your continued support in liking, sharing, and watching my videos.
🔔Hit the Subscribe Button for more educational accessibility content just like this.
#Accessibility #Step Progress bar