{"id":357,"date":"2018-12-10T17:14:29","date_gmt":"2018-12-10T17:14:29","guid":{"rendered":"https:\/\/pressbooks.library.ryerson.ca\/wafd\/?post_type=chapter&#038;p=357"},"modified":"2022-12-16T17:12:59","modified_gmt":"2022-12-16T17:12:59","slug":"tab-panels","status":"publish","type":"chapter","link":"https:\/\/pressbooks.library.torontomu.ca\/wafd\/chapter\/tab-panels\/","title":{"raw":"Tab Panels","rendered":"Tab Panels"},"content":{"raw":"Tab panels, much like accordions, are often used to conserve space and reduce scrolling. They are typically made up of a tablist that contains a series of tabs, each tab controlling the display of a panel. As each tab is activated, its associated panel is displayed and other panels are hidden. When a tab is selected, it is highlighted to indicate which tab and panel are active.\r\n<div class=\"textbox\">\r\n\r\n<strong>WAI-ARIA roles, states, and properties used in a tab panel<\/strong>\r\n\r\n<code><code><code><\/code><\/code><\/code>\r\n<ul>\r\n \t<li>role=\"tablist\"<\/li>\r\n \t<li>role=\"tabpanel\"<\/li>\r\n \t<li>role=\"tab\"<\/li>\r\n \t<li>aria-hidden=\"[true|false]\"<\/li>\r\n \t<li>tabindex = [0 | -1]<\/li>\r\n \t<li>aria-controls=\"[panel id]\"<\/li>\r\n \t<li>aria-selected=\"[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>Additional information about <a href=\"https:\/\/www.w3.org\/WAI\/ARIA\/apg\/patterns\/tabpanel\/\">creating accessible tab panels<\/a> can be found in the WAI-ARIA Authoring Practices.<\/div>\r\nThe following JSFiddle presents a typical tab panel widget. Review the JavaScript and HTML markup. Test the tab panel 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 tab panel before completing <a href=\"https:\/\/pressbooks.library.torontomu.ca\/wafd\/chapter\/5-7-activity-10-accessible-tab-panel\/\">Activity 10<\/a>\u00a0on the page that follows.\r\n<div style=\"height: 600px; overflow: hidden;\">[h5p id=\"57\"]<\/div>\r\nIn our case, we are generating the tabs for each child <code>&lt;div&gt;<\/code> defined in the HTML, though tabs and tab panels could be static HTML. The tablist is made up of a <code>&lt;ul&gt;<\/code> and child <code>&lt;li&gt;<\/code> elements. We assign <code>role=\"tablist\"<\/code> to the <code>&lt;ul&gt;<\/code> to remove its list semantics and replace it with tab panel semantics.\r\n<div style=\"height: 145px; overflow: hidden;\">[h5p id=\"58\"]<\/div>\r\n<!--https:\/\/pastebin.com\/embed_iframe\/tyH0BGDb\/noheader-->\r\n\r\nNext, we add WAI-ARIA to the panels, assigning <code>role=\"tabpanel\"<\/code> to each of the original <code>&lt;div&gt;<\/code> elements, hide them by default with <code>aria-hidden=\"true\"<\/code>, and finally adding <code>tabindex=\"0\"<\/code> to make the panels keyboard focusable.\r\n<div style=\"height: 185px; overflow: hidden;\">[h5p id=\"59\"]<\/div>\r\n<!--https:\/\/pastebin.com\/embed_iframe\/5JZfN7us\/noheader-->\r\n\r\nThe tabs themselves are now defined, replacing the list item semantics with tab semantics adding <code>role=\"tab\"<\/code> to each of the <code>&lt;li&gt;<\/code> elements generated. We also need to define which tab controls which tabpanel, dynamically generating <code>aria-controls=\"[panel_id]\"<\/code> for each of the tabs.\r\n<div style=\"height: 200px; overflow: hidden;\">[h5p id=\"60\"]<\/div>\r\n<!--https:\/\/pastebin.com\/embed_iframe\/pQUkwesA\/noheader-->\r\n\r\nWhen a tab is selected, we want to remove selection from other tabs with <code>aria-selected=\"false\"<\/code>, and remove keyboard access temporarily by assigning <code>tabindex=\"-1\"<\/code> to the unselected tabs, so that that tabpanel becomes next in the tab order, and users can navigate directly from the tab to the panel without having to pass through the other tabs in the tablist.\r\n<div style=\"height: 190px; overflow: hidden;\">[h5p id=\"61\"]<\/div>\r\n<!--https:\/\/pastebin.com\/embed_iframe\/GXMgqh6s\/noheader-->\r\n\r\nLikewise, when a tab is selected we assign <code>aria-selected=\"true\"<\/code> so screen readers announce the selected tab, we add <code>tabindex=\"0\"<\/code> as the roving tabindex to make that tab focusable.\r\n<div style=\"height: 155px; overflow: hidden;\">[h5p id=\"62\"]<\/div>\r\n<!--https:\/\/pastebin.com\/embed_iframe\/2YmDaiNf\/noheader-->\r\n\r\nAs the tabs change, hide all the panels with <code>aria-hidden=\"true\"<\/code> so screen readers do not see them, then open the panel the current tab controls with <code>aria-hidden=\"false\"<\/code> so screen readers can see the active panel. These are added to the end of the <code>selectTab()<\/code> function.\r\n<div style=\"height: 270px; overflow: hidden;\">[h5p id=\"63\"]<\/div>\r\n<!--https:\/\/pastebin.com\/embed_iframe\/itQTZn3J\/noheader-->\r\n<h2>Adding Keyboard Operability<\/h2>\r\nW3C describes authoring practices for tab panel keyboard interactions as follows.\r\n<div class=\"textbox\">\r\n<h3>Keyboard Interaction for Tab Panels<\/h3>\r\nFor the tab list:\r\n<ul>\r\n \t<li>Tab: When focus moves into the tab list, places focus on the active <code>tab<\/code> element. When the tab list contains the focus, moves focus to the next element in the page tab sequence outside the tablist, which is typically either the first focusable element inside the tab panel or the tab panel itself.<\/li>\r\n \t<li>When focus is on a tab element in a horizontal tab list:\r\n<ul>\r\n \t<li>Left Arrow: moves focus to the previous tab. If focus is on the first tab, moves focus to the last tab. Optionally, activates the newly focused tab (See note below).<\/li>\r\n \t<li>Right Arrow: Moves focus to the next tab. If focus is on the last tab element, moves focus to the first tab. Optionally, activates the newly focused tab (See note below).<\/li>\r\n<\/ul>\r\n<\/li>\r\n \t<li>When focus is on a tab in a tablist with either horizontal or vertical orientation:\r\n<ul>\r\n \t<li>Space or Enter: Activates the tab if it was not activated automatically on focus.<\/li>\r\n \t<li>Home (Optional): Moves focus to the first tab<\/li>\r\n \t<li>End (Optional): Moves focus to the last tab.<\/li>\r\n \t<li>Shift + F10: If the tab has an associated pop-up menu, opens the menu.<\/li>\r\n \t<li>Delete (Optional): If deletion is allowed, deletes (closes) the current tab element and its associated tab panel. If any tabs remain, sets focus to the tab following the tab that was closed and activates the newly focused tab. Alternatively, or in addition, the delete function is available in a context menu.<\/li>\r\n<\/ul>\r\n<\/li>\r\n<\/ul>\r\n<div style=\"margin: 1em 0; padding: 1em; border: 1px solid #ddd; border-left: 10px solid #3c3;\">\r\n\r\n<strong>Note:<\/strong>\r\n<ol class=\"\">\r\n \t<li>It is recommended that tabs activate automatically when they receive focus as long as their associated tab panels are displayed without noticeable latency. This typically requires tab panel content to be preloaded. Otherwise, automatic activation slows focus movement, which significantly hampers users\u2019 ability to navigate efficiently across the tab list. For additional guidance, see <a class=\"sec-ref\" href=\"https:\/\/www.w3.org\/WAI\/ARIA\/apg\/example-index\/tabs\/tabs-automatic.html\">5.4 Deciding When to Make Selection Automatically Follow Focus<\/a>.<\/li>\r\n \t<li>If the tabs in a tab list are arranged vertically:\r\n<ol>\r\n \t<li>Down Arrow performs as Right Arrow is described above.<\/li>\r\n \t<li>Up Arrow performs as Left Arrow is described above.<\/li>\r\n<\/ol>\r\n<\/li>\r\n \t<li>If the tab list is horizontal, it does not listen for Down Arrow or Up Arrow so those keys can provide their normal browser scrolling functions even when focus is inside the tab list.<\/li>\r\n<\/ol>\r\n<\/div>\r\n<\/div>\r\nAs usual, the tab panel needs to be keyboard operable to be accessible to screen readers. The <code>onKeyDown()<\/code> function is added to the functions, to add arrow key navigation between tabs, and between tabs and panels. Tab navigation and Enter keys are enabled by default and do not need to be defined here.\r\n<div style=\"height: 780px; overflow: hidden;\">[h5p id=\"64\"]<\/div>\r\n<!--https:\/\/pastebin.com\/embed_iframe\/00zDBF4G\/noheader-->\r\n\r\nThe <code>onKeyDown<\/code> function is then added to each tab, referenced with jQuery's <code>.on('keydown')<\/code> function, added to the <code>init()<\/code> function's <code>$tab<\/code> definition.\r\n\r\nNow, with keyboard access and WAI-ARIA added to define the semantics of the tab panel, it should be fully functional for screen readers.\r\n<div style=\"height: 220px; overflow: hidden;\">[h5p id=\"65\"]<\/div>\r\n<!--https:\/\/pastebin.com\/embed_iframe\/JayQe591\/noheader-->\r\n<h3>Accessible Tab Panel in Action<\/h3>\r\nWatch the following video showing ChromeVox interacting with a tab panel. The Tab key is used to navigate into the tab panel and to the first tab. The arrow keys are used to move between tabs and, when on a tab, the Tab key is used to navigate to the associated panel. While on a panel, Shift + Tab is used to return to the tablist. There might also be Up and Down arrows enabled to move between tabs and panels, though we have not enabled them here. Aim to have the tab panel you update in the activity coming up on the next page operate and announce itself like the one in the video.\r\n\r\n<strong>Video: <a href=\"https:\/\/www.youtube.com\/watch?v=xnJNbANCnPc\" rel=\"noopener\">Accessible Tab Panel<\/a><\/strong>\r\n\r\n[embed]https:\/\/www.youtube.com\/embed\/xnJNbANCnPc[\/embed]","rendered":"<p>Tab panels, much like accordions, are often used to conserve space and reduce scrolling. They are typically made up of a tablist that contains a series of tabs, each tab controlling the display of a panel. As each tab is activated, its associated panel is displayed and other panels are hidden. When a tab is selected, it is highlighted to indicate which tab and panel are active.<\/p>\n<div class=\"textbox\">\n<p><strong>WAI-ARIA roles, states, and properties used in a tab panel<\/strong><\/p>\n<p><code><code><code><\/code><\/code><\/code><\/p>\n<ul>\n<li>role=&#8221;tablist&#8221;<\/li>\n<li>role=&#8221;tabpanel&#8221;<\/li>\n<li>role=&#8221;tab&#8221;<\/li>\n<li>aria-hidden=&#8221;[true|false]&#8221;<\/li>\n<li>tabindex = [0 | -1]<\/li>\n<li>aria-controls=&#8221;[panel id]&#8221;<\/li>\n<li>aria-selected=&#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>Additional information about <a href=\"https:\/\/www.w3.org\/WAI\/ARIA\/apg\/patterns\/tabpanel\/\">creating accessible tab panels<\/a> can be found in the WAI-ARIA Authoring Practices.<\/div>\n<p>The following JSFiddle presents a typical tab panel widget. Review the JavaScript and HTML markup. Test the tab panel 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 tab panel before completing <a href=\"https:\/\/pressbooks.library.torontomu.ca\/wafd\/chapter\/5-7-activity-10-accessible-tab-panel\/\">Activity 10<\/a>\u00a0on the page that follows.<\/p>\n<div style=\"height: 600px; overflow: hidden;\">\n<div id=\"h5p-57\">\n<div class=\"h5p-content\" data-content-id=\"57\"><\/div>\n<\/div>\n<\/div>\n<p>In our case, we are generating the tabs for each child <code>&lt;div&gt;<\/code> defined in the HTML, though tabs and tab panels could be static HTML. The tablist is made up of a <code>&lt;ul&gt;<\/code> and child <code>&lt;li&gt;<\/code> elements. We assign <code>role=\"tablist\"<\/code> to the <code>&lt;ul&gt;<\/code> to remove its list semantics and replace it with tab panel semantics.<\/p>\n<div style=\"height: 145px; overflow: hidden;\">\n<div id=\"h5p-58\">\n<div class=\"h5p-content\" data-content-id=\"58\"><\/div>\n<\/div>\n<\/div>\n<p><!--https:\/\/pastebin.com\/embed_iframe\/tyH0BGDb\/noheader --><\/p>\n<p>Next, we add WAI-ARIA to the panels, assigning <code>role=\"tabpanel\"<\/code> to each of the original <code>&lt;div&gt;<\/code> elements, hide them by default with <code>aria-hidden=\"true\"<\/code>, and finally adding <code>tabindex=\"0\"<\/code> to make the panels keyboard focusable.<\/p>\n<div style=\"height: 185px; overflow: hidden;\">\n<div id=\"h5p-59\">\n<div class=\"h5p-content\" data-content-id=\"59\"><\/div>\n<\/div>\n<\/div>\n<p><!--https:\/\/pastebin.com\/embed_iframe\/5JZfN7us\/noheader --><\/p>\n<p>The tabs themselves are now defined, replacing the list item semantics with tab semantics adding <code>role=\"tab\"<\/code> to each of the <code>&lt;li&gt;<\/code> elements generated. We also need to define which tab controls which tabpanel, dynamically generating <code>aria-controls=\"[panel_id]\"<\/code> for each of the tabs.<\/p>\n<div style=\"height: 200px; overflow: hidden;\">\n<div id=\"h5p-60\">\n<div class=\"h5p-content\" data-content-id=\"60\"><\/div>\n<\/div>\n<\/div>\n<p><!--https:\/\/pastebin.com\/embed_iframe\/pQUkwesA\/noheader --><\/p>\n<p>When a tab is selected, we want to remove selection from other tabs with <code>aria-selected=\"false\"<\/code>, and remove keyboard access temporarily by assigning <code>tabindex=\"-1\"<\/code> to the unselected tabs, so that that tabpanel becomes next in the tab order, and users can navigate directly from the tab to the panel without having to pass through the other tabs in the tablist.<\/p>\n<div style=\"height: 190px; overflow: hidden;\">\n<div id=\"h5p-61\">\n<div class=\"h5p-content\" data-content-id=\"61\"><\/div>\n<\/div>\n<\/div>\n<p><!--https:\/\/pastebin.com\/embed_iframe\/GXMgqh6s\/noheader --><\/p>\n<p>Likewise, when a tab is selected we assign <code>aria-selected=\"true\"<\/code> so screen readers announce the selected tab, we add <code>tabindex=\"0\"<\/code> as the roving tabindex to make that tab focusable.<\/p>\n<div style=\"height: 155px; overflow: hidden;\">\n<div id=\"h5p-62\">\n<div class=\"h5p-content\" data-content-id=\"62\"><\/div>\n<\/div>\n<\/div>\n<p><!--https:\/\/pastebin.com\/embed_iframe\/2YmDaiNf\/noheader --><\/p>\n<p>As the tabs change, hide all the panels with <code>aria-hidden=\"true\"<\/code> so screen readers do not see them, then open the panel the current tab controls with <code>aria-hidden=\"false\"<\/code> so screen readers can see the active panel. These are added to the end of the <code>selectTab()<\/code> function.<\/p>\n<div style=\"height: 270px; overflow: hidden;\">\n<div id=\"h5p-63\">\n<div class=\"h5p-content\" data-content-id=\"63\"><\/div>\n<\/div>\n<\/div>\n<p><!--https:\/\/pastebin.com\/embed_iframe\/itQTZn3J\/noheader --><\/p>\n<h2>Adding Keyboard Operability<\/h2>\n<p>W3C describes authoring practices for tab panel keyboard interactions as follows.<\/p>\n<div class=\"textbox\">\n<h3>Keyboard Interaction for Tab Panels<\/h3>\n<p>For the tab list:<\/p>\n<ul>\n<li>Tab: When focus moves into the tab list, places focus on the active <code>tab<\/code> element. When the tab list contains the focus, moves focus to the next element in the page tab sequence outside the tablist, which is typically either the first focusable element inside the tab panel or the tab panel itself.<\/li>\n<li>When focus is on a tab element in a horizontal tab list:\n<ul>\n<li>Left Arrow: moves focus to the previous tab. If focus is on the first tab, moves focus to the last tab. Optionally, activates the newly focused tab (See note below).<\/li>\n<li>Right Arrow: Moves focus to the next tab. If focus is on the last tab element, moves focus to the first tab. Optionally, activates the newly focused tab (See note below).<\/li>\n<\/ul>\n<\/li>\n<li>When focus is on a tab in a tablist with either horizontal or vertical orientation:\n<ul>\n<li>Space or Enter: Activates the tab if it was not activated automatically on focus.<\/li>\n<li>Home (Optional): Moves focus to the first tab<\/li>\n<li>End (Optional): Moves focus to the last tab.<\/li>\n<li>Shift + F10: If the tab has an associated pop-up menu, opens the menu.<\/li>\n<li>Delete (Optional): If deletion is allowed, deletes (closes) the current tab element and its associated tab panel. If any tabs remain, sets focus to the tab following the tab that was closed and activates the newly focused tab. Alternatively, or in addition, the delete function is available in a context menu.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<div style=\"margin: 1em 0; padding: 1em; border: 1px solid #ddd; border-left: 10px solid #3c3;\">\n<p><strong>Note:<\/strong><\/p>\n<ol class=\"\">\n<li>It is recommended that tabs activate automatically when they receive focus as long as their associated tab panels are displayed without noticeable latency. This typically requires tab panel content to be preloaded. Otherwise, automatic activation slows focus movement, which significantly hampers users\u2019 ability to navigate efficiently across the tab list. For additional guidance, see <a class=\"sec-ref\" href=\"https:\/\/www.w3.org\/WAI\/ARIA\/apg\/example-index\/tabs\/tabs-automatic.html\">5.4 Deciding When to Make Selection Automatically Follow Focus<\/a>.<\/li>\n<li>If the tabs in a tab list are arranged vertically:\n<ol>\n<li>Down Arrow performs as Right Arrow is described above.<\/li>\n<li>Up Arrow performs as Left Arrow is described above.<\/li>\n<\/ol>\n<\/li>\n<li>If the tab list is horizontal, it does not listen for Down Arrow or Up Arrow so those keys can provide their normal browser scrolling functions even when focus is inside the tab list.<\/li>\n<\/ol>\n<\/div>\n<\/div>\n<p>As usual, the tab panel needs to be keyboard operable to be accessible to screen readers. The <code>onKeyDown()<\/code> function is added to the functions, to add arrow key navigation between tabs, and between tabs and panels. Tab navigation and Enter keys are enabled by default and do not need to be defined here.<\/p>\n<div style=\"height: 780px; overflow: hidden;\">\n<div id=\"h5p-64\">\n<div class=\"h5p-content\" data-content-id=\"64\"><\/div>\n<\/div>\n<\/div>\n<p><!--https:\/\/pastebin.com\/embed_iframe\/00zDBF4G\/noheader --><\/p>\n<p>The <code>onKeyDown<\/code> function is then added to each tab, referenced with jQuery&#8217;s <code>.on('keydown')<\/code> function, added to the <code>init()<\/code> function&#8217;s <code>$tab<\/code> definition.<\/p>\n<p>Now, with keyboard access and WAI-ARIA added to define the semantics of the tab panel, it should be fully functional for screen readers.<\/p>\n<div style=\"height: 220px; overflow: hidden;\">\n<div id=\"h5p-65\">\n<div class=\"h5p-content\" data-content-id=\"65\"><\/div>\n<\/div>\n<\/div>\n<p><!--https:\/\/pastebin.com\/embed_iframe\/JayQe591\/noheader --><\/p>\n<h3>Accessible Tab Panel in Action<\/h3>\n<p>Watch the following video showing ChromeVox interacting with a tab panel. The Tab key is used to navigate into the tab panel and to the first tab. The arrow keys are used to move between tabs and, when on a tab, the Tab key is used to navigate to the associated panel. While on a panel, Shift + Tab is used to return to the tablist. There might also be Up and Down arrows enabled to move between tabs and panels, though we have not enabled them here. Aim to have the tab panel you update in the activity coming up on the next page operate and announce itself like the one in the video.<\/p>\n<p><strong>Video: <a href=\"https:\/\/www.youtube.com\/watch?v=xnJNbANCnPc\" rel=\"noopener\">Accessible Tab Panel<\/a><\/strong><\/p>\n<p><iframe loading=\"lazy\" id=\"oembed-1\" title=\"Accessible Tab Panel\" width=\"500\" height=\"281\" src=\"https:\/\/www.youtube.com\/embed\/xnJNbANCnPc?feature=oembed&#38;rel=0\" frameborder=\"0\" allowfullscreen=\"allowfullscreen\"><\/iframe><\/p>\n","protected":false},"author":100,"menu_order":6,"template":"","meta":{"pb_show_title":"on","pb_short_title":"","pb_subtitle":"","pb_authors":[],"pb_section_license":""},"chapter-type":[],"contributor":[],"license":[],"class_list":["post-357","chapter","type-chapter","status-publish","hentry"],"part":35,"_links":{"self":[{"href":"https:\/\/pressbooks.library.torontomu.ca\/wafd\/wp-json\/pressbooks\/v2\/chapters\/357","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":38,"href":"https:\/\/pressbooks.library.torontomu.ca\/wafd\/wp-json\/pressbooks\/v2\/chapters\/357\/revisions"}],"predecessor-version":[{"id":2019,"href":"https:\/\/pressbooks.library.torontomu.ca\/wafd\/wp-json\/pressbooks\/v2\/chapters\/357\/revisions\/2019"}],"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\/357\/metadata\/"}],"wp:attachment":[{"href":"https:\/\/pressbooks.library.torontomu.ca\/wafd\/wp-json\/wp\/v2\/media?parent=357"}],"wp:term":[{"taxonomy":"chapter-type","embeddable":true,"href":"https:\/\/pressbooks.library.torontomu.ca\/wafd\/wp-json\/pressbooks\/v2\/chapter-type?post=357"},{"taxonomy":"contributor","embeddable":true,"href":"https:\/\/pressbooks.library.torontomu.ca\/wafd\/wp-json\/wp\/v2\/contributor?post=357"},{"taxonomy":"license","embeddable":true,"href":"https:\/\/pressbooks.library.torontomu.ca\/wafd\/wp-json\/wp\/v2\/license?post=357"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}