# syn-tab-group

## Summary

Tab groups organize content into a container that shows one section at a time.

## Common Use Cases

- Organize content into different sections, allowing users to switch between them without leaving the page.
- Implement in dashboards where users need to access different data views or widgets.
- Group settings or configuration options into categories for easier navigation.
- Display different aspects of a product, such as description, reviews, and specifications.
- Arrange user profile information into sections like personal details, activity, and settings.

## Usage Guidelines

### Behavior

- Maintain a consistent tab order across different pages or sections to reduce confusion and enhance user familiarity.
- Limit the number of tabs (typically no more than six) to avoid overwhelming users; for more options, consider using side navigation.
- Do not nest tabs within other tab containers.

### Content

- Choose labels that are concise and use no more than two words.
- Ensure the first tab is the most relevant for the user.
- Place related tabs next to each other for logical grouping.
- Avoid overloading each tabs content with too much information; keep it manageable and focused.

## Accessibility

- Provide a clear label for the tab group (e.g., via aria-label or aria-labelledby).
- The tab group takes a single tabstop, then focus moves to the first interactive element in the tab panel, or the tab panel if there is none. Arrow keys should be used to move between tabs.
- Use only for non-critical information. Hiding content can become a potential barrier, making it more challenging for users to access information.
- For purely decorative images, ALT-tags should be left empty so that screen readers can bypass them and concentrate on conveying meaningful content.
