Problem with keyboard navigation

Accessibility
1

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

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. :slight_smile:

3

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

Thanks all

5

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. :smiley:

6

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 

<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

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

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

Please check the attached screenshot.

11

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:


<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

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.