7

When a radio button is focused, arrow keys move the selection to the next (Down) or previous (Up) radio button in the group. This behavior is old and widespread, so lots of people have had plenty of time to get used to it. It seems like the kind of thing you shouldn't mess with, because you'd be making an interface that's inconsistent with the rest of the world.

And yet I have a web page where I think disabling the arrow keys would be helpful. Users complained that their submissions aren't recorded correctly, and observation showed that many people follow this sequence: click on a radio button, read the next part of the form, attempt to scroll with the Down arrow key.

Because the radio button still has focus, the arrow key doesn't scroll the window. It changes the radio selection. The user doesn't notice this because by this point they've moved past that and are looking at something farther down the page. So they just experience this behavior as "the arrow key didn't do anything", and go to the scrollbar to scroll down, oblivious to the fact that they have accidentally changed their answer in the radio group.

(These users are mostly on laptops with touchpads as the only pointing device, so the arrow key is more convenient than the scrollbar, and PgDn only exists as a combination involving a Fn key so it's not convenient either.)

By disabling the arrow keys I would break the expectations of everyone who knows how to operate a form from the keyboard in the standard way. But from the users I've observed it seems like the standard radio button keybindings are just no good in a scrolling window.

(A more generalized version of this question has already been asked: Changing the behavior of the arrow keys with JavaScript and the answer there was that it's correct to allow the focus to determine the arrow key behavior.)

UPDATE

Here's a sample screenshot... it's just radio buttons in a web page, nothing you haven't seen before I'm sure. More updated info below the picture...

radio buttons in a web page

It didn't occur to me until I read Matt Obee's comment that the arrow keys were the only way to change a radio button with the keyboard. I assumed tab and space bar would do it, until I actually tried that.

So here's a revised plan that I'm probably going to use: if you select a radio button with a mouse click, it responds normally and then immediately gives up focus, so that a following keypress will not be directed to the radio button. If you make your way to the radio group with tab key, then it takes focus normally and arrow keys will change the selection. Pure mouse users will be fine; pure keyboard users will be fine; the problem users who want to select answers with the mouse and scroll around with the arrow keys will be fine.

Anyone who actually wants to select an answer with the mouse and then change it with the keyboard will be out of luck, but at least they'll know what happened. I think that's the best I can do.

Improve this question
4
  • Interesting. Do you know what percentage of users display that behaviour? Can we see a screenshot of the page? I wonder if that behaviour is caused by the way it's presented. If you disable the ability to cursor up and down a radio list, how would someone who relies purely on a keyboard use the interface?
    – Matt Obee
    Sep 5, 2014 at 15:56
  • One more thing you need to think about is accessibility since there would be a number of number of users who would use a keyboard to only access content and disabling keyboard access would make it impossible for them to navigate this form.
    – Mervin
    Sep 12, 2014 at 19:14
  • If you decide to go with your own solution, you should post it as an answer to your own question.
    – Surreal Dreams
    Sep 12, 2014 at 20:41
  • @SurrealDreams I'll give the question its proper closure later; for now I'm just waiting to see if anyone finds any major flaws in my solution, or bdimag's solution. I'm feeling encouraged that there weren't any "Don't do it! It's evil!" replies yet, and also surprised that nobody else mentioned having seen the same problem before.
    – user46933
    Sep 12, 2014 at 20:56

2 Answers 2

Reset to default
6

Just a thought that may provide functionality to everyone...

Use the arrow keys to change FOCUS, instead of selection, within a group of radio buttons. If you're pressing down and reach the bottom of the group, scroll down (and pressing up on the top, scroll up). Space can be used to make a selection once it's focused (default behavior).

I've been known to go keyboard only and would find that acceptable.

Improve this answer
3
  • I don't think this solves the problem, which is based on the fact that the users don't know that the radio group has focus. It might make it worse. Attempt to scroll down by holding down the down arrow and it works, after a slight dely. What you don't know is that during that delay, you moved the selection to the bottom radio button.
    – user46933
    Sep 12, 2014 at 18:38
  • 1
    @WumpusQ.Wumbley you would have moved the focus, not the selection
    – bdimag
    Sep 12, 2014 at 19:10
  • oh I see what you meant now. That's not a bad idea. I already had another idea that I think will work though... see updates to question.
    – user46933
    Sep 12, 2014 at 19:11
2

bdimag gave a good answer, around the same time I was coming up with this one:

Make the radio buttons give up focus immediately after being selected by the mouse. An arrow key after a radio button click will not change the radio button, but the radio button selection can still be changed with the keyboard if the keyboard was used to focus it in the first place.

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.