Why is it better than other tabbed navigations?
- The tab size change to fit its text
- Tabs keep the elements' inline display so it can be used in a line of text
- As they are not a block elements, no
floatis needed so they can be centered or used inside a floated container - They have a pure CSS [CSS] rollover and pushed effects (except in IE6)
- They use only one image to improve download speed and avoid delays showing the rollover or pushed effects
- They have simple semantic valid XHTML strict markup and valid CSS 2.1 without any hacks or tricks
- They set WAI-ARIA [ARIA]
roleattributes on the elements to help user agents and assistive technology understand what the markup semantics. - Tested with IE5, IE5.5, IE6, IE7, IE8, FF1, FF2, FF3, Opera 9, Opera 10, Konkeror 4.2, Epiphany 2.2, Safari 3, Safari 4, Chrome 3 and Chrome 4. Available versions for Windows and Ubuntu linux.
Doctype
In the current WAI-ARIA Best Practices [ARIA-PRACTICES] we can read:
WAI-ARIA markup is currently not included in (X)HTML. The W3C WAI PF working group will be creating DTDs for XHTML 1.0 and HTML 4.01 for those wishing to validate their markup with WAI-ARIA embedded into these host languages.
But I wanted my documents to validate using the w3c validator so I decided to host a copy of the provisional XHTML+ARIA DTD and set it as the doctype.
<!DOCTYPE html PUBLIC "Accessible Adaptive Applications//EN"
"http://gabriel.prat.name/css.back/xhtml-aria.dtd">
Basically the document is XHTML 1.1 plus an extension module [XHTMLMOD] with all the WAI-ARIA attributes.
If you don't care about XHTML validation, you could use a normal XHTML 1.0 doctype instead.
Markup
The markup consists of an ul for the tab list containing a link in each child li. The tab panel consists of a div with two sections: a header and a footer. The header consists of another div (necessary to display the rounded corners) with a child h2 which could easily be replaced with another level heading if needed. The body of the tab panel is just another div that also helps displaying the rounded corners of the panel.
No element is floated, the list elements have display:inline to display them one next to another, so they can be centered, floated or used within a line of text.
In the example the markup of the navigation tabs is below the main content of the page to preserve the logical information structure of the page. Showing the main content in the first place to the user (and to the search engines) to give it more importance than the navigation links. To position them they are both included in a div with id="content".
<div id="content">
<div class="tabpanel" role="tabpanel main">
<div class="hd">
<h2>This is the tab contents title</h2>
</div>
<div class="bd">
<p>Some paragraphs of text</p>
</div>
</div>
<h2 class="hide" id="main-nav-label">Main navigation</h2>
<ul class="tablist" role="navigation tablist" aria-labelledby="main-nav-label">
<li role="tab" tabindex="-1"><a href="#"><span>A tab</span> </a></li>
<li role="tab" tabindex="-1"><a href="#"><span>Another tab</span> </a></li>
<li role="tab" class="selected" tabindex="0"><a href="#"><span>Current tab</span></a></li>
<li role="tab" tabindex="-1"><a href="#"><span>The last tab</span> </a></li>
</ul>
</div>
</div>
Background images
Two background images are used. One for the tabs and another for the tab panel.
The tabs background image has three sprites, the upper one is used to display the tab in its normal state, the middle one to show the rollover effect and the bottom one is for the selected tab.
The tab panel background image is just a rounded corners square as big as the maximum desired size of the panel (1000x1000 pixels on our example). Not fully displayed in the image below.
WAI-ARIA roles and attributes
The main content of the page is placed inside the tab panel, so the tab panel has the main role. From the specification [ARIA] in the main role definition:
This marks the content that is directly related to or expands upon the central topic of the document. The
mainrole is a non-obtrusive alternative for "skip to main content" links, where the navigation option to go to the main content (or other landmarks) is provided by the user agent through a dialog or by an assistive technology.
It is also given the tabpanel role following the tabpanel design pattern in the WAI-ARIA best practices [ARIA-PRACTICES].
The ul are given the tablist and tab roles following the same design pattern linked above. In this way the user-agent or the assistive technologies can identify the list and the panel to be part of a single tab panel widget and help the user interact with it.
Finally, as in our example the tab panel is not a simple panel in a page but it is also the main navigation of the site, the role navigation is also given to the tab list.
Some other WAI-ARIA attributes are used following the tabpanel design pattern linked above.
CSS
The first part of the CSS controls the global position of the tabs and tab panel inside the content div. It basically positions the tabs at the top of the content div and the tab panel just below them.
#content {
position: relative;
width: 80%;
margin: auto;
}
#content .tablist {
position: absolute;
top: 0;
left: 50px;
width: 100%;
}
#content .tabpanel {
position: relative;
top: 44px;
left: 0;
margin-bottom: 50px;
}
The next section sets the inline display of the tabs and adjusts font sizes and line heights to make the images align properly. It also sets the background images for the different states of the tabs
ul.tablist {
display: inline;
font-size: 38px;
height: 44px;
line-height: 44px;
list-style-image: none;
list-style-type: none;
overflow: hidden;
padding: 0;
margin: 0;
}
ul.tablist li {
background: #e4e4e4 url(tabs.gif) no-repeat left top;
display: inline;
margin: 0 0.1em 0 0;
padding: 0 0 0 0.5em;
}
ul.tablist li a span {
font-family: "Lucida Grande", Lucida, Verdana, sans-serif;
font-size: 16px;
vertical-align: middle;
line-height: 51px;
}
ul.tablist li a {
background: url(tabs.gif) no-repeat right top;
color: #888;
display: inline;
padding: 0 0.5em 0 0;
text-decoration: none;
}
ul.tablist li.selected {
background-position: left -88px;
}
ul.tablist li.selected a {
background-position: right -88px;
color: #000;
}
ul.tablist li:hover {
background-position: left -44px;
}
ul.tablist li:hover a {
background-position: right -44px;
}
ul.tablist li.selected:hover {
background-position: left -88px;
}
ul.tablist li.selected:hover a {
cursor: default;
background-position: right -88px;
}
ul.tablist li.selected {
cursor: default;
}
Finally the last section controls the display of the tab panel, setting the background image to its different elements to produce the effect of the rounded corners.
.tabpanel {
background: #e4e4e4;
margin: auto;
}
.tabpanel h2 {
margin: 0 0 1em 0;
color: #2e2e2e;
font-size: 2em;
font-style: normal;
font-weight: bold;
}
.tabpanel ,.tabpanel .bd,.tabpanel .hd,.tabpanel .hd h2 {
background: transparent url(round-box.gif) no-repeat bottom right
}
.tabpanel {
padding-right: 15px;
margin: auto;
max-width: 1000px;
max-height: 1000px;
}
.tabpanel .hd {
background-position: top right;
margin-right: -15px;
padding-right: 40px
}
.tabpanel .hd h2 {
background-position: top left;
margin: 0;
border: 0;
padding: 25px 0 15px 40px;
}
.tabpanel .bd {
background-position: bottom left;
margin-right: 25px;
padding: 15px 0 15px 40px;
}
Example
In the following page you can see an accessible tabbed navigation example.References
- [ARIA]
- Accessible Rich Internet Applications (WAI-ARIA) Version 1.0. L. Seeman, M. Cooper, R. Schwerdtfeger, L. Pappas, Editors, W3C Working Draft (work in progress), 24 February 2009. This version of WAI-ARIA is available at http://www.w3.org/TR/2009/WD-wai-aria-20090224/. Latest version of WAI-ARIA available at http://www.w3.org/TR/wai-aria/.
- [ARIA-PRACTICES]
- WAI-ARIA Best Practices. L. Pappas, R. Schwerdtfeger, M. Cooper, Editors, W3C Working Draft (work in progress), 24 February 2009. This version of WAI-ARIA Best Practices is available at http://www.w3.org/TR/2009/WD-wai-aria-practices-20090224/. Latest version of WAI-ARIA Best Practices available at http://www.w3.org/TR/wai-aria-practices/.
- [CSS]
- Cascading Style Sheets, level 2 (CSS2) Specification, I. Jacobs, B. Bos, H. Lie, C. Lilley, Editors, W3C Recommendation, 12 May 1998, http://www.w3.org/TR/1998/REC-CSS2-19980512/. Latest version of CSS2 available at http://www.w3.org/TR/CSS2/.
- [XHTMLMOD]
- XHTML™ Modularization 1.1 , S. Peruvemba, S. McCarron, D. Austin, M. Ishikawa, M. Birbeck, Editors, W3C Recommendation, 8 October 2008, http://www.w3.org/TR/2008/REC-xhtml-modularization-20081008/. Latest version available at http://www.w3.org/TR/xhtml-modularization/.
