{"id":353,"date":"2018-12-10T17:11:03","date_gmt":"2018-12-10T17:11:03","guid":{"rendered":"https:\/\/pressbooks.library.ryerson.ca\/wafd\/?post_type=chapter&#038;p=353"},"modified":"2022-12-16T17:11:21","modified_gmt":"2022-12-16T17:11:21","slug":"accordions","status":"publish","type":"chapter","link":"https:\/\/pressbooks.library.torontomu.ca\/wafd\/chapter\/accordions\/","title":{"raw":"Accordions","rendered":"Accordions"},"content":{"raw":"Accordion widgets can come in single or multi-select formats, in which one or multiple panels can be opened at once, respectively. They are typically used to reduce the space that content occupies and to reduce scrolling. Accordions are made up of <strong>Accordion Headers<\/strong> and<strong> Accordion<\/strong> <strong>Panels. <\/strong>The accordion headers control the display of their associated accordion panel.\r\n<div class=\"textbox\">\r\n\r\n<strong>The WAI-ARIA roles, states, and properties used in an accordion<\/strong>\r\n\r\n<code><code><code><\/code><\/code><\/code>\r\n\r\n<code><code><code><\/code><\/code><\/code>\r\n<ul>\r\n \t<li>aria-multiselectable =\"(true | false)\"<\/li>\r\n \t<li>role=\"heading\"<\/li>\r\n \t<li>role=\"button\"<\/li>\r\n \t<li>aria-controls=\"[panel id]\"<\/li>\r\n \t<li>tabindex=\"0\"<\/li>\r\n \t<li>role=\"region\"<\/li>\r\n \t<li>aria-hidden= \"(true | false)\"<\/li>\r\n \t<li>aria-expanded= \"(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 details on constructing accessible accordions, refer to: <a href=\"https:\/\/www.w3.org\/WAI\/ARIA\/apg\/patterns\/accordion\/\">ARIA Authoring Practices Guide: Accordion<\/a><\/div>\r\nThe following JSFiddle presents a typical accordion widget. Review the JavaScript and HTML markup. Test the accordion 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\u00a0 \u201cEdit in JSFiddle\u201d, copying 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-5-activity-9-accessible-accordion\/\">Activity 9<\/a> on the page that follows.\r\n<div style=\"height: 600px; overflow: hidden;\">[h5p id=\"47\"]<\/div>\r\nFirst, add the accordion to the landmarked regions by assigning <code>role=\"region\"<\/code> to the opening <code> &lt;DL&gt;<\/code> element when the accordion is initialized, adding the region role to the <code>init()<\/code> function.\r\n<div style=\"height: 90px; overflow: hidden;\">[h5p id=\"48\"]<\/div>\r\nNext, add the <code>aria-multiselectable<\/code> attribute to the <code> &lt;DL&gt;<\/code>, which will\u00a0 be dynamically set to true or false based on plugin configuration settings. This lets a user know that more than one accordion panel can be opened when set to TRUE or only a single panel when set to FALSE. Refer to the <code>$(document).ready<\/code> block in the HTML, where the assignment takes place.\r\n<div style=\"height: 45px; overflow: hidden;\">[h5p id=\"49\"]<\/div>\r\nThe semantics of the children of the <code> &lt;DL&gt;<\/code> element, which was assigned <code>role=\"presentation\"<\/code>, will also have their definition list semantics removed. Add the accordion semantics <code>role=\"heading\"<\/code> to assign a heading role to the <code> &lt;DT&gt;<\/code> elements. The <code>aria-level<\/code> attribute might be used to implement nested accordion panels, but for our purpose here a simplified version is sufficient.\r\n<div style=\"height: 75px; overflow: hidden;\">[h5p id=\"50\"]<\/div>\r\nAdd a <code>&lt;div&gt;<\/code> inside the header (i.e., <code>DT<\/code>) and define its <code>role<\/code> as a button. The button is given an <code>aria-controls<\/code> attribute to define which of the accordion panels it controls. By default the toggle state is set to false with <code>aria-expanded=\"false\"<\/code> to be updated dynamically when the button is clicked or key pressed. Finally add <code>tabindex=\"0\"<\/code> to the button (<code>&lt;div&gt;<\/code>) to make it keyboard focusable.\r\n<div style=\"height: 180px; overflow: hidden;\">[h5p id=\"51\"]<\/div>\r\nThe tabindex will make the button focusable, but it will not make it clickable. The <code>.on()<\/code> jQuery function adds a click event to the button, but a keypress event must also be added. Adding <code>.on('keydown')<\/code> activates the <code>onKeyDown<\/code> function, defined below, so the accordion headers operate with both a mouse click and a keypress.\r\n<div style=\"height: 145px; overflow: hidden;\">[h5p id=\"52\"]<\/div>\r\nIn the <code>togglePanel()<\/code> function, before <code>autoCollapse()<\/code>, add in the toggle to add and update the <code>aria-expanded<\/code> attribute for the panel headers, based on whether the associated panel is visible or not.\r\n<div style=\"height: 250px; overflow: hidden;\">[h5p id=\"53\"]<\/div>\r\nWithin the <code>autoCollapse()<\/code> function, toggle <code>aria-expanded=\"false\"<\/code>\u00a0and <code>aria-hidden=\"true\"<\/code>\u00a0for all accordion tabs that are not the current one. This ensures only one panel is open at a time.\r\n<div style=\"height: 110px; overflow: hidden;\">[h5p id=\"54\"]<\/div>\r\nFinally, the accordion panel semantics are added, defining the <code>&lt;DD&gt;<\/code> elements that had its semantics removed when <code>role=\"presentation\"<\/code> was added to the parent <code>&lt;DL&gt;<\/code>. Panels are given a generic <code>role=\"region\"<\/code>\u00a0 to make the panel browsable in the landmarks list, set to be hidden by default with <code>aria-hidden=\"true\"<\/code> so all panels are closed when the page loads. Further,\u00a0<code>tabindex=\"0\"<\/code> is also added to make the panels keyboard focusable so the content of the panel is read as the user navigates to them.\r\n<div style=\"height: 210px; overflow: hidden;\">[h5p id=\"55\"]<\/div>\r\n<h2>Adding Keyboard Operability<\/h2>\r\nWAI-ARIA best practices defines all recommended accordion keyboard functionality, listed below. In our example, only the required keyboard events are included.\r\n<div class=\"textbox\">\r\n<h3>Keyboard Interaction for Accordions<\/h3>\r\n<ul>\r\n \t<li>Enter or Space:\r\n<ul>\r\n \t<li>When focus is on the accordion header for a collapsed panel, expands the associated panel. If the implementation allows only one panel to be expanded, and if another panel is expanded, collapses that panel.<\/li>\r\n \t<li>When focus is on the accordion header for an expanded panel, collapses the panel if the implementation supports collapsing. Some implementations require one panel to be expanded at all times and allow only one panel to be expanded; so they do not support a collapse function.<\/li>\r\n<\/ul>\r\n<\/li>\r\n \t<li>Down Arrow (Optional): If focus is on an accordion header, moves focus to the next accordion header. If focus is on the last accordion header, either does nothing or moves focus to the first accordion header.<\/li>\r\n \t<li>Up Arrow (Optional): If focus is on an accordion header, moves focus to the previous accordion header. If focus is on the first accordion header, either does nothing or moves focus to the last accordion header.<\/li>\r\n \t<li>Home (Optional): When focus is on an accordion header, moves focus to the first accordion header.<\/li>\r\n \t<li>End (Optional): When focus is on an accordion header, moves focus to the last accordion header.<\/li>\r\n \t<li>Ctrl+Page Down (Optional): If focus is inside an accordion panel or on an accordion header, moves focus to the next accordion header. If focus is in the last accordion header or panel, either does nothing or moves focus to the first accordion header.<\/li>\r\n \t<li>Ctrl+Page Up (Optional): If focus is inside an accordion panel, moves focus to the header for that panel. If focus is on an accordion header, moves focus to the previous accordion header. If focus is on the first accordion header, either does nothing or moves focus to the last accordion header.<\/li>\r\n<\/ul>\r\n<a href=\"https:\/\/www.w3.org\/WAI\/ARIA\/apg\/patterns\/accordion\/#keyboard-interaction\">Source: ARIA Authoring Practices Guide: Accordion<\/a>\r\n\r\n<\/div>\r\nThe following <code>onKeyDown<\/code> function has been created to add keyboard operability to the header elements of the accordion, allowing both Space bar and Enter keys to operate the toggles (i.e., headers) that open and close panels, and the Arrow keys to move between the accordion headers. By default, users can navigate between headers, and between headers and panels using the Tab key.\r\n<div style=\"height: 1000px; overflow: hidden;\">[h5p id=\"56\"]<\/div>\r\n<h3>Accessible Accordion in Action<\/h3>\r\nWatch the following video to see how ChromeVox interacts with an accordion. The Tab key is used to navigate into the accordions, move between accordion headers, and move between accordion headers and panels. Arrow keys can also be used to move between accordion headers, but not from headers to an associated panel. Aim to have the accordion 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=LPLx15F9Pqk\" rel=\"noopener\">Accessible Accordions<\/a><\/strong>\r\n\r\n[embed]https:\/\/www.youtube.com\/embed\/LPLx15F9Pqk[\/embed]","rendered":"<p>Accordion widgets can come in single or multi-select formats, in which one or multiple panels can be opened at once, respectively. They are typically used to reduce the space that content occupies and to reduce scrolling. Accordions are made up of <strong>Accordion Headers<\/strong> and<strong> Accordion<\/strong> <strong>Panels. <\/strong>The accordion headers control the display of their associated accordion panel.<\/p>\n<div class=\"textbox\">\n<p><strong>The WAI-ARIA roles, states, and properties used in an accordion<\/strong><\/p>\n<p><code><code><code><\/code><\/code><\/code><\/p>\n<p><code><code><code><\/code><\/code><\/code><\/p>\n<ul>\n<li>aria-multiselectable =&#8221;(true | false)&#8221;<\/li>\n<li>role=&#8221;heading&#8221;<\/li>\n<li>role=&#8221;button&#8221;<\/li>\n<li>aria-controls=&#8221;[panel id]&#8221;<\/li>\n<li>tabindex=&#8221;0&#8243;<\/li>\n<li>role=&#8221;region&#8221;<\/li>\n<li>aria-hidden= &#8220;(true | false)&#8221;<\/li>\n<li>aria-expanded= &#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 details on constructing accessible accordions, refer to: <a href=\"https:\/\/www.w3.org\/WAI\/ARIA\/apg\/patterns\/accordion\/\">ARIA Authoring Practices Guide: Accordion<\/a><\/div>\n<p>The following JSFiddle presents a typical accordion widget. Review the JavaScript and HTML markup. Test the accordion 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\u00a0 \u201cEdit in JSFiddle\u201d, copying 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-5-activity-9-accessible-accordion\/\">Activity 9<\/a> on the page that follows.<\/p>\n<div style=\"height: 600px; overflow: hidden;\">\n<div id=\"h5p-47\">\n<div class=\"h5p-content\" data-content-id=\"47\"><\/div>\n<\/div>\n<\/div>\n<p>First, add the accordion to the landmarked regions by assigning <code>role=\"region\"<\/code> to the opening <code> &lt;DL&gt;<\/code> element when the accordion is initialized, adding the region role to the <code>init()<\/code> function.<\/p>\n<div style=\"height: 90px; overflow: hidden;\">\n<div id=\"h5p-48\">\n<div class=\"h5p-content\" data-content-id=\"48\"><\/div>\n<\/div>\n<\/div>\n<p>Next, add the <code>aria-multiselectable<\/code> attribute to the <code> &lt;DL&gt;<\/code>, which will\u00a0 be dynamically set to true or false based on plugin configuration settings. This lets a user know that more than one accordion panel can be opened when set to TRUE or only a single panel when set to FALSE. Refer to the <code>$(document).ready<\/code> block in the HTML, where the assignment takes place.<\/p>\n<div style=\"height: 45px; overflow: hidden;\">\n<div id=\"h5p-49\">\n<div class=\"h5p-content\" data-content-id=\"49\"><\/div>\n<\/div>\n<\/div>\n<p>The semantics of the children of the <code> &lt;DL&gt;<\/code> element, which was assigned <code>role=\"presentation\"<\/code>, will also have their definition list semantics removed. Add the accordion semantics <code>role=\"heading\"<\/code> to assign a heading role to the <code> &lt;DT&gt;<\/code> elements. The <code>aria-level<\/code> attribute might be used to implement nested accordion panels, but for our purpose here a simplified version is sufficient.<\/p>\n<div style=\"height: 75px; overflow: hidden;\">\n<div id=\"h5p-50\">\n<div class=\"h5p-content\" data-content-id=\"50\"><\/div>\n<\/div>\n<\/div>\n<p>Add a <code>&lt;div&gt;<\/code> inside the header (i.e., <code>DT<\/code>) and define its <code>role<\/code> as a button. The button is given an <code>aria-controls<\/code> attribute to define which of the accordion panels it controls. By default the toggle state is set to false with <code>aria-expanded=\"false\"<\/code> to be updated dynamically when the button is clicked or key pressed. Finally add <code>tabindex=\"0\"<\/code> to the button (<code>&lt;div&gt;<\/code>) to make it keyboard focusable.<\/p>\n<div style=\"height: 180px; overflow: hidden;\">\n<div id=\"h5p-51\">\n<div class=\"h5p-content\" data-content-id=\"51\"><\/div>\n<\/div>\n<\/div>\n<p>The tabindex will make the button focusable, but it will not make it clickable. The <code>.on()<\/code> jQuery function adds a click event to the button, but a keypress event must also be added. Adding <code>.on('keydown')<\/code> activates the <code>onKeyDown<\/code> function, defined below, so the accordion headers operate with both a mouse click and a keypress.<\/p>\n<div style=\"height: 145px; overflow: hidden;\">\n<div id=\"h5p-52\">\n<div class=\"h5p-content\" data-content-id=\"52\"><\/div>\n<\/div>\n<\/div>\n<p>In the <code>togglePanel()<\/code> function, before <code>autoCollapse()<\/code>, add in the toggle to add and update the <code>aria-expanded<\/code> attribute for the panel headers, based on whether the associated panel is visible or not.<\/p>\n<div style=\"height: 250px; overflow: hidden;\">\n<div id=\"h5p-53\">\n<div class=\"h5p-content\" data-content-id=\"53\"><\/div>\n<\/div>\n<\/div>\n<p>Within the <code>autoCollapse()<\/code> function, toggle <code>aria-expanded=\"false\"<\/code>\u00a0and <code>aria-hidden=\"true\"<\/code>\u00a0for all accordion tabs that are not the current one. This ensures only one panel is open at a time.<\/p>\n<div style=\"height: 110px; overflow: hidden;\">\n<div id=\"h5p-54\">\n<div class=\"h5p-content\" data-content-id=\"54\"><\/div>\n<\/div>\n<\/div>\n<p>Finally, the accordion panel semantics are added, defining the <code>&lt;DD&gt;<\/code> elements that had its semantics removed when <code>role=\"presentation\"<\/code> was added to the parent <code>&lt;DL&gt;<\/code>. Panels are given a generic <code>role=\"region\"<\/code>\u00a0 to make the panel browsable in the landmarks list, set to be hidden by default with <code>aria-hidden=\"true\"<\/code> so all panels are closed when the page loads. Further,\u00a0<code>tabindex=\"0\"<\/code> is also added to make the panels keyboard focusable so the content of the panel is read as the user navigates to them.<\/p>\n<div style=\"height: 210px; overflow: hidden;\">\n<div id=\"h5p-55\">\n<div class=\"h5p-content\" data-content-id=\"55\"><\/div>\n<\/div>\n<\/div>\n<h2>Adding Keyboard Operability<\/h2>\n<p>WAI-ARIA best practices defines all recommended accordion keyboard functionality, listed below. In our example, only the required keyboard events are included.<\/p>\n<div class=\"textbox\">\n<h3>Keyboard Interaction for Accordions<\/h3>\n<ul>\n<li>Enter or Space:\n<ul>\n<li>When focus is on the accordion header for a collapsed panel, expands the associated panel. If the implementation allows only one panel to be expanded, and if another panel is expanded, collapses that panel.<\/li>\n<li>When focus is on the accordion header for an expanded panel, collapses the panel if the implementation supports collapsing. Some implementations require one panel to be expanded at all times and allow only one panel to be expanded; so they do not support a collapse function.<\/li>\n<\/ul>\n<\/li>\n<li>Down Arrow (Optional): If focus is on an accordion header, moves focus to the next accordion header. If focus is on the last accordion header, either does nothing or moves focus to the first accordion header.<\/li>\n<li>Up Arrow (Optional): If focus is on an accordion header, moves focus to the previous accordion header. If focus is on the first accordion header, either does nothing or moves focus to the last accordion header.<\/li>\n<li>Home (Optional): When focus is on an accordion header, moves focus to the first accordion header.<\/li>\n<li>End (Optional): When focus is on an accordion header, moves focus to the last accordion header.<\/li>\n<li>Ctrl+Page Down (Optional): If focus is inside an accordion panel or on an accordion header, moves focus to the next accordion header. If focus is in the last accordion header or panel, either does nothing or moves focus to the first accordion header.<\/li>\n<li>Ctrl+Page Up (Optional): If focus is inside an accordion panel, moves focus to the header for that panel. If focus is on an accordion header, moves focus to the previous accordion header. If focus is on the first accordion header, either does nothing or moves focus to the last accordion header.<\/li>\n<\/ul>\n<p><a href=\"https:\/\/www.w3.org\/WAI\/ARIA\/apg\/patterns\/accordion\/#keyboard-interaction\">Source: ARIA Authoring Practices Guide: Accordion<\/a><\/p>\n<\/div>\n<p>The following <code>onKeyDown<\/code> function has been created to add keyboard operability to the header elements of the accordion, allowing both Space bar and Enter keys to operate the toggles (i.e., headers) that open and close panels, and the Arrow keys to move between the accordion headers. By default, users can navigate between headers, and between headers and panels using the Tab key.<\/p>\n<div style=\"height: 1000px; overflow: hidden;\">\n<div id=\"h5p-56\">\n<div class=\"h5p-content\" data-content-id=\"56\"><\/div>\n<\/div>\n<\/div>\n<h3>Accessible Accordion in Action<\/h3>\n<p>Watch the following video to see how ChromeVox interacts with an accordion. The Tab key is used to navigate into the accordions, move between accordion headers, and move between accordion headers and panels. Arrow keys can also be used to move between accordion headers, but not from headers to an associated panel. Aim to have the accordion 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=LPLx15F9Pqk\" rel=\"noopener\">Accessible Accordions<\/a><\/strong><\/p>\n<p><iframe loading=\"lazy\" id=\"oembed-1\" title=\"Accessible Accordions\" width=\"500\" height=\"281\" src=\"https:\/\/www.youtube.com\/embed\/LPLx15F9Pqk?feature=oembed&#38;rel=0\" frameborder=\"0\" allowfullscreen=\"allowfullscreen\"><\/iframe><\/p>\n","protected":false},"author":100,"menu_order":4,"template":"","meta":{"pb_show_title":"on","pb_short_title":"","pb_subtitle":"","pb_authors":[],"pb_section_license":""},"chapter-type":[],"contributor":[],"license":[],"class_list":["post-353","chapter","type-chapter","status-publish","hentry"],"part":35,"_links":{"self":[{"href":"https:\/\/pressbooks.library.torontomu.ca\/wafd\/wp-json\/pressbooks\/v2\/chapters\/353","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":43,"href":"https:\/\/pressbooks.library.torontomu.ca\/wafd\/wp-json\/pressbooks\/v2\/chapters\/353\/revisions"}],"predecessor-version":[{"id":2016,"href":"https:\/\/pressbooks.library.torontomu.ca\/wafd\/wp-json\/pressbooks\/v2\/chapters\/353\/revisions\/2016"}],"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\/353\/metadata\/"}],"wp:attachment":[{"href":"https:\/\/pressbooks.library.torontomu.ca\/wafd\/wp-json\/wp\/v2\/media?parent=353"}],"wp:term":[{"taxonomy":"chapter-type","embeddable":true,"href":"https:\/\/pressbooks.library.torontomu.ca\/wafd\/wp-json\/pressbooks\/v2\/chapter-type?post=353"},{"taxonomy":"contributor","embeddable":true,"href":"https:\/\/pressbooks.library.torontomu.ca\/wafd\/wp-json\/wp\/v2\/contributor?post=353"},{"taxonomy":"license","embeddable":true,"href":"https:\/\/pressbooks.library.torontomu.ca\/wafd\/wp-json\/wp\/v2\/license?post=353"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}