Availability of content tree items to assistive technology requires the use of aria-controls and toggling aria-expanded as regions are expanded and collapsed.
The name of each item should include the attribute role="button".
Each tree item button is wrapped in an element with role heading that has a value set for aria-level that is appropriate for the information architecture of the page.
If the native host language has an element with an implicit heading and aria-level, such as an HTML heading tag, a native host language element may be used.
The button element is the only element inside the heading element. That is, if there are other visually persistent elements, they are not included inside the heading element.
If the accordion panel associated with an accordion header is visible, the header button element has aria-expanded set to true. If the panel is not visible, aria-expanded is set to false.
The accordion header button element has aria-controls set to the ID of the element containing the accordion panel content.
“Enter” or “Space” key should expand and collapse items. “Arrow” keys move focus to the next focusable element; tabbing allows the user to move to the main content on the page, and should not navigate through the content tree allowing the user to skip it.
Avoid keyboard traps when adding components to the content tree. For example, the user expands a section, but is unable to navigate to the next focusable element or to tab out of the content tree panel.
Although the content tree element passes accessibility testing, content authors are responsible for ensuring the content in the content tree is accessible.
