Exercise One: Creating An Accessible Tab Panel

Step 2: Adding ARIA Attributes

Coding ARIA Attributes In this example we add ARIA Roles, States and Properties to identify the condition of the Widget to the screen reader. 
  <div role="tablist" class="automatic">
    <div class="tabs">
      <button id="tab1" type="button" role="tab" aria-selected="false" aria-controls="tabpanel1">
        <span class="focus">Chapter 1</span>
      </button>
      <button id="tab2" type="button" role="tab" aria-selected="false" aria-controls="tabpanel2">
        <span class="focus">Chapter 2</span>
      </button>
      <button id="tab3" type="button" role="tab" aria-selected="false" aria-controls="tabpanel3">
        <span class="focus">Chapter 3</span>
      </button>
      <div id="tabpanel1" role="tabpanel" tabindex="0" aria-labelledby="tab1" class="is-hidden">
        <div role="alert" aria-live="polite">
          <h3>Chapter One</h3>
          <p>This is the content of chapter One.</p>
        </div>
      </div>
      <div id="tabpanel2" role="tabpanel" tabindex="0" aria-labelledby="tab2" class="is-hidden">
        <div role="alert" aria-live="polite">
          <h3>Chapter Two</h3>
          <p>This is the content of chapter two.</p>
        </div>
      </div>
      <div id="tabpanel3" role="tabpanel" tabindex="0" aria-labelledby="tab3" class="is-hidden">
        <div role="alert" aria-live="polite">
          <h3>Chapter Three</h3>
          <p>This is the content of chapter three.</p>
        </div>
      </div>
    </div>
  </div>
Screen Reader Test Using a screen reader and keyboard, try navigating to the Tab Panel content.