Name: Enabled.in - Digital Accessibility Solution Provider
Address: 807, P.T.Lee Building, Anna Salai, Chennai, India, Chennai, Tamil Nadu, 600002, IN
Telephone: +919840515647
Price range: INR

Example

Other title

here the content of 2nd tab

Aria

Role, Property, State, and Tabindex Attributes

Role	Attribute	Element	Usage
`tablist`		`div`	Indicates that the element serves as a container for a set of tabs.
	`aria-label=Entertainment`	`div`	Provides a label that describes the purpose of the set of tabs.
`tab`		`button`	Indicates the element serves as a tab control. When focused, is automatically activated, causing its associated `tabpanel` to be displayed. Provides a title for its associated `tabpanel`.
	`aria-selected=true`	`button`	Indicates the tab control is activated and its associated panel is displayed. Set when a tab receives focus.
	`aria-selected=false`	`button`	Indicates the tab control is not active and its associated panel is NOT displayed. Set for all tab elements in the tab set except the focused tab.
	`tabindex=-1`	`button`	Removes the element from the page `Tab` sequence. Set when a tab is not selected so that only the selected tab is in the page `Tab` sequence. Since an HTML `button` element is used for the tab, it is not necessary to set `tabindex=0` on the selected (active) tab element. This approach to managing focus is described in the section on roving tabindex.
	`aria-controls=IDREF`	`button`	Refers to the `tabpanel` element associated with the tab.
`tabpanel`		`div`	Indicates the element serves as a container for tab panel content. Is hidden unless its associated `tab` control is activated.
	`aria-labelledby=IDREF`	`div`	Refers to the `tab` element that controls the panel. Provides an accessible name for the tab panel.
	`tabindex=0`	`div`	Puts the tabpanel in the page `Tab` sequence. Facilitates movement to panel content for assistive technology users. Especially helpful if there are panels that do not contain a focusable element.

Keyboard Shortcuts

If you focus on the tabs “buttons”:

use Up/Left to see previous tab,
use Down/Right to see next tab
use Home to see first tab (wherever you are in tab buttons)
use End to see last tab (wherever you are in tab buttons)

If you focus on a tab content:

use Ctrl Up/Left to set focus on the tab button for the currently displayed tab
use Ctrl PageUp to set focus on the previous tab button for the currently displayed tab
use Ctrl PageDown to set focus on the next tab button for the currently displayed tab

Warning: Ctrl+PageUp/PageDown combination could activate for some browsers a switch of browser tabs. Nothing to do for this, as far as I know (if you have a solution, let me know).