SitePoint Sponsor

User Tag List

Results 1 to 13 of 13
  1. #1
    SitePoint Enthusiast
    Join Date
    Dec 2006
    Location
    Sydney
    Posts
    48
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Accessible Tabs Based Navigation

    Hi,

    I'm wondering which of the following markup is more correct for a tabs based navigation in terms of accessibility, more specifically, tabbing.

    Code HTML4Strict:
    <ul class="tabs">
    	<li><a href="www.google.com">Tab 1</a></li>
    	<li><a href="www.yahoo.com">Tab 2</a></li>
    </ul>
     
    <div class="tabcontainer">
    	<p>Some content</p>
    </div>
     
    <div class="tabcontainer">
    	<p>Some morecontent</p>
    </div>

    or

    Code HTML4Strict:
    <h3><a href="www.google.com">Tab 1</a></h3>
    <div class="tabconntainer"><p>Some content</p></div>
     
    <h3><a href="www.yahoo.com">Tab 2</a></h3>
    <div class="tabconntainer"><p>Some morecontent</p></div>

    Usually I would go for the first option since it's more used commonly. However, the problem comes with the tabbing. With the first approach, the user has to tab through all the tabs before she can get into the tabcontainer of the tab. Now, that is ok if there are only 2 tabs, but what if there are 10 or more tabs? This can generates unnecessary hits of tab, making it less accessible for the user, which it doesn't mean inaccessible.

    The second approach on the other hand solves this 'problem'. I would say that the structure of the first one is more like a "menu - content" approach while the second one is "title - content".

    My question is, why I would choose one and not another and vice versa? I'd like to have some reasoning for each of the approach to decide which one should I use. For all the semantic and standards ninjas out there, please shed me some light and tell me why I should choose the first one over the second one, because I don't really wanna do the second one.

  2. #2
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,622
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Luckily there exists an attribute for this.

    tabindex="0"

    That is just an example. 0 is the starting point of it. You can set any element on the page as a tabindex. Semantically your page is just fine. I would actually go with the first one as it seems more semantic to me. Is the Tabs an actual list? If not then option 2 is the best way.
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  3. #3
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,476
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ryan, I wouldn't suggest tabindex since it can cause signfiicant accessibility issues (along with accesskeys). The best "Tab index" to use is the natural source code order.

    Personally though, I'd probably put the "tab content" inside the list items, like so: (the # is just a placeholder)

    HTML Code:
    <ul id="menu">
    	<li>
    		<h#><a href="#">Link</a></h#>
    		<div>content...</div>
    	</li>
    	<li>
    		<h#><a href="#">Link</a></h#>
    		<div>content...</div>
    	</li>
    	<li>
    		<h#><a href="#">Link</a></h#>
    		<div>content...</div>
    	</li>
    </ul>

  4. #4
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,622
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    What do you mean accessibility issues? Do you mean with handheld devices and other items without a tab button? Yea the source order changing would be the easiest and the best way.
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  5. #5
    SitePoint Enthusiast
    Join Date
    Dec 2006
    Location
    Sydney
    Posts
    48
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks Dan, I was thinking something like that as well.

    Ryan, if I use tabindex, I'd need to add 'tabindex' all the links in order to get the order that I want. Because when you tab, the links that have tabindex have higher priority than the ones the don't.

    For example, for a page that has only 5 links:

    Code HTML4Strict:
    <a href="#">a</a>
    <a href="#">b</a>
    <a href="#" tabindex="2">c</a>
    <a href="#" tabindex="1">d</a>
    <a href="#" tabindex="3">e</a>

    The tabbing will be in the order of d > c > e > a > b, but what if I want a > b > d > c > e, then I need to add tabindex to the first 2 links too as well as reordering the value of all of them. This is not a wise solution considering that most of the pages contain more than 5 links.

  6. #6
    SitePoint Guru risoknop's Avatar
    Join Date
    Feb 2008
    Location
    end($world)
    Posts
    834
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Personally, I do it like this:

    Code:
    <div id="tabs">
        <ul>
        <li><a href="index.html" id="current">Home</a></li>
        <li><a href="about.html">About</a></li>
        <li><a href="contact.html">Contact</a></li>
        </ul>
    </div>
    
    <div id="tabcontent">
        <p>Home tab content here...</p>
    </div>

  7. #7
    SitePoint Enthusiast
    Join Date
    Dec 2006
    Location
    Sydney
    Posts
    48
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Dan Schulz View Post
    Ryan, I wouldn't suggest tabindex since it can cause signfiicant accessibility issues (along with accesskeys). The best "Tab index" to use is the natural source code order.

    Personally though, I'd probably put the "tab content" inside the list items, like so: (the # is just a placeholder)

    HTML Code:
    <ul id="menu">
    	<li>
    		<h#><a href="#">Link</a></h#>
    		<div>content...</div>
    	</li>
    	<li>
    		<h#><a href="#">Link</a></h#>
    		<div>content...</div>
    	</li>
    	<li>
    		<h#><a href="#">Link</a></h#>
    		<div>content...</div>
    	</li>
    </ul>
    Hi Dan, I'm having a hard time trying to style the tabs (the h# in your markup). I'm using position:absolute to move the tabs to the top and then I have to edit the horizontal position one by one. But the problem is that the tabs are dynamically generated, sometime there could be 10 tabs and sometime just 2. Can you suggest a better way of doing this please?

    Thanks.

  8. #8
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,476
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by risoknop View Post
    Personally, I do it like this:

    Code:
    <div id="tabs">
        <ul>
        <li><a href="index.html" id="current">Home</a></li>
        <li><a href="about.html">About</a></li>
        <li><a href="contact.html">Contact</a></li>
        </ul>
    </div>
    
    <div id="tabcontent">
        <p>Home tab content here...</p>
    </div>
    You don't need the "tabs" DIV; the UL can do the job just fine.

    Quote Originally Posted by 5h4rk View Post
    Hi Dan, I'm having a hard time trying to style the tabs (the h# in your markup). I'm using position:absolute to move the tabs to the top and then I have to edit the horizontal position one by one. But the problem is that the tabs are dynamically generated, sometime there could be 10 tabs and sometime just 2. Can you suggest a better way of doing this please?

    Thanks.
    Floating the list items will help; and then use relative positioning on the LIs while using absolute positioning on the DIVs inside them. I'm not at home, so I don't have access to my armada of browsers; which means I'll be unable to cook up a working example. However, these links should give you some ideas.

    http://www.htmldog.com/articles/suckerfish/dropdowns/
    http://moneytreesystems.com/css/picpopup.html
    http://mikecherim.com/experiments/css_map_pop.php
    http://www.pmob.co.uk/temp/hideandshow2-css.htm (Now works in Opera)
    http://www.search-this.com/2007/11/0...ust-popped-up/

  9. #9
    SitePoint Guru risoknop's Avatar
    Join Date
    Feb 2008
    Location
    end($world)
    Posts
    834
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You don't need the "tabs" DIV; the UL can do the job just fine.
    I know but div is easier to style and more reliable (I've had problems with styling ul properly in some older browsers... but these days I optimize just for IE6+, FF2+ and Opera 9.27+, so...).

    Div also kinda makes sense there as the tabbed menu is a block element, so it is not so wrong if it is inside the div.

  10. #10
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,476
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    An unordered list is also a block-level element, making the DIV redundant and unnecessary. As for styling issues, I used to have that problem until I stopped wrapping everything around DIVs and zero'd out all my margins/padding prior to using the elements as they were intended. Once I started doing that, I realized just how much can actually be done by grouping elements appropriately. Here's one such example: http://www.dan-schulz.com/temp/heade...menu-test.html

  11. #11
    SitePoint Guru risoknop's Avatar
    Join Date
    Feb 2008
    Location
    end($world)
    Posts
    834
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You are probably right

  12. #12
    SitePoint Guru risoknop's Avatar
    Join Date
    Feb 2008
    Location
    end($world)
    Posts
    834
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Here is an example of very very very simple tabbed based navigation with the markup I posted earlier: http://richardknop.com/temp/black-do...ased-interface

    But I guess I will really get rid of that abundant div, Dan.

  13. #13
    SitePoint Enthusiast
    Join Date
    Dec 2006
    Location
    Sydney
    Posts
    48
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Dan Schulz View Post
    Floating the list items will help; and then use relative positioning on the LIs while using absolute positioning on the DIVs inside them. I'm not at home, so I don't have access to my armada of browsers; which means I'll be unable to cook up a working example. However, these links should give you some ideas.
    Thanks for that Dan. But if I do that, the content that follows the list will appear on the top of the list because of the position:absolute. I know I can define a height for the list, but the problem is that I don't know the height as the content of each tab is generated dynamically. I'm trying to calculate the height with Javascript, but I don't think that is the way to do it.

    I think these were the reasons that I didn't want to go for the second approach.


Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •