Accordion
Sets of vertical headers that reveal or hide subsections of content.
Creating access for everyone, everywhere requires attention to accessibility attributes, best practices, and requirements. Find accessibility guidance below.
Note: Components in each code library are implemented differently (especially Flutter). Many of the behaviors and attributes described are already handled for you as part of our components. Product teams are responsible for ensuring their apps meet all current requirements. Some of the information below may not apply to your implementation.
Best practices
Ensure the following best practices are met when implementing this component during development.
Note: VPDS uses native HTML
- Use descriptive accordion titles that reflect the content within the associated panels.
- Check that the icons in the accordion header use the library’s right-to-left class if needed.
Keyboard controls
Key | Behavior |
---|---|
Tab | Moves focus to the next focusable element. All focusable elements in the accordion section are included in the tab sequence. |
Shift+Tab | Moves focus to previous focusable element. All focusable elements in accordion section included in tab sequence. |
SpaceorEnter | Expands or collapses the section panel when focus is on the accordion’s header. |
VGAR (internal only)
Find links to the Visa Global Accessibility Requirements (VGAR) for this component.- Code Order = Logical Content Order (TXT-3-1)
- Semantic Markup (TXT-2)
- Keyboard Support (NAV-1-1)
- Mouse Hover and Keyboard Focus are Equivalent (NAV-1-2)
- No Keyboard Trap (NAV-1-3)
- Content on Hover or Focus (NAV-1-4)
- Visible Keyboard Focus (NAV-2-1)
- Default Tab Order (NAV-2-3)
- Screen Updates Read (GEN-3-3)
- Text Alternatives (VIS-3-1)
- No Images of Text (VIS-3-2)