Semantics and WAI-ARIA Examples

Semantic Tabs

Chapter 1 content goes here

<div class="tabs">

		<!-- Let's add a tablist role to this div. This is the container for the set of tabs-->
		<!-- aria-label provides a label that describes the purpose of the set of tabs. -->
    <div role="tablist" aria-label="Test Tabs">
        
	
		<!-- Let's add a tab role to these buttons. this 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" Indicates the tab control is activated and the associated panel is displayed. Set when a tab receives focus -->
        	<!-- aria-selected="false" Indicates the tab control is NOT active and the associated panel is NOT displayed. Set for all except the focus tab -->>
        	<!-- aria-controls refers to the 'tabpanel' element id associated with the tab-->   
        
        <button role="tab" aria-selected="true" aria-controls="1-tab" id="tab1">Chapter 1</button>
        <button role="tab" aria-selected="false" aria-controls="2-tab" id="tab2" tabindex="-1">Chapter 2</button>
        <button role="tab" aria-selected="false" aria-controls="quiz" id="quiz1" data-deletable="" tabindex="-1">Quiz</button>
        </div>
      

		<!-- Let's add a tabpanel role to this content panel -->
      		<!-- aria-labelledby provides an accessible name for the panel -->
      <div  tabindex="0" role="tabpanel" id="1-tab" aria-labelledby="Chapter 1">
          <p>Chapter 1 content goes here</p>
      </div>
      

		<!-- Let's add a tabpanel role to this content panel -->
      		<!-- aria-labelledby provides an accessible name for the panel -->
      <div tabindex="0" role="tabpanel" id="2-tab" aria-labelledby="Chapter 2" hidden="hidden">
        <p>Chapter 2 content goes here</p>
      </div>
      

		<!-- Let's add a tabpanel role to this content panel -->
      		<!-- aria-labelledby provides an accessible name for the panel -->
      <tabindex="0" role="tabpanel" id="quiz" aria-labelledby="Quiz" hidden="hidden">
        <p>Quiz content goes here</p>
      </div>
    </div>     

		<!-- Let's add the JS -->
     <script src="tabs.js" type="text/javascript"></script>