The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> Some elements skipped when using TAB, unable to TAB to some HTML elements
CharlesEF
post Jan 13 2015, 04:57 PM
Post #1


Programming Fanatic
********

Group: Members
Posts: 1,800
Joined: 27-April 13
From: Edinburg, Texas
Member No.: 19,088



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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Jan 13 2015, 05:33 PM
Post #2


Computer says no.
********

Group: WDG Moderators
Posts: 19,239
Joined: 9-August 06
Member No.: 6



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
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
CharlesEF
post Jan 13 2015, 06:08 PM
Post #3


Programming Fanatic
********

Group: Members
Posts: 1,800
Joined: 27-April 13
From: Edinburg, Texas
Member No.: 19,088



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?
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Jan 14 2015, 04:29 AM
Post #4


Computer says no.
********

Group: WDG Moderators
Posts: 19,239
Joined: 9-August 06
Member No.: 6



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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
CharlesEF
post Jan 14 2015, 04:56 AM
Post #5


Programming Fanatic
********

Group: Members
Posts: 1,800
Joined: 27-April 13
From: Edinburg, Texas
Member No.: 19,088



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="#".
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Jan 14 2015, 05:02 AM
Post #6


Computer says no.
********

Group: WDG Moderators
Posts: 19,239
Joined: 9-August 06
Member No.: 6



OK. I've never checked in what order different browsers do the tabbing, I was just guessing.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
CharlesEF
post Jan 14 2015, 05:10 AM
Post #7


Programming Fanatic
********

Group: Members
Posts: 1,800
Joined: 27-April 13
From: Edinburg, Texas
Member No.: 19,088



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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Frederiek
post Jan 14 2015, 05:57 AM
Post #8


Programming Fanatic
********

Group: Members
Posts: 5,146
Joined: 23-August 06
From: Europe
Member No.: 9



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
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Jan 14 2015, 06:03 AM
Post #9


Computer says no.
********

Group: WDG Moderators
Posts: 19,239
Joined: 9-August 06
Member No.: 6



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

Odd that it doesn't work for you now though. Safari?
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Frederiek
post Jan 14 2015, 09:46 AM
Post #10


Programming Fanatic
********

Group: Members
Posts: 5,146
Joined: 23-August 06
From: Europe
Member No.: 9



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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Jan 14 2015, 02:59 PM
Post #11


Computer says no.
********

Group: WDG Moderators
Posts: 19,239
Joined: 9-August 06
Member No.: 6



Didn't gecko do that also at one point? Or wait, it probably was Opera. IPB Image
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
CharlesEF
post Jan 14 2015, 03:58 PM
Post #12


Programming Fanatic
********

Group: Members
Posts: 1,800
Joined: 27-April 13
From: Edinburg, Texas
Member No.: 19,088



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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 25th November 2020 - 11:45 PM