Accordions enable users to open and close sections of page content.
When to use an accordion component:
When not to use an accordion component:
Content creators should be able to decide if one or more of an accordion's sections are open in its default state. Note that a Show One Accordion could not have more than one section open, by default.
The arrow of an accordion section points toward the current location of that section's content. When the section is closed, the arrow points to the right to indicate that the content is hidden within the link/heading. When an accordion section is open, the arrow points down at the exposed content.
Users can select anywhere on the row of an accordion link/heading to toggle that section open and closed.
When the user selects a "Show More" link option, it retains its position at the end of the content that's revealed, and is replaced with "Show Less".
Title case, 2-3 words maximum.
Do not combine actions in a label (exception: "Customize & Buy").
If standard labels don't fit the button's purpose, align label with the task the user is attempting.
Please refer to the Dell Technologies branding website, https://brand.delltechnologies.com/faq/#voice, for further information regarding call-to-action labels and usage.
To be determined.
Accordion buttons and their associated content should be set up in an unstructured list. This enables a visually impaired user to know how many accordion elements there are.
Place an aria-label on the ul tag to let users know that they're dealing with an accordion. (The aria-label is set to ‘Accordion Control Button Group’).
The region role should be applied to the div to create a landmark region that contains the currently expanded accordion panel.
aria-labelledby defines the accessible name for the region element. It also references the accordion header button that expands and collapses the region. Region elements are required to have an accessible name to be identified as a landmark.
Role region is especially helpful to the perception of structure by screen reader users when panels contain heading elements or a nested accordion.
Avoid using the region role in circumstances that create landmark region proliferation (e.g., in an accordion that contains more than approximately 6 panels that can be expanded at the same time).
A button should be used for triggering an accordion section so it can be navigated by keyboard users via the <tab> button, and so it's accessible to screen readers.
Each accordion button should have a unique id associated with its aria-controls (each button controls this particular id, which references the hidden content beneath it).
Each button should have an aria-expanded attribute. The attribute aria-expanded='true' when the associated content is shown, and ='false' when the content is hidden.
Every content area should have an id that corresponds to the aria-controls for each button.
Each content area has an aria-hidden attribute that is toggled between true or false. When true, the content is neither visible nor perceivable by screen reader, and assistive technologies will skip this content.