- Some features of the component do not meet the requirement.
- The component does not meet the requirement.
> **High contrast mode:** The Tab component inherits the OS-level high-contrast theme. To verify rendering, enable the Windows High Contrast mode (or the equivalent OS-level accessibility setting) and check the active/hover states for sufficient contrast.
## ARIA attributes
The Tab component follows the [WAI-ARIA Tabs pattern](https://www.w3.org/WAI/ARIA/apg/patterns/tabs/). ARIA roles and attributes are applied automatically based on the component's state, orientation, and `overflowMode`. The following attributes are managed by the Tab:
| Role / Attribute | Applied to | Functionalities |
| --- | --- | --- |
| `tablist` | Tab header element | Identifies the element as a container of tab controls. |
| `tab` | Tab item element | Identifies the element as an interactive tab inside the `tablist`. |
| `tabpanel` | Tab content element | Identifies the element as the content panel associated with the active tab. |
| `aria-orientation` | Tab header element | Indicates header orientation. Default value is `horizontal`; becomes `vertical` when [`headerPlacement`](https://ej2.syncfusion.com/angular/documentation/api/tab/tabModel#headerplacement) is `Left` or `Right`. |
| `aria-selected` | Tab items | Reflects selection state. The active Tab has `aria-selected="true"`. |
| `aria-labelledby` | Tab content element | Associates the panel with the corresponding tab header. |
| `aria-controls` | Tab items | Associates the tab with its `tabpanel`. |
| `aria-haspopup` | Tab element when popup is enabled | Set to `true` when [`overflowMode`](https://ej2.syncfusion.com/angular/documentation/api/tab/tabModel#overflowmode) is `Popup`; `false` otherwise. |
| `aria-disabled` | Disabled tab items | Reflects the disabled state of the Tab item. |
## Keyboard interaction
By default, keyboard navigation is enabled. The component implements keyboard navigation following the WAI-ARIA practices. Once focus is on the active Tab element, the following key combinations are supported:
| Interaction type | Key | Description |
|------------------|-----|-------------|
| Navigation | Left | Moves focus to the previous Tab. In RTL layouts, focus moves to the next visual Tab. |
| Navigation | Right | Moves focus to the next Tab. In RTL layouts, focus moves to the previous visual Tab. |
| Activation | Enter or Space | Selects the Tab if it is not selected. Opens the drop-down if it is focused. Activates a popup item when one is focused. |
| Popup | Esc(Escape) | Closes the popup if it is open. |
| Popup | Down or Up | Moves between items of the popup in the vertical direction. |
| Navigation | Home | Moves focus to the first Tab. |
| Navigation | End | Moves focus to the last Tab. |
| Popup | Shift + F10 | Opens the popup when the Tab is focused and `overflowMode` is `Popup`. |
| Tab close | Delete | Removes the Tab if the close button is enabled. |
| Focus traversal | Tab | Moves focus through the interactive elements in the content panel. |
| Focus traversal | Shift + Tab | Moves focus backward through the interactive elements. |
## Ensuring accessibility
The Tab component's accessibility is validated during automated testing using [accessibility-checker](https://www.npmjs.com/package/accessibility-checker) and [axe-core](https://www.npmjs.com/package/axe-core).
Open the [Angular Tab accessibility sample](https://ej2.syncfusion.com/accessibility/tab.html) in a new window to evaluate the Tab with accessibility tools.
## See also
* [Accessibility in Syncfusion® Angular components](../common/accessibility)
* [Tab Key Navigation](./how-to/tab-key-navigation)
* [Keyboard interaction reference](https://www.w3.org/WAI/ARIA/apg/patterns/tabs/)
- Some features of the component do not meet the requirement.
- The component does not meet the requirement.