"Tab order" in a rails app

Question

In a rails app, I want users to be able to enter data without having to use a mouse.

To help do this, I want to set the order in which the cursor moves to text fields, drop-down boxes, and buttons.

Is there a way to do this?

Answer 1

I haven't tried doing this (but perhaps I should). Anyhow, w3.org has this: http://www.w3.org/TR/WCAG10-HTML-TECHS/#forms-keyboard-access which briefly describes the use of the tabindex attribute. I imagine you'd have to set it individually on your controls, which would be a little tiresome, but not dreadfully so.

I don't know if it will work, but you might consider using increments of, say, 100, so that additions in between existing controls can be made without needing to resequence the whole control list every time.

Answer 2

I'm not a rails guy, but I've used other web MVC-ish frameworks. Just a caveat :)

When you're outputting your form elements, you should be able to add additional attributes to each (such as class, onchange, etc.). You can accomplish what you want by setting the tabindex value for each, incrementing it as you go. The resulting html would look something like this:

<input type="text" id="myInput" tabindex=1 />
<select id="mySelect" tabIndex=2>
    <option id="myOpt1" value="someValue">Foo!</option>
</select>

Something like that would do job.

Also, it looks like this question has already been posted :)

Answer 3

I'm not 100% sure but I suppose you can take control of the Tab function to manage yourself the order.

In pseudo code that would make something like that

all_fields = ["field1","field2"]
current = 0
if catch event("tab pressed"){
 current = (current+1) %all_fields.size
 all_fields[current].focus
}

Once the element is selected using the keyboard you can type whatever or use the arrows to browse a dropdown menu.

You can also use tabindex http://www.w3.org/TR/html401/interact/forms.html but I never did it so I'm not sure if it would be working fine.

Last solution would be to put the fields in the order you want people to edit them.