Enrique Meléndez Estrada wrote:
Looking at "official" TABs plugin, I realized that the HTML structure
is not very "natural". It uses a list (UL) of tab headers follow by
tab bodies (DIV). Normally, what you get from your favorite CMS is
something more like : a header (div, h,...), its body (div), another
header (div, h, ...), its body (div), etc...
There's nothing wrong with the tabs HTML structure. The UL contains
anchor or 'same-page' links to the divs containing the appropriate
content. A little extra accessibility can eaasily be added using a
heading tag like <h2> which could then be hidden by CSS but it is up to
the author what HTML goes into the tab sections. For example:
<ul>
<li><a href="#tab1">Tab 1</a></li>
<li><a href="#tab2">Tab 2</a></li>
</ul>
<div id="tab1">
<h2>Tab 1</h2>
</div>
<div id="tab2">
<h2>Tab 2</h2>
</div>
CSS could contain the line:
div h2 { position: absolute; left: -9999px; } /* avoid 'display: none;'
so it is still read out by most screen readers */
This document is very typical on the web. It's a table of contents
containing links to the relevant sections of the page, just look at the
HTML specifications for an example.
-Rob
