Tab order in Pro Free registration form

[man-O-media]

Hi All...

I guess I notice this stuff because I am a big keyboard user but in my Pro Forms Free Registration form, the tab order is wrong and my guess is that this is the same issue that came up a few months ago in the post "Registration form TAB order" where I over-ran the default 100 incriments in the tab order

Once you get into my form, you can tab correctly 20 times through to the second to last field. Tab again and you are placed on the CAPTCHA refresh button. The next two tabs are the next two CAPTCHA buttons, audio and help.
Next stop is the CAPTCH text field.
And the next tab finally brings you to the last field of the form.
Then you go to the Submit button.

Another minor thing is that when the form first loads, unless there are additional controls embedded in the page above the form, the cursor focus really should be in the first field but it is not.

And I might as well ask a semi-related question.. Is it possible to set the CAPTCH to be more simple?
I realize it is more secure this way but it is really intense.

Thanks, DP

[Jason Caldwell]

Hi All...

I guess I notice this stuff because I am a big keyboard user but in my Pro Forms Free Registration form, the tab order is wrong and my guess is that this is the same issue that came up a few months ago in the post "Registration form TAB order" where I over-ran the default 100 incriments in the tab order

Once you get into my form, you can tab correctly 20 times through to the second to last field. Tab again and you are placed on the CAPTCHA refresh button. The next two tabs are the next two CAPTCHA buttons, audio and help.
Next stop is the CAPTCH text field.
And the next tab finally brings you to the last field of the form.
Then you go to the Submit button.

I know exactly what you mean. s2Member DOES set the correct tabindex for this integration, but the problem is that the JavaScript which generates the CAPTCHA box includes some anchor points on the three buttons preceding the input field. Unfortunately, this is beyond our control because that JavaScript comes from Google, and not from s2Member.

However, you might do something like this in jQuery to eliminate the issue.

Code: Select all

jQuery('a[id^="recaptcha"]').removeAttr('tabindex');

* In fact, I think I'll see if we can get this quick-fix into the next release so this is not a problem going forward.

[Jason Caldwell]

Another minor thing is that when the form first loads, unless there are additional controls embedded in the page above the form, the cursor focus really should be in the first field but it is not.

Agreed. I'll see what we can do. However, this feels like something a site owner integrating Pro Forms should do themselves, because our attempts to find a "one size fits all" approach may cause conflicts in some scenarios.

And I might as well ask a semi-related question.. Is it possible to set the CAPTCH to be more simple?
I realize it is more secure this way but it is really intense.

Not yet, not for Pro Forms. You can choose from various themes though.
See: http://code.google.com/apis/recaptcha/d ... ation.html

Shortcode Attribute that customizes the theme:

captcha="clean" When you set this Attribute, visitors must prove they're human by typing a captcha/security code. Possible values: 0 = do NOT require a captcha code on this Form; clean = DO require a captcha code on this Form; using the clean theme style. Possible theme styles include: red, white, clean, and blackglass. This service is powered by Google's reCaptcha system.

I'll see what we can do in the future to expand the options in this regard though.

[man-O-media]

I know exactly what you mean. s2Member DOES set the correct tabindex for this integration, but the problem is that the JavaScript which generates the CAPTCHA box includes some anchor points on the three buttons preceding the input field. Unfortunately, this is beyond our control because that JavaScript comes from Google, and not from s2Member.

I think you missed my real issue
I don't see a big problem with the tab order of the CAPTCHA control because disabled (blind) users who need to understand that they have landed on a CAPTCHA dialog should probably hit those controls first so they can hear the needed info. And for a non-disabled person, they will quickly see that they have not yet landed on the text field so will naturally tab a few more times until the cursor shows up in the right spot.

My problem is that the form tab order is skipping the last field of my form which comes just before the CAPTCHA control and does not get to that field untill it has passed the CAPTCHA.

However, you might do something like this in jQuery to eliminate the issue.

Code: Select all

jQuery('a[id^="recaptcha"]').removeAttr('tabindex');

* In fact, I think I'll see if we can get this quick-fix into the next release so this is not a problem going forward.

I will try this out but again, it does not seem to be a problem.

Many thanks, DP

[Jason Caldwell]

Thanks for the follow-up.

My problem is that the form tab order is skipping the last field of my form which comes just before the CAPTCHA control and does not get to that field untill it has passed the CAPTCHA.

I see. It sounds like you may have another element in some other part of your site's layout, which has a tabindex somewhere between 100-200, and therefore is creating a conflict with the Pro Form. Inspecting your site with Firebug for Firefox may reveal the issue, otherwise, please send us a link and we'll take a look for you

[man-O-media]

Hi Jason...

I don't see anything exciting but if I am reading it right, the tab index of my second to last field is 200 and the tab index of my last field is 210.
However, the CAPTCH control also has a tab index of 200.

While duplicate tab index numbers obviously could act odd, it all does add up so to speak to explain my problem.
But can I change the tab index of the CAPTCH?


The form is here: http://dunwoodygirlslacrosse.org/wp1/du ... istration/
Right now I am still using the standard registration page.

DP

[man-O-media]

It sounds like you may have another element in some other part of your site's layout, which has a tabindex somewhere between 100-200, and therefore is creating a conflict with the Pro Form. Inspecting your site with Firebug for Firefox may reveal the issue, otherwise, please send us a link and we'll take a look for you

Well, for what its worth, I am back working on my first site, the one you looked at some months ago when the overall tab index limit was increased for the wp standard reg form.
Just for kicks I created a pro free registration form and see the same problem however this one is far worse as there are more custom fields.
In this case, tab index# 200 is mid form so when you tab from there, the cursor jumps over the rest of the form to the CAPTCHA which is also tab index #200.
Then tabbing after the CAPTCHA takes you to the rest of the form.

DP

[man-O-media]

However, you might do something like this in jQuery to eliminate the issue.

Code: Select all

jQuery('a[id^="recaptcha"]').removeAttr('tabindex');

* In fact, I think I'll see if we can get this quick-fix into the next release so this is not a problem going forward.

So, whle not fully understanding which issue you were adressing with this jquery code, I tried it and I still have the tab index issue.

The CAPTCHA seems to be hard coded to be at tab index number 200 which does not make that much sense to me. When I look at "utils-captchas.inc.php", there does not seem to be a hard number set.

In any case, I have now removed the CAPTCHA from the pro form am currently working with and the tab order is just fine.

Any chance of raising the tab index numbers for the CAPCHA?


Thanks, DP

[Jason Caldwell]

Yes, thank you for reporting this!
I'll see what we can do in the next release to resolve this for Pro Forms.

[man-O-media]

Thanks... I look forward to it...

[man-O-media]

JavaScript which generates the CAPTCHA box includes some anchor points on the three buttons preceding the input field. Unfortunately, this is beyond our control because that JavaScript comes from Google, and not from s2Member.

OK, so in the latest (ver 110815) the three mundane CAPTCHA buttons are addressed.

This allows Pro Form tab controls to jump immediately to the reCAPTCHA input field, if/when enabled by your Shortcode.

Evidently, skipping the three controls is on by default. What is the short code to enable/disable the skipping of those three controls?


Thanks, DP

[Jason Caldwell]

Thanks for the follow-up.

Yes. Ah, I see what you mean. Yea, I'll see if we can get a Filter for this in the next release. Currently, there is no way to turn this on/off. In the latest release, the tabindex is off by default, and that's how it stays.

Until we get a Filter for this into the next release, you can edit this file if you like:
/s2member/includes/classes/utils-captchas.inc.php
Remove line #63 that starts with $adjustments.