Exercise One: Creating An Accessible Tab Panel

Step 1: Creating The HTML Web Page

Native HTML Code This first example is a Tab widget that is not screen reader accessible. 
  <div class="automatic">
    <div class="tabs">
      <button id="tab1" type="button">
        <span class="focus">Chapter 1</span>
      </button>
      <button id="tab2" type="button">
        <span class="focus">Chapter 2</span>
      </button>
      <button id="tab3" type="button">
        <span class="focus">Chapter 3</span>
      </button>
      <div id="tabpanel1" tabindex="-1" class="is-hidden">
        <div>
          <h3>Chapter One</h3>
          <p>This is the content of chapter One.</p>
        </div>
      </div>
      <div id="tabpanel2" tabindex="-1" class="is-hidden">
        <div>
          <h3>Chapter Two</h3>
          <p>This is the content of chapter two.</p>
        </div>
      </div>
      <div id="tabpanel3" tabindex="-1" class="is-hidden">
        <div>
          <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.