Examples
Basic Expand/Collapse
This is additional content that can be expanded or collapsed. Users can access this content by activating the button above.
The widget uses proper ARIA attributes to communicate its state to assistive technologies.
FAQ Item
You can operate this widget using the following keyboard controls:
- Enter or Space: Toggle the expand/collapse state
- Tab: Move focus to the next interactive element
- Shift + Tab: Move focus to the previous interactive element
Product Details
Technical Specifications
Dimensions: 10" x 8" x 2"
Weight: 2.5 lbs
Material: Recycled aluminum
Color options: Silver, Space Gray, Gold
Warranty: 2 years limited warranty
Long Content Example
Understanding Accessibility
Accessibility ensures that websites and applications can be used by everyone, including people with disabilities. This includes individuals who are blind or have low vision, are deaf or hard of hearing, have mobility impairments, or have cognitive disabilities.
When building expand/collapse widgets, it's essential to ensure they work with keyboards, screen readers, and other assistive technologies. The widget should clearly communicate its current state (expanded or collapsed) and allow users to change that state easily.
Key accessibility features include:
- Proper semantic HTML and ARIA attributes
- Keyboard operability with visible focus indicators
- Sufficient color contrast for all text and controls
- Support for high contrast and forced colors modes
- Responsive design that works at narrow viewport widths
By following these principles, we create inclusive experiences that benefit all users.