Setting the Heading Level for an Accordion

We've added new functionality to improve the accessibility of content added to an Accordion. This guide explains what is new and how to use it.
﻿
Table of contents
Background Context
Why use a Heading in an Accordion?
Add an Accordion to your page
Locate the Heading Level Dropdown Menu
Adjust Heading Settings
Default
Heading 2 and Heading 3
Background ContextThis update improves the accessibility structure of Accordions behind the scenes by helping users who utilize screen-reading technology access your content more easily. There are no changes to the front-end visual appearance. 
You've taken the  Digital Accessibility training⁠ , so you already know the importance of  headings and structure . You can now set the "Summary" (title) of an Accordion as a Heading 2 or Heading 3. 
Why use a Heading in an Accordion?There are times when the "summary," or title, of your accordion is a heading and should be labeled as such. H&S Drupal sites now offer the ability to label Accordions as headings. Depending on where the Accordion is placed in your page hierarchy, you can select heading level 2 or 3.  
Using FAQ as an example, if you style your FAQ in a Text Area, questions would be marked as headings, and answers would be normal text. It would look something like this on an H&S web page:
﻿
Webpage showing how FAQ would be styled in a text area. The questions are marked as Heading 2, and the answers are normal text. Webpage showing how FAQ would be styled in a text area. The questions are marked as Heading 2, and the answers are normal text. 
Adding headings to Accordions serves the same purpose for users with visual disabilities. It allows them to skip from heading to heading, rather than listening to each question and answer along the way.
The remainder of this guide walks you through the steps to make these selections.
Add an Accordion to your pageTo add an accordion, click the "Add Component" button in the main area. 
﻿
The module to add a Component to a Flexible Page. The button for "Add Component" is outlined to highlight its location in the bottom left corner of the editing page.The module to add a Component to a Flexible Page. The button for "Add Component" is outlined to highlight its location in the bottom left corner of the editing page.
From the popup menu, select Add Accordion.
﻿
Screenshot of the menu that opens after choosing "add component." Accordion is highlighted to show its location.Screenshot of the menu that opens after choosing "add component." Accordion is highlighted to show its location.
Locate the Heading Level Dropdown MenuThere is now a dropdown menu for "Summary Heading Level." This will set the heading level for the "Summary" section of your accordion, which is the portion that is always shown regardless of whether the Accordion is expanded or collapsed. 
﻿
Screenshot of the interface to add an accordion. The newest option, summary heading level, can be found between the line to enter the Summary and the box to enter body text.Screenshot of the interface to add an accordion. The newest option, summary heading level, can be found between the line to enter the Summary and the box to enter body text.
Adjust Heading SettingsThe dropdown menu contains three options: Default, Heading 2, Heading 3. 
﻿
Screenshot of the interface to add an accordion. The newest option, summary heading level, includes options for "Default," "Heading 2," and "Heading 3."Screenshot of the interface to add an accordion. The newest option, summary heading level, includes options for "Default," "Heading 2," and "Heading 3."
Default The summary heading level setting defaults to "Default," which means it will not be marked as a heading. Instead, it will be marked as normal text. Keep this option if you do not require a heading.
All Accordions added before the release of this new functionality are automatically marked as "Default."
Heading 2 and Heading 3If your summary should be marked as a heading, this is where you do so. You can select Heading 2 or Heading 3 when the title/summary of your accordion should be marked as a Heading level 2 or 3, respectively. There won't be a change in the Accordion's appearance, but screen-reading software will be better able to navigate the content.
Remember, Color Bands act as Heading 2s. If you insert an accordion after a Color Band, and that Accordion should have a heading, you'll want to use H3. All subsequent Accordions in that section should also be marked H3.
﻿
Webpage showing a Color Band as a heading 2, followed by 3 FAQ. Each FAQ title is marked as a heading 3 to maintain the hierarchy of the page.Webpage showing a Color Band as a heading 2, followed by 3 FAQ. Each FAQ title is marked as a heading 3 to maintain the hierarchy of the page.
﻿
﻿
﻿
﻿