Yes and No Options Cut Off From the Question

Yes, radio button

A booking form asks whether the wall is concrete. Beside the question sit two round buttons, yes and no, and to anyone looking at the screen the connection is obvious.

In the code there may be no connection at all. The question is ordinary text in one place, the buttons sit in another, and nothing tells the browser they belong together.

Someone using a screen reader, which turns the page into speech, moves to the buttons and hears: yes, radio button, not checked, one of two. Then: no, radio button.

Yes to what? They have to leave the form, hunt back through the text for the question, and hope they matched the right one.

How the connection gets lost

• Tables used for layout, with questions and options in separate cells.
• Questions set as plain text, not marked up as part of the form.
• Options labelled only yes and no, repeated down the page.
• Form tools that place the parts but never connect them.
• Copied code, reused from an older form without checking.

The third makes it worse with every question. A form with eight yes or no questions gives a screen reader user sixteen identical buttons and no way to tell them apart.

What a screen reader does in a form

Screen readers have a mode for filling in forms, in which the Tab key moves from field to field and reads what is attached to each: its label, its type and its state.

Text that is not attached to a field is skipped. That keeps long forms quick to fill in, and it is exactly why the question disappears: it is not attached to anything.

Screen magnification users are caught too. Someone who sees a small part of the screen at a time may be looking at the buttons with the question out of view.

Group the options with their question

HTML has had the answer for many years: a fieldset, which groups related fields, and a legend, which gives the group its caption.

With the yes and no buttons inside a fieldset whose legend is the question, a screen reader announces the question as the user enters the group: is the wall concrete, yes, radio button.

Where a design cannot use a fieldset, ARIA attributes, additions to HTML that describe parts of a page to assistive software, can create the same grouping. The fieldset is simpler and older.

A label for every option

Each button needs its own label too, connected to it in the code, so the word yes is read with the button.

A connected label also makes the word clickable, so the target grows from a small circle to the circle and the word together. That helps anyone on a phone, or with a tremor.

None of it changes how the form looks. It is a change in the code, not on the screen.

The whole question, in the legend

A legend should be the question itself, not a heading such as details or a code such as Q4. It is what the listener hears, so it has to make sense alone.

If the question carries a required marker or a note, such as an asterisk or answer only if you have pets, that belongs inside the legend too, or it is lost along with the question.

Error messages need the same care. Please answer this question is useless if the question never reached the listener, so name it in the message.

A worked example

A picture hanging service with two installers hangs art, mirrors and shelves in homes, condos and offices, and books most jobs through a request form on its website.

The form asked a column of yes or no questions: is any piece too heavy for one person, is the wall concrete or brick, is there an elevator, is there parking.

It had been built as a table, with questions in the left column and options in the right. Each option was labelled yes or no, and nothing tied either to a question.

A customer who uses a screen reader, newly moved into a condo full of unhung paintings, phoned to say she had given up on the form after hearing yes, radio button, again and again.

The form was rebuilt without the table. Each question became the legend of its own fieldset, with yes and no labelled and connected, and on screen it looked almost exactly as before.

Before it went back on the site, it was tested with a free screen reader on the office computer and with VoiceOver on an iPhone.

Checking your own forms

A first check needs no special tools. Click the word yes beside each option: if the button does not select, the label is not connected.

Then try the form with a screen reader. Macs and iPhones come with VoiceOver, and free screen readers are available for Windows.

Move to the first option in each group and listen. If you hear the question before the word yes, the grouping works.

WCAG 2.0, the usual reference for accessibility work, covers this under info and relationships: what is connected on the screen must be connected in the code.

Questions that need not be yes or no

Some yes or no questions work better as something else. A single optional choice, such as send me a reminder, is clearer as one checkbox with a full label.

A yes that leads to a follow-up, such as how many heavy pieces, is often better as one question offering the real answers: none, one or two, three or more.

Fewer questions help everyone, and each one removed is one less group to get right.

The counter-case

A short form with a single yes or no question, set directly above its options, is less of a puzzle, and a careful listener may work it out from what came before.

And grouping is one part of an accessible form, not all of it. Labels on text fields, clear errors and a sensible order matter as much.

But this fix is small, invisible on screen and permanent: put each set of options in a group with its question, and label every option.

The check

1. List every yes or no question on your forms.
2. Click each option's label to test it.
3. Group each set in a fieldset with a legend.
4. Write each legend as the full question.
5. Put required markers inside the legend.
6. Name the question in error messages.
7. Listen with a screen reader before relaunching.

Step three is the change itself, usually an hour or two for whoever looks after the site. Everything else on the list either checks it or completes it.

Another form control that misleads keyboard and screen reader users is covered in a drop-down list that jumps as soon as you choose.

Frequently asked questions

West Coast Media Solutions Inc. provides web design, web development, hosting, digital marketing, and business consulting to organisations across Canada, drawing on more than twenty-five years in the field.