Some elements skipped when using TAB, unable to TAB to some HTML elements Options

[CharlesEF]

Hi All,

I have 2 sample pages that show my problem. On this page, when you click on the 'Permissions' button I'm unable to TAB to the 'Set' or 'Cancel' button. They are totally skipped and I see that the TAB process is tabbing through the background page, when I think it shouldn't. On the second page, found here, I can't TAB to the 'Print' button. Again, it is totally skipped. The 'Save' button is disabled until you are ready to actually save something. The 'Delete' button is disabled unless the user has delete permission. But, even when those buttons are enabled I still can't TAB to the 'Print' button. These pages are mostly dead, I only wanted to show the TAB problem.

Does anyone have any idea why I can't TAB like I think I should be able to.

[pandy]

Because those buttons are neither form controls nor links, so no reason you should be able to tab to them. That is, the A elements don't have href attributes. If you add that it should work. Also add return false to the js to stop page jump

[CharlesEF]

Boy, I can't tell you how many times I looked at the markup. I feel silly that I overlooked such a detail. I never saw any page jump but I added the return false anyway. Thank you for the help.

As for the TAB working on the background page when the 'Permissions' div is open. Is that normal? Or should it only TAB through the options on the 'Permissions' div?

[pandy]

The page uses to reload when you do the href="#" thing.

I never looked at the HTML structure and pages are gone now, but my guess is you have the pupup text at the bottom of the HTML and tabbing probably follows the order in the HTML.

[CharlesEF]

No, the popup is at the very top of the page, in order to cover all the div's on the page (header, menu, content and footer). I have placed the user page back up so you can look at it, if you want.

Since these links are not part of a form maybe it would be better if I used a <button> element instead? This way I don't have to worry about using the href="#".

[pandy]

OK. I've never checked in what order different browsers do the tabbing, I was just guessing.

[CharlesEF]

I only have 3 browsers installed and they all seem to tab in the same order. Once I'm on the 'Cancel' button another tab will take me to the 'Home' menu item. After the menu items are tabbed thru it will take me to the form items.

[Frederiek]

Although a TAB should work on A elements, it doesn't seem to work on your page for the Set and Cancel. Not even now that there is a HREF. When changing A to BUTTON (since it already is a button), then the focus is received upon TAB.

This post has been edited by Frederiek: Jan 14 2015, 05:59 AM

[pandy]

Tabbing shouldn't work for any A element, only links.

Odd that it doesn't work for you now though. Safari?

[Frederiek]

Yep, Safari.
Ah, wait, it's a preference.
When the pref is unchecked, TAB navigates through form elements only. But I can use ALT+TAB instead to navigate through links too.

[pandy]

Didn't gecko do that also at one point? Or wait, it probably was Opera.

[CharlesEF]

I'm going to change the popup <a>'s to <button>'s because no form is involved. The 'Print' <a> is in a form so I will change that to <input type="button">. I think that will solve my problems.

Thanks for the help.