Give an example of when inline radios are preferable (and not the default)

[fofr]

Vertical	Horizontal

What

The radio component guidance page gives documentation about the option to show radio buttons inline.

It does not give advice on when this is preferable, only when you should not use them.

The inline documentation is the only Yes/No example on the guidance, it has been misconstrued as the default, or preferred approach, for yes/no questions.

Showing yes/no vertically (rather than inline) has accessibility advantages:

• someone magnifying a screen will more easily see both radio options
• radio options are most commonly presented that way, meaning less cognitive load

Why

It is not clear when using Yes/No inline is preferable.

A good example would be when there are many questions on a page, each with short answers. Such as a yes/no survey.

Anything else

This issue was created following a discussion in the accessibility channel on the x-gov Slack.

Current guidance:

[terrysimpson99]

I support the statement:

• "The inline documentation is the only Yes/No example on the guidance, it has been misconstrued as the default, or preferred approach, for yes/no questions.".

I've heard it said by three different designers that they do yes/no as horizontal because that's the GDS style. It's difficult to persuade somebody that this is not true in the absence of a succinct statement to the contrary.

[jbuller]

I found Caroline's view that 'questions with just 2 answers should be avoided' interesting https://www.effortmark.co.uk/no-yes-no-questions/

[armstrongb]

Would it be worth considering adding a note to review all languages which might be using the inputs and whether they might have longer label values so would be more suited to vertical for all language options.

[cjforms]

Thanks @jbuller - yes, I've been campaigning against 'yes/no' questions for ages now and finally managed to get my act together to write the blog post late last year.

@fofr Yes please, definitely let's go for vertical as the preferred option. (I accidentally voted for the wrong option on your Twitter poll. Doh!)

The vertical method works much better when there are more options, and I think works somewhat better when there are only two options (in the rare case when yes/no has been thoroughly tested and proven to be the best despite everything I've said).

The horizontal method also has the problem that you have to be super, super careful to ensure that the space between the word Yes (in this example) is sufficiently far away from the round radio for the next option, in this case the radio for 'No'. The GDS spacing is only just barely enough. But then you create a different problem, which is that someone using a screen magnifier may have to scroll horizontally to find the 2nd and subsequent options - never good.

[armstrongb]

Another thought... If all other inputs are vertically aligned and ranged left, having one which is horizontally aligned 'just' because the labels are short is inconsistent for the user.

Does increased text spacing bring Yes and No labels closer to the opposing answer?