{"id":362,"date":"2018-12-10T17:15:23","date_gmt":"2018-12-10T17:15:23","guid":{"rendered":"https:\/\/pressbooks.library.ryerson.ca\/wafd\/?post_type=chapter&#038;p=362"},"modified":"2022-12-16T17:14:09","modified_gmt":"2022-12-16T17:14:09","slug":"carousels","status":"publish","type":"chapter","link":"https:\/\/pressbooks.library.torontomu.ca\/wafd\/chapter\/carousels\/","title":{"raw":"Carousels","rendered":"Carousels"},"content":{"raw":"Carousels are typically used to present a series of panels or images that rotate at a particular frequency.\r\n<div class=\"textbox\">\r\n\r\n<strong>WAI-ARIA roles, states, and properties used in carousels<\/strong>\r\n\r\n<code><code><code><\/code><\/code><\/code>\r\n<ul>\r\n \t<li>role=\"region\"<\/li>\r\n \t<li>aria-live=\"polite\"<\/li>\r\n \t<li>tabindex=\"0\"<\/li>\r\n \t<li>aria-describedby=\"[id of div with instructions]\"<\/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>The <a href=\"https:\/\/www.w3.org\/WAI\/tutorials\/carousels\/\">Carousel Tutorial<\/a> from the W3C provides additional details on constructing accessible carousels.<\/div>\r\nThe following JSFiddle presents a typical carousel widget. Review the JavaScript and HTML markup. Test the carousel 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 \u201cEdit in JSFiddle.\u201d Copy the accessibility\/WAI-ARIA code described below to fix the accessibility of the accordion before completing <a href=\"https:\/\/pressbooks.library.torontomu.ca\/wafd\/chapter\/5-9-activity-11-accessible-carousel\/\">Activity 11<\/a> on the page that follows.\r\n<div style=\"height: 600px; overflow: hidden;\">[h5p id=\"66\"]<\/div>\r\n<!--https:\/\/jsfiddle.net\/greggy\/qahsutc7\/embedded\/-->\r\n\r\nThough instructions are not always required, they can be helpful for screen reader users when there is non-standard keyboard navigation. In our case, we\u2019ll add a few words and assign them to the \u201cinstructions\u201d variable in the default settings of the <code>init()<\/code> function for the carousel. The instructions will be rendered in its own <code>&lt;div&gt;<\/code> and referenced with <code>aria-describedby<\/code> a little later in the code.\r\n<div style=\"height: 110px; overflow: hidden;\">[h5p id=\"67\"]<\/div>\r\n<!--https:\/\/pastebin.com\/embed_iframe\/sYAeXwkH\/noheader-->\r\n\r\nWe\u2019ll define a few attributes when the carousel is initialized: give it a <code>role=\"region\"<\/code> to add it to the landmarks, add a <code>tabindex<\/code> to make it keyboard focusable, and reference the ID of the instructions <code>&lt;div&gt;<\/code> with <code>aria-describedby<\/code>. Add keyboard operability with <code>.on('keydown')<\/code> and a reference to the <code>onKeyDown<\/code> function, described below.\r\n<div style=\"height: 215px; overflow: hidden;\">[h5p id=\"68\"]<\/div>\r\n<!--https:\/\/pastebin.com\/embed_iframe\/RVMinTBK\/noheader-->\r\n\r\nScreen reader users will not need the Next\/Previous controls, so hide them. They will be using the Arrow keys instead, defined in the <code>onKeyDown<\/code> function further below.\r\n<div style=\"height: 135px; overflow: hidden;\">[h5p id=\"69\"]<\/div>\r\n<!--https:\/\/pastebin.com\/embed_iframe\/Mving7Rv\/noheader-->\r\n\r\nHide images from screen readers. Notice that the <code>alt<\/code> text for the images are defined in the HTML but left empty so it is not read in this case. Screen readers will read the <code>figcaptions<\/code>.\r\n<div style=\"height: 135px; overflow: hidden;\">[h5p id=\"70\"]<\/div>\r\n<!--https:\/\/pastebin.com\/embed_iframe\/YW9xbKbN\/noheader-->\r\n\r\nAdd screen reader instructions by generating a <code>&lt;div&gt;<\/code> that contains the instruction text defined earlier and hide the <code>&lt;div&gt;<\/code> by default. The instructions are read when the carousel receives focus, and the <code>aria-describedby<\/code> attribute is dynamically added to reference the instructions.\r\n<div style=\"height: 195px; overflow: hidden;\">[h5p id=\"71\"]<\/div>\r\n<!--https:\/\/pastebin.com\/embed_iframe\/hCSDX1EB\/noheader-->\r\n\r\nAdd an <code>aria-live<\/code> attribute to the <code>stopTimer<\/code> function. Set its value to <code>polite<\/code> so content updating in the live region announces when a screen reader is not reading elsewhere on the page. The content of the visible carousel panel is read automatically when it is in focus, manually navigating between panels with the Arrow keys.\r\n<div style=\"height: 65px; overflow: hidden;\">[h5p id=\"72\"]<\/div>\r\n<!--https:\/\/pastebin.com\/embed_iframe\/P9hKLdFU\/noheader-->\r\n\r\nRemove the live region when focus on the carousel is removed in the <code>startTimer<\/code> function. By doing so, the live region stops reading when the timer is reactivated <code>onblur<\/code>, and it does not interfere with the screen reader reading elsewhere on the page.\r\n<div style=\"height: 65px; overflow: hidden;\">[h5p id=\"73\"]<\/div>\r\n<!--https:\/\/pastebin.com\/embed_iframe\/u0KCjM0p\/noheader-->\r\n\r\nHide the active slide from screen readers with <code>aria-hidden=\"true\"<\/code>. Then, make the next slide visible to screen readers with <code>aria-hidden=\"false\"<\/code>\u00a0in the <code>gotoSlide<\/code> function.\r\n<div style=\"height: 285px; overflow: hidden;\">[h5p id=\"74\"]<\/div>\r\n<!--https:\/\/pastebin.com\/embed_iframe\/CTN3WWq7\/noheader-->\r\n<h2>Adding Keyboard Operability<\/h2>\r\nAdd keyboard operations for the carousel, pulling keyboard events from ik_utils.js to use Left and Right arrows for moving between panels in the carousel, and the Esc key to exit the carousel and resume automatic rotation.\r\n<div style=\"height: 570px; overflow: hidden;\">[h5p id=\"75\"]<\/div>\r\n<!--https:\/\/pastebin.com\/embed_iframe\/S1FxX48y\/noheader-->\r\n<h2>Accessible Carousel in Action<\/h2>\r\nWatch the following video to see how ChromeVox interacts with a carousel. The carousel rotates automatically when focus is elsewhere on the page. When it receives focus, rotation stops, and navigation instructions are read. The Left and Right arrow keys are used to move manually between panels in the carousel while it has focus. The contents of each panel are read through a live region, dynamically added to the main container <code>&lt;div&gt;<\/code> when the carousel has focus. Using the Tab key while the carousel has focus sends focus to any focusable element within the panel that is in view, a link to the person who shared the photo in this case. Aim to have the carousel 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=oqY-iMIW2sQ\" rel=\"noopener\">Accessible Carousel<\/a><\/strong>\r\n\r\n[embed]https:\/\/www.youtube.com\/embed\/oqY-iMIW2sQ[\/embed]","rendered":"<p>Carousels are typically used to present a series of panels or images that rotate at a particular frequency.<\/p>\n<div class=\"textbox\">\n<p><strong>WAI-ARIA roles, states, and properties used in carousels<\/strong><\/p>\n<p><code><code><code><\/code><\/code><\/code><\/p>\n<ul>\n<li>role=&#8221;region&#8221;<\/li>\n<li>aria-live=&#8221;polite&#8221;<\/li>\n<li>tabindex=&#8221;0&#8243;<\/li>\n<li>aria-describedby=&#8221;[id of div with instructions]&#8221;<\/li>\n<li>aria-hidden=&#8221;(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>The <a href=\"https:\/\/www.w3.org\/WAI\/tutorials\/carousels\/\">Carousel Tutorial<\/a> from the W3C provides additional details on constructing accessible carousels.<\/div>\n<p>The following JSFiddle presents a typical carousel widget. Review the JavaScript and HTML markup. Test the carousel 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 \u201cEdit in JSFiddle.\u201d Copy the accessibility\/WAI-ARIA code described below to fix the accessibility of the accordion before completing <a href=\"https:\/\/pressbooks.library.torontomu.ca\/wafd\/chapter\/5-9-activity-11-accessible-carousel\/\">Activity 11<\/a> on the page that follows.<\/p>\n<div style=\"height: 600px; overflow: hidden;\">\n<div id=\"h5p-66\">\n<div class=\"h5p-content\" data-content-id=\"66\"><\/div>\n<\/div>\n<\/div>\n<p><!--https:\/\/jsfiddle.net\/greggy\/qahsutc7\/embedded\/ --><\/p>\n<p>Though instructions are not always required, they can be helpful for screen reader users when there is non-standard keyboard navigation. In our case, we\u2019ll add a few words and assign them to the \u201cinstructions\u201d variable in the default settings of the <code>init()<\/code> function for the carousel. The instructions will be rendered in its own <code>&lt;div&gt;<\/code> and referenced with <code>aria-describedby<\/code> a little later in the code.<\/p>\n<div style=\"height: 110px; overflow: hidden;\">\n<div id=\"h5p-67\">\n<div class=\"h5p-content\" data-content-id=\"67\"><\/div>\n<\/div>\n<\/div>\n<p><!--https:\/\/pastebin.com\/embed_iframe\/sYAeXwkH\/noheader --><\/p>\n<p>We\u2019ll define a few attributes when the carousel is initialized: give it a <code>role=\"region\"<\/code> to add it to the landmarks, add a <code>tabindex<\/code> to make it keyboard focusable, and reference the ID of the instructions <code>&lt;div&gt;<\/code> with <code>aria-describedby<\/code>. Add keyboard operability with <code>.on('keydown')<\/code> and a reference to the <code>onKeyDown<\/code> function, described below.<\/p>\n<div style=\"height: 215px; overflow: hidden;\">\n<div id=\"h5p-68\">\n<div class=\"h5p-content\" data-content-id=\"68\"><\/div>\n<\/div>\n<\/div>\n<p><!--https:\/\/pastebin.com\/embed_iframe\/RVMinTBK\/noheader --><\/p>\n<p>Screen reader users will not need the Next\/Previous controls, so hide them. They will be using the Arrow keys instead, defined in the <code>onKeyDown<\/code> function further below.<\/p>\n<div style=\"height: 135px; overflow: hidden;\">\n<div id=\"h5p-69\">\n<div class=\"h5p-content\" data-content-id=\"69\"><\/div>\n<\/div>\n<\/div>\n<p><!--https:\/\/pastebin.com\/embed_iframe\/Mving7Rv\/noheader --><\/p>\n<p>Hide images from screen readers. Notice that the <code>alt<\/code> text for the images are defined in the HTML but left empty so it is not read in this case. Screen readers will read the <code>figcaptions<\/code>.<\/p>\n<div style=\"height: 135px; overflow: hidden;\">\n<div id=\"h5p-70\">\n<div class=\"h5p-content\" data-content-id=\"70\"><\/div>\n<\/div>\n<\/div>\n<p><!--https:\/\/pastebin.com\/embed_iframe\/YW9xbKbN\/noheader --><\/p>\n<p>Add screen reader instructions by generating a <code>&lt;div&gt;<\/code> that contains the instruction text defined earlier and hide the <code>&lt;div&gt;<\/code> by default. The instructions are read when the carousel receives focus, and the <code>aria-describedby<\/code> attribute is dynamically added to reference the instructions.<\/p>\n<div style=\"height: 195px; overflow: hidden;\">\n<div id=\"h5p-71\">\n<div class=\"h5p-content\" data-content-id=\"71\"><\/div>\n<\/div>\n<\/div>\n<p><!--https:\/\/pastebin.com\/embed_iframe\/hCSDX1EB\/noheader --><\/p>\n<p>Add an <code>aria-live<\/code> attribute to the <code>stopTimer<\/code> function. Set its value to <code>polite<\/code> so content updating in the live region announces when a screen reader is not reading elsewhere on the page. The content of the visible carousel panel is read automatically when it is in focus, manually navigating between panels with the Arrow keys.<\/p>\n<div style=\"height: 65px; overflow: hidden;\">\n<div id=\"h5p-72\">\n<div class=\"h5p-content\" data-content-id=\"72\"><\/div>\n<\/div>\n<\/div>\n<p><!--https:\/\/pastebin.com\/embed_iframe\/P9hKLdFU\/noheader --><\/p>\n<p>Remove the live region when focus on the carousel is removed in the <code>startTimer<\/code> function. By doing so, the live region stops reading when the timer is reactivated <code>onblur<\/code>, and it does not interfere with the screen reader reading elsewhere on the page.<\/p>\n<div style=\"height: 65px; overflow: hidden;\">\n<div id=\"h5p-73\">\n<div class=\"h5p-content\" data-content-id=\"73\"><\/div>\n<\/div>\n<\/div>\n<p><!--https:\/\/pastebin.com\/embed_iframe\/u0KCjM0p\/noheader --><\/p>\n<p>Hide the active slide from screen readers with <code>aria-hidden=\"true\"<\/code>. Then, make the next slide visible to screen readers with <code>aria-hidden=\"false\"<\/code>\u00a0in the <code>gotoSlide<\/code> function.<\/p>\n<div style=\"height: 285px; overflow: hidden;\">\n<div id=\"h5p-74\">\n<div class=\"h5p-content\" data-content-id=\"74\"><\/div>\n<\/div>\n<\/div>\n<p><!--https:\/\/pastebin.com\/embed_iframe\/CTN3WWq7\/noheader --><\/p>\n<h2>Adding Keyboard Operability<\/h2>\n<p>Add keyboard operations for the carousel, pulling keyboard events from ik_utils.js to use Left and Right arrows for moving between panels in the carousel, and the Esc key to exit the carousel and resume automatic rotation.<\/p>\n<div style=\"height: 570px; overflow: hidden;\">\n<div id=\"h5p-75\">\n<div class=\"h5p-content\" data-content-id=\"75\"><\/div>\n<\/div>\n<\/div>\n<p><!--https:\/\/pastebin.com\/embed_iframe\/S1FxX48y\/noheader --><\/p>\n<h2>Accessible Carousel in Action<\/h2>\n<p>Watch the following video to see how ChromeVox interacts with a carousel. The carousel rotates automatically when focus is elsewhere on the page. When it receives focus, rotation stops, and navigation instructions are read. The Left and Right arrow keys are used to move manually between panels in the carousel while it has focus. The contents of each panel are read through a live region, dynamically added to the main container <code>&lt;div&gt;<\/code> when the carousel has focus. Using the Tab key while the carousel has focus sends focus to any focusable element within the panel that is in view, a link to the person who shared the photo in this case. Aim to have the carousel 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=oqY-iMIW2sQ\" rel=\"noopener\">Accessible Carousel<\/a><\/strong><\/p>\n<p><iframe loading=\"lazy\" id=\"oembed-1\" title=\"Accessible Carousel\" width=\"500\" height=\"281\" src=\"https:\/\/www.youtube.com\/embed\/oqY-iMIW2sQ?feature=oembed&#38;rel=0\" frameborder=\"0\" allowfullscreen=\"allowfullscreen\"><\/iframe><\/p>\n","protected":false},"author":100,"menu_order":8,"template":"","meta":{"pb_show_title":"on","pb_short_title":"","pb_subtitle":"","pb_authors":[],"pb_section_license":""},"chapter-type":[],"contributor":[],"license":[],"class_list":["post-362","chapter","type-chapter","status-publish","hentry"],"part":35,"_links":{"self":[{"href":"https:\/\/pressbooks.library.torontomu.ca\/wafd\/wp-json\/pressbooks\/v2\/chapters\/362","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":32,"href":"https:\/\/pressbooks.library.torontomu.ca\/wafd\/wp-json\/pressbooks\/v2\/chapters\/362\/revisions"}],"predecessor-version":[{"id":2022,"href":"https:\/\/pressbooks.library.torontomu.ca\/wafd\/wp-json\/pressbooks\/v2\/chapters\/362\/revisions\/2022"}],"part":[{"href":"https:\/\/pressbooks.library.torontomu.ca\/wafd\/wp-json\/pressbooks\/v2\/parts\/35"}],"metadata":[{"href":"https:\/\/pressbooks.library.torontomu.ca\/wafd\/wp-json\/pressbooks\/v2\/chapters\/362\/metadata\/"}],"wp:attachment":[{"href":"https:\/\/pressbooks.library.torontomu.ca\/wafd\/wp-json\/wp\/v2\/media?parent=362"}],"wp:term":[{"taxonomy":"chapter-type","embeddable":true,"href":"https:\/\/pressbooks.library.torontomu.ca\/wafd\/wp-json\/pressbooks\/v2\/chapter-type?post=362"},{"taxonomy":"contributor","embeddable":true,"href":"https:\/\/pressbooks.library.torontomu.ca\/wafd\/wp-json\/wp\/v2\/contributor?post=362"},{"taxonomy":"license","embeddable":true,"href":"https:\/\/pressbooks.library.torontomu.ca\/wafd\/wp-json\/wp\/v2\/license?post=362"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}