]]'', ''[[mdn>Web/HTML/Element/section|
]]'' or ''[[mdn>Web/HTML/Element/article|]]'' is probably the best choice.
…
…
These need to be marked up with the following attributes:
* The attribute ''role="tabpanel"'' marks up the panel as a tab panel.
* The ''aria-labelledby'' attribut links the panel with it’s tab. It should contain the id of the panel, as described above.
* Each panel must have a unique ''id'' that can used to refer to it from the tabs (see above).
* The ''[[mdn>Web/HTML/Global_attributes/hidden|hidden]]'' attribute is used to hide all panels that are not initially visible. This is an empty attribute.
===== Activation =====
Any structure as the above that is present at the time that the (pre-)initialisation takes place, will automatically be detected and the necessary callback functions will be added.
If a tab interface is dynamically added to the page, it can be activated by calling the following method:
$p.gui.tabs.add(e);
In this case, ''e'' must be a reference to the root element (the one with the ''role="tablist"'' attribute)
- Notes:
-
* This module does not provide any CSS to style the tab interface. When designing the user interface, it is recommended that you use the ''aria-*'' and ''role'' attributes as selectors.
* Do not use aria-hidden="true" for hidden tab panels. This status is already implied by the hidden attribute.
===== See also =====
* [[framework:page:p-core:index|$p]] (page core)
===== More information =====
* [[mdn>Web/Accessibility/ARIA/Roles/tablist_role|Node: ARIA: tablist role]] on MDN.
* [[mdn>Web/Accessibility/ARIA/Roles/presentation_role|ARIA: presentation role]] on MDN.
* [[mdn>Web/Accessibility/ARIA/Roles/tab_role|ARIA: tab role]] on MDN.
* [[mdn>Web/Accessibility/ARIA/Roles/tabpanel_role|ARIA: tabpanel role]] on MDN.
* [[mdn>Web/HTML/Global_attributes/hidden|hidden]] on MDN.