SitePoint Sponsor

User Tag List

Results 1 to 12 of 12
  1. #1
    SitePoint Addict
    Join Date
    Jun 2006
    Posts
    220
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Problem with keyboard navigation

    I created a tab menu bar using div and css.

    <div id="tabbar">
    <div class="maintab" id="tab_reading"></div>
    <div class="maintab" id="tab_video"></div>
    <div class="maintab" id="tab_images"></div>
    <div class="maintab" id="tab_assessments"></div>
    <div class="maintab tab_blank" id="tab_search"></div>
    <div class="maintab" id="tab_mynotebook"></div>
    </div>

    Now I am working on 508 compliance. To do this tabs should be accessible using keyboard (using tabs users should be able to navigate.). It seems tabindex does not work with divs. Using the above code how can I achieve this (i.e. to access them using keyboard tab)

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,614
    Mentioned
    413 Post(s)
    Tagged
    7 Thread(s)
    For a menu like this, it's best to use an unordered list (<ul>) with a list item (<li>) for each tab, in which there is an anchor (<a>) element. Then you will be able to tab through the menu—with or without tabindex.

  3. #3
    Robert Wellock silver trophybronze trophy xhtmlcoder's Avatar
    Join Date
    Apr 2002
    Location
    A Maze of Twisty Little Passages
    Posts
    6,316
    Mentioned
    60 Post(s)
    Tagged
    0 Thread(s)
    You are wanting the first item to be highlighted instead. Hence that is what you might want to focus upon, e.g. the first list item anchor link itself.

    Since that is a legal usage of the tabindex attribute on an A element so move it thus to the first anchor. It may focus upon a DIV if you force a tabindex onto it but its not legal usage of markup.

    Like Ralph said, generally it is better to use an unordered list for a navigation system. So unless your page is really weird (and uses really bad JS Voodoo) the natural page order will be able to be tabbed without such intervention of a tabindex attribute anyway.

  4. #4
    SitePoint Addict
    Join Date
    Jun 2006
    Posts
    220
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks all

  5. #5
    Robert Wellock silver trophybronze trophy xhtmlcoder's Avatar
    Join Date
    Apr 2002
    Location
    A Maze of Twisty Little Passages
    Posts
    6,316
    Mentioned
    60 Post(s)
    Tagged
    0 Thread(s)
    No worries, I hope it shed some light on how they are typically used in production and that many times they aren't even required.

  6. #6
    Non-Member bronze trophy
    Join Date
    Nov 2009
    Location
    Keene, NH
    Posts
    3,760
    Mentioned
    23 Post(s)
    Tagged
    0 Thread(s)
    Uhm... no anchors, nothing to keyboard nav...

    Though if you're using 'tabs' to hide and show content, unless you add scripting assistance that's really not going to work, which is why scripted or CSS tabs on websites are a miserable steaming /FAIL/ at web design...

    Though your snippet without content or showing how the tabs are actually being navigated really doesn't tell us enough to say one way or another what's actually wrong here.

  7. #7
    om nom nom nom Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,233
    Mentioned
    47 Post(s)
    Tagged
    1 Thread(s)
    Code:
    <ul id="tabbar">
        <li><a href="reading">Reading</a></li>
        <li><a href="video">Videos</a></li>
        <li><a href="images">Images</a></li>
        <li><a href="assessments">Assessments</a></li>
        <li><a href="search">Search</a></li>
        <li><a href="notebook">My notebook</a></li>
    </ul>
    These can be styled to look like tabs using CSS, and you can make them act like tabs without page refresh using Javascript (however this introduces accessibility issues, so I wouldn't recommend it, *even though* there are ARIA roles that eventually will help deal with this).

  8. #8
    SitePoint Addict
    Join Date
    Jun 2006
    Posts
    220
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I have changed my code as below. But still tab movement not working. Please help.
    <ul>
    <li id="toolbaricon_left" class="icon22"><a href="#" tabindex="99" /></li>
    <li id="toolbaricon_right" class="icon22"><a href="#" tabindex="100" /></li>
    <li>
    <form onsubmit="$('toolbaricon_jumpgo').onclick(); return false;" action="get">
    <ul>
    <li class="inputshell"><input type="text" style="width: 60px" id="toolbar_jumppg" value="jump to pg" onfocus="jumpPage_focus()" onblur="jumpPage_blur()" tabindex="101" /></li>
    <li id="toolbaricon_jumpgo" onclick="jumpPage_go()" class="icon22"><input type="image" alt="Go" src="images/toolbaricon_go.gif" onclick="return false;" tabindex="102" /></li>
    </ul>
    </form>
    </li>
    </ul>

  9. #9
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,614
    Mentioned
    413 Post(s)
    Tagged
    7 Thread(s)
    Those form elements don't belong where you have them. What are you trying to achieve here?

    Normally you can tab through links with or without tabindex. What do you mean by 'tab movement isn't working'? Have you styled you links differently when they have focus? What browser are you testing in? A live link would make this easier to assess.

  10. #10
    SitePoint Addict
    Join Date
    Jun 2006
    Posts
    220
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Please check the attached screenshot.
    screenshot.jpg

  11. #11
    Non-Member bronze trophy
    Join Date
    Nov 2009
    Location
    Keene, NH
    Posts
    3,760
    Mentioned
    23 Post(s)
    Tagged
    0 Thread(s)
    I'm more thinking why does that even have extra block level containers like the nested LI -- they serve no purpose... much less once you have something as complex as a form, IMHO it ceases to be a "list item" since it's no longer related content.

    AND you're anchors are invalid. A is NOT an 'empty element" so you can't say <a />.... note when the HTML spec refers to an empty element it means one that CANNOT contain content, not one that simply does not... If indeed you are declaring those anchors as self closing, that's invalid HTML and shouldn't work anywhere.

    On top of which the endless pointless classes and ID's on everything... not exactly a good thing. Likewise if you have to resort to tabIndex, there's likely something wrong with how you are building your page... of course calling javascript from a form action wtihout a valid action, having your METHOD value in your action... no fieldsets, no labels... and the telltales of jquery bloat...

    Not sure what you're trying to accomplish, but it doesn't look like anything that belongs on a website. That said, assuming there's some point to this I'd gut the markup down to:

    Code:
    <ul> 
    	<li id="iconBack"><a href="#">Back</a></li>
    	<li id="iconForward"><a href="#">Forward</a></li>
    </ul>
    
    <form
    	onsubmit="$('toolbaricon_jumpgo').onclick(); return false;"
    	method="GET"
    >
    	<fieldset>
    		<input
    			type="text"
    			id="toolbar_jumppg"
    			value="jump to pg"
    			onfocus="jumpPage_focus()"
    			onblur="jumpPage_blur()"
    		/>
    		<input
    			type="image" 
    			alt="Go"
    			src="images/toolbaricon_go.gif"
    		/>
    	</fieldset>
    </form>
    There's ZERO reason for a list wrapping the field elements, the form probably doesn't go inside a list, it's wrong to make anchors with no content regardless of what you're doing with images (at that point I'd sooner see an IMG tag there), and with semantic markup and all those ID's already present, there's little need for extra classes...

    Oh, an since this appears to only work when scripting is on, I'd be generating that markup in an EXTERNAL script since there's no point in wasting the users bandwidth if they don't have javascript, or are intentionally blocking it using something like the NoScript add-on for firefox or Opera's per-site permissions.

  12. #12
    SitePoint Addict
    Join Date
    Jun 2006
    Posts
    220
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Basically I am cleaning the sh*t donated by someone on my plate. I was also frustrated when I first saw this type of code. But now I don't have any other option and have to clean it.


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
  •