Call and Response Frame
When to use this component
- Use an accordion when you need to organize related information into expandable sections, reducing the need for users to scroll through long content.
- Ideal for supplemental details like optional steps, extra instructions, or secondary eligibility notes—similar to FAQs.
- Helpful in mobile layouts to keep pages compact while still allowing access to full details.
When to consider something else
- Do not hide essential, universal information such as critical deadlines, main eligibility criteria, or urgent alerts inside collapsed panels. Keep these visible by default!
- If users need to compare details from multiple sections at once, consider using a table or side-by-side layout instead of an accordion.
When to use this component
- Use an accordion when you need to organize related information into expandable sections, reducing the need for users to scroll through long content.
- Ideal for supplemental details like optional steps, extra instructions, or secondary eligibility notes—similar to FAQs.
- Helpful in mobile layouts to keep pages compact while still allowing access to full details.
When to consider something else
- Do not hide essential, universal information such as critical deadlines, main eligibility criteria, or urgent alerts inside collapsed panels. Keep these visible by default!
- If users need to compare details from multiple sections at once, consider using a table or side-by-side layout instead of an accordion.
- What does an unordered list look like in the content row?
- Use accordions for FAQs on state services, like DMV procedures or benefits information.
- This is a second level item.
- Use to break up long program descriptions into manageable sections without overwhelming the reader.
- Label headings clearly so users understand the content before expanding.
- Use accordions for FAQs on state services, like DMV procedures or benefits information.
- What does an ordered list look like in the content row?
- Don't hide time-sensitive deadlines or required steps in a collapsed section.
- This is a second level item.
- Don't use vague or unclear headings that make it hard to know what is inside.
- Don't overuse accordions for content that is short enough to display fully on the page.
- Don't hide time-sensitive deadlines or required steps in a collapsed section.
- What happens when there is a paragraph of text above an unordered list?
Accordions should be used sparingly to declutter pages by hiding non-essential, secondary content (e.g., FAQs, long lists) while keeping core, actionable information visible. Best practices include using clear, descriptive, and clickable headers with icons (like carats) to indicate interactivity. Ensure full accessibility with keyboard support and proper ARIA labels, and avoid nesting them to prevent usability issues. [Source]
- When to Use: Ideal for FAQ sections, technical specifications, or long lists that are supplementary, allowing users to scan topics without scrolling.
- When to Avoid: Do not hide critical, need-to-know information within an accordion. If users need to read all content, display it directly.
- Header Clarity: Use simple, concise, and descriptive headers that accurately reflect the hidden content.
- Visibility Indicators: Use a caret (^) or similar icon to clearly indicate that a section can be expanded.
- Functionality: Allow users to open and close multiple sections at once, rather than forcing only one to be open at a time.
- Accessibility & SEO: Use proper <button> elements for headers to ensure keyboard navigation (Enter/Space) and ARIA attributes such as `aria-expanded` for screen readers.
- Mobile Considerations: Keep text concise to avoid excessive scrolling on small screens.
[Source]
- What happens when there is an ordered list under a paragraph of text?
Plain text in a paragraph should display as 16px font size, with a line height of 1.5. List items - even if it's a list of links, should also have a line height of 1.5 per WCAG.
- This is an ordered list. We've noticed that not only is the paragraph of text above a list a variable that changes the display, but the type of list is another variable doing so.
- This is a second level item.
- This is the second item of the ordered list.
- This is the third item
- This is an ordered list. We've noticed that not only is the paragraph of text above a list a variable that changes the display, but the type of list is another variable doing so.
- What does text with no lists at all look like?
It's hard to see things when you're too close. Take a step back and look. If you don't think every day is a good day - try missing a few. You'll see. There's nothing wrong with having a tree as a friend. No pressure. Just relax and watch it happen. Paint anything you want on the canvas. Create your own world.