Tabs

4.0.1

Tabs organize content across different screens, data sets, and other interactions.

Demo

Länkar

Best practices

Example 1

Tabs, Example 1

Adaptive design

Example 2

Tabs, Exempel 2

Adaptive design

Tillgänglighet

WAI-ARIA

Tabs-komponenten följer designmönstret "Tabs with manual activation" från WAI-ARIA Authoring Practices Guide.

Läs mer om "Tabs with Manual Activation" på WAI-ARIA APG

Det innebär bland annat följande roller och värden:

  • role="tablist" för att gruppera tabbarna
  • aria-label för att sätta ett namn på listan med tabbar
  • role="tab" för varje enskild tabb i listan
  • role="tabpanel" för områden som kontrolleras av tabbarna
  • aria-selected för att indikera vilken tabb som är vald