WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Accessible Matrix Forms

for

From: Jukka K. Korpela
Date: May 11, 2006 11:20PM

On Fri, 12 May 2006, Luke Jenner wrote:

> I was wondering what people's thoughts are on making a 'matrix style'
> form accessible.

They should be replaced by accessible forms.

> Of particular interest, is how to create explicit
> labels for the controls on the form.

You cannot, in matrix design. Each radio button in a matrix logically has
two labels, the row name and the column name. But this means that you
cannot assign a label to such a button.

> An example of such a form (that I just made up in Paint) is as follows:

As far as I have understood, this mailing list, as mailing lists in
general, are for textual communication. If images are needed, they should
be uploaded onto a web server and referred to with URLs.

The image shows a part of a form rendered visually in a matrix (table)
format, with row headers "Maths", "Chemistry", and "Arts", and with column
headers "Don't want or need", "Want to develop", and "Already have", and
with small squares as each data cell's content. The squares look like
checkboxes, but I'm pretty sure that radio buttons, typically rendered as
small circles, were intended. The column headers are not easily
understandable and may reflect some special jargon. But the main issue
here is the overall structure.

> Due to screen estate and the client's needs, it is not possible to break
> up the matrix into its constituents.

Screen estate should not be a problem. It is surely sufficient for showing
one question and its alternative answers, which is all that the user needs
to see at a time. In fact, it might even be argued that it would be better
for accessibility if the user really saw just that, to avoid distractions
and to avoid problems that may arise from difficulties in maintaining an
idea of where you are in the midst of some bulky content.

What are the client's needs, and do they overrun the client's users'
needs, including the special needs of disabled people?

A matrix structure for a questionnaire, in the sense discussed here, is
bad for accessibility on several accounts. As one indication of this, try
filling out such a form without using the mouse. In nonvisual browsing,
things get even more difficult. Using accessibility-related table markup
might alleviate the problems a little, but just a little; in fact, for
structurally simple table, I don't expect such markup to have much
effect, since browsers either can deal with the situation on their own
(recognizing the first row and the first column as containing headers by
default) or won't do that even if you try to help them with scope, abbr,
and headers attributes.

Thus, it is better to put one question on one line, and then a set of
radio buttons under it, each button with its label on one line. This means
repetition, but it's much clearer and more accessible. Note that in a
matrix arrangement, many people have difficulties in remembering the
meanings of radio buttons. In visual rendering, you need to follow a
column of buttons up to the header row to see the meaning, and people may
get to a wrong track when trying to a follow a long string of buttons.
This might not be a problem with three columns, but it becomes more of a
problem with a typical setting with five or six columns.

Even better, don't use a set of radio buttons but a single text input
field, typically one character wide. In a common case where the user is
requested to express his agreement or disagreement with statements in a
scale with five alternatives, it is faster and more accessible to just
type in a digit than to select among buttons. It should not be difficult
to remember, for example, that "1" means disagreement, "5" means
agreement, and intermediate values mean intermediate opinions. Then it is
easy make "0" an answer that means "I don't want to answer", so that we
can distinguish (in form data checking and processing) such a user action
from no action, i.e. leaving a question unanswered by mistake.
In some situations, you might use nonnumeric answers, but numbers are
often the most understandable way.

I think the need for such a structure is pretty obvious. You just need to
get rid of the fixed idea of simulating a printed form. In fact, even in
printed forms, the matrix structure is questionable; it is used due to bad
habits and perhaps partly because automatic scanning is easier when you
just need to scan for the presence of ink in some circles or boxes, as
opposite to scanning text, such as digits.

> The form is dynamically generated
> and depending on the users actions, could have a lot more rows (and
> possibly two more columns) than those listed above.

This shouldn't be relevant to the issues at hand. A more accessible design
will accommodate such features; you just need to modify the dynamic
generation rather than static markup.

--
Jukka "Yucca" Korpela, http://www.cs.tut.fi/~jkorpela/