Tabbed Interface

Screenshot of a tabbed interface
Figure 1 Example of Tabbed Interface consisting of 4 tabs out of which 1 tab is currently in selected state displaying the information within tabpanel

Tab widget is used to display chunks of content in a limited amount of space. In a tabbed interface, ONLY the currently active tab content is displayed while the content of the other tabs is hidden.

NOTE:

  • New to accessibility or uncertain of requirements, it will be helpful to review all sections below.
  • Already familiar with requirements, skip to the “Working Example” section for sample HTML, CSS and JavaScript (when needed), along with a working demo.