{"id":341,"date":"2018-12-10T16:53:13","date_gmt":"2018-12-10T16:53:13","guid":{"rendered":"https:\/\/pressbooks.library.ryerson.ca\/wafd\/?post_type=chapter&#038;p=341"},"modified":"2022-12-16T17:08:25","modified_gmt":"2022-12-16T17:08:25","slug":"progress-bars","status":"publish","type":"chapter","link":"https:\/\/pressbooks.library.torontomu.ca\/wafd\/chapter\/progress-bars\/","title":{"raw":"Progress Bars","rendered":"Progress Bars"},"content":{"raw":"Progress bars are typically implemented when a user has to wait for a process to complete, whether that may be waiting for an upload to finish, data to be compiled, a report to be generated, or any other process that takes more than a few seconds to complete.\r\n\r\nFor most users, there is generally a visual representation of progress, such as a status bar or a circular progress indicator. As a process progresses, a viewer can estimate when it will be complete. For blind users, however, the visual presentation provides no useful information, so they will need to be able to retrieve the current value some other way.\r\n<div class=\"textbox\">\r\n\r\n<strong>Roles, states, and properties in a progress bar<\/strong>\r\n\r\n<code><code><code><\/code><\/code><\/code>\r\n<ul>\r\n \t<li>role=\"progressbar\"<\/li>\r\n \t<li>tabindex = [0|-1]<\/li>\r\n \t<li>aria-valuenow = \"0\"<\/li>\r\n \t<li>aria-valuemin = \"0\"<\/li>\r\n \t<li>aria-valuemax = \"[max value define in default options]\"<\/li>\r\n \t<li>aria-describedby = \"[instruction ID]\"<\/li>\r\n \t<li>role = \"region\"<\/li>\r\n \t<li>aria-live = \"assertive\"<\/li>\r\n \t<li>aria-atomic = \"additions\"<\/li>\r\n \t<li>aria-hidden = \"[true|false]\"<\/li>\r\n<\/ul>\r\n<code><code><\/code><\/code>\r\n\r\n<\/div>\r\n<div style=\"margin: 1em 0; padding: 1em; border: 1px solid #ddd; border-left: 10px solid #0000ff;\"><strong>Suggested Reading:<\/strong> For more about accessible progress bars, see\u00a0<a class=\"external\" style=\"text-decoration: underline;\" href=\"https:\/\/www.w3.org\/TR\/wai-aria-1.1\/#progressbar\" target=\"_blank\" rel=\"noopener noreferrer\">WAI-ARIA 1.1: Progressbar<\/a><\/div>\r\nThe following JSFiddle presents a typical progress bar widget. Review the JavaScript and HTML markup and test the progress bar presented under the result tab with ChromeVox to understand how it functions without any accessibility features added. You can work in JSFiddle itself by clicking the Edit in \u201cJSFiddle\u201d at the top, right-hand side. Copy the accessibility\/WAI-ARIA code described below to fix the accessibility of the progress bar before completing\u00a0<a href=\"https:\/\/pressbooks.library.torontomu.ca\/wafd\/chapter\/4-8-activity-7-accessible-progress-bar\/\">Activity 7<\/a> on the page that follows.\r\n<div 600px=\"\">[h5p id=\"34\"]<\/div>\r\n<h2>WAI-ARIA to Make the Progress Bar Accessible<\/h2>\r\n<div style=\"margin: 1em 0; padding: 1em; border: 1px solid #ddd; border-left: 10px solid #f66;\"><strong>Key Point: <\/strong>For the exercise in <a href=\"https:\/\/pressbooks.library.torontomu.ca\/wafd\/chapter\/4-8-activity-7-accessible-progress-bar\/\">Activity 7: Accessible Progress Bar<\/a>, aim to have the progress bar function in ChromeVox, but, be aware that solutions described here will not work in other screen readers.<\/div>\r\nIn this example, we have added WAI-ARIA to a progress bar, but due to limited support for the WAI-ARIA <code>progressbar<\/code> attributes by screen readers other than ChromeVox, there is also a workaround using the jQuery <code>.data()<\/code> function to output the current value for users of JAWS or NVDA screen readers. You can refer to the <a href=\"https:\/\/github.com\/learnaria\/learnaria.github.io\/blob\/master\/assets\/ik_progressbar_data.js\">ik_progressbar_data.js<\/a> file for the workaround. However, for\u00a0<a href=\"https:\/\/pressbooks.library.torontomu.ca\/wafd\/chapter\/4-8-activity-7-accessible-progress-bar\/\">Activity 7<\/a>, be sure to start from the <a href=\"https:\/\/github.com\/learnaria\/learnaria.github.io\/blob\/master\/assets\/ik_progressbar.js\">ik_progressbar.js<\/a> file for the assignment submission. To experiment with the <code>.data()<\/code> version of the progress bar JavaScript file, you can adjust the reference to the file in the <a href=\"https:\/\/github.com\/learnaria\/learnaria.github.io\/blob\/master\/progressbar.html\">progressbar.html<\/a> file.\r\n\r\nFirst, as is typical, create some instructions describing how to operate the progress bar with a screen reader and keyboard and add them to the default options.\r\n<div style=\"height: 140px;\">[h5p id=\"35\"]<\/div>\r\nUpdate the <code>init()<\/code> function to add the required WAI-ARIA. First set <code>tabindex=\"-1\"<\/code> to be sure the bar itself is not keyboard focusable by default, and associate the bar with the instructions so when the bar does receive focus the instructions are read. Set some default values for <code>aria-valuemin<\/code>, <code>aria-valuenow<\/code>, and <code>aria-valuemax<\/code>. Also, add keyboard access to the bar with an <code>on(keydown)<\/code> reference to the <code>onKeyDown()<\/code> function, described below.\r\n\r\nAdd to the notifications <code>&lt;div&gt;<\/code> live region attributes so when Space\/Enter are pressed and the progress percent is added, or if \"Loading Complete!\" is added, they are read aloud by the screen reader.\r\n\r\nFinally, create the <code>&lt;div&gt;<\/code> with instructions referenced by its ID with <code>aria-describedby<\/code> added to the bar <code>&lt;div&gt;<\/code>\u00a0and hide it by default.\r\n<div style=\"height: 1000px; overflow: hidden;\">[h5p id=\"36\"]<\/div>\r\nReplace the <code>data(value)<\/code> in the <code>getValue()<\/code> function, used to retrieve the current value of the progress bar when the Space bar or Enter keys are pressed, with an <code>aria-valuenow<\/code> attribute. This replaces the <code>.data(value)<\/code>\u00a0needed to function with screen readers other than ChromeVox.\r\n<div style=\"height: 250px; overflow: hidden;\">[h5p id=\"37\"]<\/div>\r\nIn the <code>setValue()<\/code> function, add in a <code>tabindex=\"-1\"<\/code> to remove keyboard focus from the bar when the max value is reached and to add the \"Loading Complete\" message to the notification <code>&lt;div&gt;<\/code>. Finally, add either the current value of the progress on keypress or the max value (if progress is complete) to an <code>aria-valuenow<\/code> attribute. This replaces the <code>.data()<\/code> work-around, which is needed to function with screen readers other than ChromeVox.\r\n<div style=\"height: 580px; overflow: hidden;\">[h5p id=\"38\"]<\/div>\r\n<h2>Adding Keyboard Operability<\/h2>\r\nKeyboard access for a progress bar is relatively simple. There is typically no mouse or keyboard interaction. One generally waits and, when progress is complete, continues on with some other action. For screen reader users, however, they will need to be able to get the current progress value using a keypress.\r\n\r\nTo allow the current value to be retrieved, set up the Enter and Space bar keyboard controls with the <code>onKeyDown()<\/code> function. This also triggers the <code>notify()<\/code> function. When one of those keys is pressed, it outputs the value to the notification <code>&lt;div&gt;<\/code> that we have set up as a live region.\r\n<div style=\"height: 480px; overflow: hidden;\">[h5p id=\"39\"]<\/div>\r\n<h2>Accessible Progress Bar in Action<\/h2>\r\nWatch the following video to see how ChromeVox interacts with a progress bar. When the Run Demo button is pressed, instructions are provided on how to announce progress. Pressing the Space bar or Enter key announces the percentage progress at any given moment. When progress has finished, \u201cLoading Complete\u201d is announced. Aim to have the progress bar you update in the activity on the following page operate and announce like the one in the video.\r\n\r\n<strong>Video: <a href=\"https:\/\/www.youtube.com\/watch?v=rDasJ2PMPZA\" rel=\"noopener\">Accessible Progress Bar<\/a><\/strong>\r\n\r\n[embed]https:\/\/www.youtube.com\/embed\/rDasJ2PMPZA[\/embed]","rendered":"<p>Progress bars are typically implemented when a user has to wait for a process to complete, whether that may be waiting for an upload to finish, data to be compiled, a report to be generated, or any other process that takes more than a few seconds to complete.<\/p>\n<p>For most users, there is generally a visual representation of progress, such as a status bar or a circular progress indicator. As a process progresses, a viewer can estimate when it will be complete. For blind users, however, the visual presentation provides no useful information, so they will need to be able to retrieve the current value some other way.<\/p>\n<div class=\"textbox\">\n<p><strong>Roles, states, and properties in a progress bar<\/strong><\/p>\n<p><code><code><code><\/code><\/code><\/code><\/p>\n<ul>\n<li>role=&#8221;progressbar&#8221;<\/li>\n<li>tabindex = [0|-1]<\/li>\n<li>aria-valuenow = &#8220;0&#8221;<\/li>\n<li>aria-valuemin = &#8220;0&#8221;<\/li>\n<li>aria-valuemax = &#8220;[max value define in default options]&#8221;<\/li>\n<li>aria-describedby = &#8220;[instruction ID]&#8221;<\/li>\n<li>role = &#8220;region&#8221;<\/li>\n<li>aria-live = &#8220;assertive&#8221;<\/li>\n<li>aria-atomic = &#8220;additions&#8221;<\/li>\n<li>aria-hidden = &#8220;[true|false]&#8221;<\/li>\n<\/ul>\n<p><code><code><\/code><\/code><\/p>\n<\/div>\n<div style=\"margin: 1em 0; padding: 1em; border: 1px solid #ddd; border-left: 10px solid #0000ff;\"><strong>Suggested Reading:<\/strong> For more about accessible progress bars, see\u00a0<a class=\"external\" style=\"text-decoration: underline;\" href=\"https:\/\/www.w3.org\/TR\/wai-aria-1.1\/#progressbar\" target=\"_blank\" rel=\"noopener noreferrer\">WAI-ARIA 1.1: Progressbar<\/a><\/div>\n<p>The following JSFiddle presents a typical progress bar widget. Review the JavaScript and HTML markup and test the progress bar presented under the result tab with ChromeVox to understand how it functions without any accessibility features added. You can work in JSFiddle itself by clicking the Edit in \u201cJSFiddle\u201d at the top, right-hand side. Copy the accessibility\/WAI-ARIA code described below to fix the accessibility of the progress bar before completing\u00a0<a href=\"https:\/\/pressbooks.library.torontomu.ca\/wafd\/chapter\/4-8-activity-7-accessible-progress-bar\/\">Activity 7<\/a> on the page that follows.<\/p>\n<div>\n<div id=\"h5p-34\">\n<div class=\"h5p-content\" data-content-id=\"34\"><\/div>\n<\/div>\n<\/div>\n<h2>WAI-ARIA to Make the Progress Bar Accessible<\/h2>\n<div style=\"margin: 1em 0; padding: 1em; border: 1px solid #ddd; border-left: 10px solid #f66;\"><strong>Key Point: <\/strong>For the exercise in <a href=\"https:\/\/pressbooks.library.torontomu.ca\/wafd\/chapter\/4-8-activity-7-accessible-progress-bar\/\">Activity 7: Accessible Progress Bar<\/a>, aim to have the progress bar function in ChromeVox, but, be aware that solutions described here will not work in other screen readers.<\/div>\n<p>In this example, we have added WAI-ARIA to a progress bar, but due to limited support for the WAI-ARIA <code>progressbar<\/code> attributes by screen readers other than ChromeVox, there is also a workaround using the jQuery <code>.data()<\/code> function to output the current value for users of JAWS or NVDA screen readers. You can refer to the <a href=\"https:\/\/github.com\/learnaria\/learnaria.github.io\/blob\/master\/assets\/ik_progressbar_data.js\">ik_progressbar_data.js<\/a> file for the workaround. However, for\u00a0<a href=\"https:\/\/pressbooks.library.torontomu.ca\/wafd\/chapter\/4-8-activity-7-accessible-progress-bar\/\">Activity 7<\/a>, be sure to start from the <a href=\"https:\/\/github.com\/learnaria\/learnaria.github.io\/blob\/master\/assets\/ik_progressbar.js\">ik_progressbar.js<\/a> file for the assignment submission. To experiment with the <code>.data()<\/code> version of the progress bar JavaScript file, you can adjust the reference to the file in the <a href=\"https:\/\/github.com\/learnaria\/learnaria.github.io\/blob\/master\/progressbar.html\">progressbar.html<\/a> file.<\/p>\n<p>First, as is typical, create some instructions describing how to operate the progress bar with a screen reader and keyboard and add them to the default options.<\/p>\n<div style=\"height: 140px;\">\n<div id=\"h5p-35\">\n<div class=\"h5p-content\" data-content-id=\"35\"><\/div>\n<\/div>\n<\/div>\n<p>Update the <code>init()<\/code> function to add the required WAI-ARIA. First set <code>tabindex=\"-1\"<\/code> to be sure the bar itself is not keyboard focusable by default, and associate the bar with the instructions so when the bar does receive focus the instructions are read. Set some default values for <code>aria-valuemin<\/code>, <code>aria-valuenow<\/code>, and <code>aria-valuemax<\/code>. Also, add keyboard access to the bar with an <code>on(keydown)<\/code> reference to the <code>onKeyDown()<\/code> function, described below.<\/p>\n<p>Add to the notifications <code>&lt;div&gt;<\/code> live region attributes so when Space\/Enter are pressed and the progress percent is added, or if &#8220;Loading Complete!&#8221; is added, they are read aloud by the screen reader.<\/p>\n<p>Finally, create the <code>&lt;div&gt;<\/code> with instructions referenced by its ID with <code>aria-describedby<\/code> added to the bar <code>&lt;div&gt;<\/code>\u00a0and hide it by default.<\/p>\n<div style=\"height: 1000px; overflow: hidden;\">\n<div id=\"h5p-36\">\n<div class=\"h5p-content\" data-content-id=\"36\"><\/div>\n<\/div>\n<\/div>\n<p>Replace the <code>data(value)<\/code> in the <code>getValue()<\/code> function, used to retrieve the current value of the progress bar when the Space bar or Enter keys are pressed, with an <code>aria-valuenow<\/code> attribute. This replaces the <code>.data(value)<\/code>\u00a0needed to function with screen readers other than ChromeVox.<\/p>\n<div style=\"height: 250px; overflow: hidden;\">\n<div id=\"h5p-37\">\n<div class=\"h5p-content\" data-content-id=\"37\"><\/div>\n<\/div>\n<\/div>\n<p>In the <code>setValue()<\/code> function, add in a <code>tabindex=\"-1\"<\/code> to remove keyboard focus from the bar when the max value is reached and to add the &#8220;Loading Complete&#8221; message to the notification <code>&lt;div&gt;<\/code>. Finally, add either the current value of the progress on keypress or the max value (if progress is complete) to an <code>aria-valuenow<\/code> attribute. This replaces the <code>.data()<\/code> work-around, which is needed to function with screen readers other than ChromeVox.<\/p>\n<div style=\"height: 580px; overflow: hidden;\">\n<div id=\"h5p-38\">\n<div class=\"h5p-content\" data-content-id=\"38\"><\/div>\n<\/div>\n<\/div>\n<h2>Adding Keyboard Operability<\/h2>\n<p>Keyboard access for a progress bar is relatively simple. There is typically no mouse or keyboard interaction. One generally waits and, when progress is complete, continues on with some other action. For screen reader users, however, they will need to be able to get the current progress value using a keypress.<\/p>\n<p>To allow the current value to be retrieved, set up the Enter and Space bar keyboard controls with the <code>onKeyDown()<\/code> function. This also triggers the <code>notify()<\/code> function. When one of those keys is pressed, it outputs the value to the notification <code>&lt;div&gt;<\/code> that we have set up as a live region.<\/p>\n<div style=\"height: 480px; overflow: hidden;\">\n<div id=\"h5p-39\">\n<div class=\"h5p-content\" data-content-id=\"39\"><\/div>\n<\/div>\n<\/div>\n<h2>Accessible Progress Bar in Action<\/h2>\n<p>Watch the following video to see how ChromeVox interacts with a progress bar. When the Run Demo button is pressed, instructions are provided on how to announce progress. Pressing the Space bar or Enter key announces the percentage progress at any given moment. When progress has finished, \u201cLoading Complete\u201d is announced. Aim to have the progress bar you update in the activity on the following page operate and announce like the one in the video.<\/p>\n<p><strong>Video: <a href=\"https:\/\/www.youtube.com\/watch?v=rDasJ2PMPZA\" rel=\"noopener\">Accessible Progress Bar<\/a><\/strong><\/p>\n<p><iframe loading=\"lazy\" id=\"oembed-1\" title=\"Accessible Progress Bar\" width=\"500\" height=\"281\" src=\"https:\/\/www.youtube.com\/embed\/rDasJ2PMPZA?feature=oembed&#38;rel=0\" frameborder=\"0\" allowfullscreen=\"allowfullscreen\"><\/iframe><\/p>\n","protected":false},"author":100,"menu_order":7,"template":"","meta":{"pb_show_title":"on","pb_short_title":"","pb_subtitle":"","pb_authors":[],"pb_section_license":""},"chapter-type":[],"contributor":[],"license":[],"class_list":["post-341","chapter","type-chapter","status-publish","hentry"],"part":33,"_links":{"self":[{"href":"https:\/\/pressbooks.library.torontomu.ca\/wafd\/wp-json\/pressbooks\/v2\/chapters\/341","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/pressbooks.library.torontomu.ca\/wafd\/wp-json\/pressbooks\/v2\/chapters"}],"about":[{"href":"https:\/\/pressbooks.library.torontomu.ca\/wafd\/wp-json\/wp\/v2\/types\/chapter"}],"author":[{"embeddable":true,"href":"https:\/\/pressbooks.library.torontomu.ca\/wafd\/wp-json\/wp\/v2\/users\/100"}],"version-history":[{"count":54,"href":"https:\/\/pressbooks.library.torontomu.ca\/wafd\/wp-json\/pressbooks\/v2\/chapters\/341\/revisions"}],"predecessor-version":[{"id":2010,"href":"https:\/\/pressbooks.library.torontomu.ca\/wafd\/wp-json\/pressbooks\/v2\/chapters\/341\/revisions\/2010"}],"part":[{"href":"https:\/\/pressbooks.library.torontomu.ca\/wafd\/wp-json\/pressbooks\/v2\/parts\/33"}],"metadata":[{"href":"https:\/\/pressbooks.library.torontomu.ca\/wafd\/wp-json\/pressbooks\/v2\/chapters\/341\/metadata\/"}],"wp:attachment":[{"href":"https:\/\/pressbooks.library.torontomu.ca\/wafd\/wp-json\/wp\/v2\/media?parent=341"}],"wp:term":[{"taxonomy":"chapter-type","embeddable":true,"href":"https:\/\/pressbooks.library.torontomu.ca\/wafd\/wp-json\/pressbooks\/v2\/chapter-type?post=341"},{"taxonomy":"contributor","embeddable":true,"href":"https:\/\/pressbooks.library.torontomu.ca\/wafd\/wp-json\/wp\/v2\/contributor?post=341"},{"taxonomy":"license","embeddable":true,"href":"https:\/\/pressbooks.library.torontomu.ca\/wafd\/wp-json\/wp\/v2\/license?post=341"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}