HTML and CSS Reference
In-Depth Information
</div>
</div>
</div>
The gist of this solution is simply a list of links with inline event handlers that
toggle the display of the corresponding panel of text. This solution suffers from a
plethora of issues:
•
All panels but the default selected one will be completely inaccessible to users
without JavaScript, or with insufficient JavaScript support (i.e., some screen
readers, old browsers, old and new mobile devices).
•
Progressive enhancement is not possible—either it works or it doesn't.
•
Markup is heavyweight and senseless, reducing accessibility and increasing
complexity of associated CSS.
Reusing scripts is practically impossible.
•
Testing scripts is practically impossible.
•
span
elements are styled and scripted to act like internal anchors.
a
elements
provide this functionality for free.
•
•
Poorly written script introduces unintentional global variable
tabs
.
•
Script does not make use of markup context, instead using expensive
selectors on every click to access panels and other tabs.
9.2.2 Clean Tabbed Panel Markup
If “Find your hooks and relationships” can teach us anything, it is to start by
writing semantic and valid markup, adding ids and classes sparingly to have enough
hooks to add the scripted behavior. Analyzing the tabbed panel as implemented in
Listing 9.1, we can sum up the functionality pretty simply: One or more sections
of text is to be navigated by clicking “tabs”—links with the text section's heading
as link text. Reasonable markup for such a requirement could be as simple as the
markup in Listing 9.2. Using HTML5 could further improve its clarity.
Listing 9.2
Tabbed panels base; semantic markup
<div class="tabbed-panel">
<ol id="news-tabs" class="nav">
<li><a href="#news">Latest news</a></li>
<li><a href="#sports">Sports</a></li>
<li><a href="#economy">Economy</a></li>
</ol>
