CODEWITHSUNDEEP
jquerybrowseraccessibilityjplayertabindex
talkingnews
talkingnews

Reputation: 211

Stopping web browser tab order jumping back to start of page when keyboard navigating javascript links

This isn't jplayer or browser-specific, but in this query, it's jplayer I'm focussed on.

jplayer sets up a series of controls for previous and next tracks, bound to jquery. Blind users don't click with a mouse, they tab with a keyboard and hit enter when they hear the link they want. The problem is, it's dumping them right back at the top.

When you've got a playlist of 20 tracks to sample, it's annoying to land back at the top of the page. The code jplayer comes with is along these lines.

<li><a href="javascript:;" class="jp-play btn btn-large btn-success" > play&nbsp;</a> </li>

I thought that perhaps I could use the href of the id of itself. Although this works as far as hitting enter goes....

<li><a name="jp-stop" id="jp-stop" href="#jp-stop" class="jp-stop btn btn-large btn-primary" >stop</a></li>

... it still dumps me at the top of the page. Any suggestions greatly appreciated.

Incidentally, is there a preferred reason to use a href="javascript:;" over a href="#"?

EDIT : I tried the "dynamically changing tabindex" as discussed in reply to comment below, but not only doesn't it seem to work, but it also causes it to fail accessibility testers as tabindex shouldn't be "out of order" for the page.

I've decided to go for the lesser of two evils, accesskeys. However, I'm going to leave this open if that's OK, as I'd be very interested to know if there IS a solution.

Upvotes: 0

Views: 330

Answers (1)

phucat
phucat

Reputation: 54

href="javascript:;" over a href="#" will always scroll your browser on top.

you can use javascript:void(0) like this:

<li><a href="javascript:void(0);" class="jp-play btn btn-large btn-success" > play&nbsp;</a> </li>

and remove the href="#" to prevent browser from scrolling up.

Upvotes: 1

Related Questions