HTML to Create Tabs That Work for Keyboard Navigation

whitney_clay
Community Contributor

If I make tabs with the code below and then save the page and try tabbing through it, the first tab does not highlight. That means I can't see I am on that tab. If I know I am on the first tab, I can then move between the tabs by using the arrow keys.

Does anyone know what needs to be added to this code to make the first tab highlight when you navigate to it with a keyboard? My school does not have Cidilabs, so I need to use code to make tabs.

<div class="enhanceable_content tabs">

<ul>

<li><a href="#fragment-1"><span>TEXT TAB 1</span></a></li>

<li><a href="#fragment-2"><span>TEXT TAB 2</span></a></li>

</ul>

<div id="fragment-1">CONTENT OF TAB 1</div>

<div id="fragment-2">CONTENT OF TAB 2</div>

<div></div>

</div>

Labels (2)
0 Likes