| <button |
| role="tab" |
| aria-selected="true" |
| aria-controls="panel-1" |
| id="tab-1" |
| tabindex="0"> |
| First Tab |
| </button> |
| <button |
| role="tab" |
| aria-selected="false" |
| aria-controls="panel-2" |
| id="tab-2" |
| tabindex="-1"> |
| Second Tab |
| </button> |
| <button |
| role="tab" |
| aria-selected="false" |
| aria-controls="panel-3" |
| id="tab-3" |
| tabindex="-1"> |
| Third Tab |
| </button> |
| |
| <div id="panel-1" role="tabpanel" tabindex="0" aria-labelledby="tab-1"> |
| <p>Content for the first panel, this should be read.</p> |
| </div> |
| <div id="panel-2" role="tabpanel" tabindex="0" aria-labelledby="tab-2" hidden> |
| <p>Content for the second panel, this should be read.</p> |
| </div> |
| <div id="panel-3" role="tabpanel" tabindex="0" aria-labelledby="tab-3" hidden> |
| <p>Content for the third panel, this should be read.</p> |
| </div> |
