Tabs

Tabs are interactive elements that work alongside Tab and Tab Panel to organise content into separate sections or views.

• Icons: ideally the icon should be accompanied by a label, but if this is not the case, be sure to supply the Tab component with an aria-label attribute so that screen reader user will know the purpose of the tab.

• Write short, descriptive tab labels. Tab labels should usually be 1-2 words. Short labels are more scannable; if you need longer labels, it’s a sign that the choices are too complicated for tabs and maybe an Accordion is a better choice.
• Avoid tab list scrolling. Make sure there is enough horizontal space to encorporate the amount of tabs you are presenting.

• Vivid Tabs: Manual accessibility test
• We follow the W3C Tabs Pattern
• Tabs used right