E-mail List Archives
Thread: Accessible Matrix Forms
Number of posts in this thread: 25 (In chronological order)
From: Luke Jenner
Date: Thu, May 11 2006 7:40PM
Subject: Accessible Matrix Forms
No previous message | Next message →
Hi there,
I was wondering what people's thoughts are on making a 'matrix style'
form accessible. Of particular interest, is how to create explicit
labels for the controls on the form.
An example of such a form (that I just made up in Paint) is as follows:
Due to screen estate and the client's needs, it is not possible to break
up the matrix into its constituents. 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.
I would really appreciate any feedback you may have.
Thanks,
Luke Jenner
Graduate Technical Officer
IMPORTANT: This e-mail, including any attachments, may contain private or confidential information.
If you think you may not be the intended recipient, or if you have received this e-mail in error,
please contact the sender immediately and delete all copies of this e-mail. If you are not the intended
recipient, you must not reproduce any part of this e-mail or disclose its contents to any other party.
This email represents the views of the individual sender, which do not necessarily reflect those of
education.au limited except where the sender expressly states otherwise.
It is your responsibility to scan this email and any files transmitted with it for viruses or any other
defects.
education.au limited will not be liable for any loss, damage or consequence caused directly or indirectly by this email.
From: Michael Herring
Date: Thu, May 11 2006 8:20PM
Subject: Re: Accessible Matrix Forms
← Previous message | Next message →
> I was wondering what peoples thoughts are on making a matrix
> style form accessible. Of particular interest, is how to create
> explicit labels for the controls on the form.
>
> Due to screen estate and the clients needs, it is not possible to
> break up the matrix into its constituents. 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.
I'm not sure if this is exactly what you need, but you may be able to
tweak it to your specifications:
http://www.michaelherring.net/access/matrix.html
It's a bit goofy for mouse navigation if you're used to clicking on
labels to active input fields.
-Michael
From: Jukka K. Korpela
Date: Thu, May 11 2006 11:20PM
Subject: Re: Accessible Matrix Forms
← Previous message | Next message →
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/
From: Alastair Campbell
Date: Fri, May 12 2006 2:40AM
Subject: RE: Accessible Matrix Forms
← Previous message | Next message →
Jukka K. Korpela wrote:
"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."
I think this is a real problem then, a lot of surveys and questionnaires
use these, including government and research forms.
It appears structurally that it should be fine in a table, using
headings to act as pseudo-labels. Except I'm pretty sure that doesn't
works in 'forms mode' in screen readers.
Do these forms present a problem to anyone else? Assuming the are not so
big as to require a lot of scrolling for people with small screens or
magnifiers, and so long as the terminology is understandable (a grey
area, I know).
I tackled this once before, and ended up with each 'row' (not using a
table) in a fieldset, and hiding labels next to each radio button. Are
there any other options?
Kind regards,
-Alastair
--
Alastair Campbell | Director of User Experience
Nomensa Email Disclaimer:
http://www.nomensa.com/email-disclaimer.html
From: Patrick Lauke
Date: Fri, May 12 2006 2:50AM
Subject: RE: Accessible Matrix Forms
← Previous message | Next message →
> Alastair Campbell
> I tackled this once before, and ended up with each 'row' (not using a
> table) in a fieldset, and hiding labels next to each radio button. Are
> there any other options?
Possibly using a title on the radio buttons, rather than labels that need
to be hidden?
P
________________________________
Patrick H. Lauke
Web Editor / University of Salford
http://www.salford.ac.uk
________________________________
Web Standards Project (WaSP) Accessibility Task Force
http://webstandards.org/
________________________________
From: Alastair Campbell
Date: Fri, May 12 2006 3:10AM
Subject: RE: Accessible Matrix Forms
← Previous message | Next message →
Patrick Lauke wrote:
> Possibly using a title on the radio buttons, rather than
> labels that need to be hidden?
I think I've missed an earlier discussion or two about titles on form
elements, but is that enough for screen readers?
If titles aren't read out by default (or at the user's regular verbosity
level), aren't they left without an indication for the radio button's
purpose?
Cheers,
-Alastair
--
Alastair Campbell | Director of User Experience
Nomensa Email Disclaimer:
http://www.nomensa.com/email-disclaimer.html
From: Helen A
Date: Fri, May 12 2006 6:30AM
Subject: RE: Accessible Matrix Forms
← Previous message | Next message →
At 09:35 12/05/2006, Alastair Cambell wrote:
>Do these forms present a problem to anyone else? Assuming the are not so
>big as to require a lot of scrolling for people with small screens or
>magnifiers, and so long as the terminology is understandable (a grey
>area, I know).
I have no visual problems but I hate them as I can never remember
what the radio buttons stand for once I get halfway down the list. I
also find that on 'bad muscle days' the accuracy needed to get the
correct button marked is a lot more than a tick box/check box would be.
--
Helen Aveling
www.livingwithwheels.co.uk
Why doesn't life come with an Undo button?
From: Alastair Campbell
Date: Fri, May 12 2006 7:00AM
Subject: RE: Accessible Matrix Forms
← Previous message | Next message →
> I have no visual problems but I hate them as I can never remember
> what the radio buttons stand for once I get halfway down the list.
Good point, they shouldn't get too long. I would assume that too long is
more than about 5 rows?
Just thinking through possibilities, you could set up a fixed 'header'
that stays in view, just above the current 3/4 rows. That does introduce
another complexity (scrolling), but might help overall.
> I also find that on 'bad muscle days' the accuracy needed to get
> the correct button marked is a lot more than a tick box/check box
> would be.
I'm not sure why that would be different for checkboxes in this format?
A nice trick is to make the hit area quite large, by padding around the
checkbox. An example would be:
http://ukwindsurfing.com/results/2005/rankings_fw
(That does include visible labels, though you wouldn't have to.)
Kind regards,
-Alastair
--
Alastair Campbell | Director of User Experience
t. +44 (0)117 929 7333 | = EMAIL ADDRESS REMOVED =
Nomensa Email Disclaimer:
http://www.nomensa.com/email-disclaimer.html
From: Helen A
Date: Fri, May 12 2006 7:20AM
Subject: RE: Accessible Matrix Forms
← Previous message | Next message →
At 13:53 12/05/2006, Alistair Campbell wrote replying to me:
> > I also find that on 'bad muscle days' the accuracy needed to get
> > the correct button marked is a lot more than a tick box/check box
> > would be.
>
>I'm not sure why that would be different for checkboxes in this format?
Its because if you tab through and dont quite manage to jump to the
next question I can end up with the wrong radio button selected by
accident. Tick boxes make this less likely with me.
--
Helen Aveling
www.livingwithwheels.co.uk
Why doesn't life come with an Undo button?
From: Andrew Kirkpatrick
Date: Fri, May 12 2006 8:40AM
Subject: RE: Accessible Matrix Forms
← Previous message | Next message →
> > 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.
Radio buttons that aren't in a matrix have two labels also. Using
fieldset is one solution with the legend for the radio button prompt in
the row heading.
I would make this without a table, using fieldset for the prompt and
either use explicit labels that are moved offscreen or use the title
attribute on the radio input. Jim Thatcher will chime in soon, but the
title attribute is read by default on form controls, irrespective of the
user's verbosity setting for title attribute reading.
AWK
From: Andrew Kirkpatrick
Date: Fri, May 12 2006 8:50AM
Subject: RE: Accessible Matrix Forms
← Previous message | Next message →
That looks great. It is true that clicking on the labels is lost, but
that's true for all matrix-style forms.
It would be good to have people bang on it with assistive technologies
(I just tried a few and it works well), but assuming that all is well I
think that this could be sent in to the WCAG group as a potential
technique to be referenced in WCAG 2.0.
AWK
> -----Original Message-----
> From: = EMAIL ADDRESS REMOVED =
> [mailto: = EMAIL ADDRESS REMOVED = ] On Behalf Of
> Michael Herring
> Sent: Friday, May 12, 2006 10:35 AM
> To: WebAIM Discussion List
> Subject: RE: [WebAIM] Accessible Matrix Forms
>
> > I would make this without a table, using fieldset for the
> prompt and
> > either use explicit labels that are moved offscreen or use
> the title
> > attribute on the radio input.
>
> Perhaps I should have mentioned to view source (or disable
> CSS) on this
> example:
> http://www.michaelherring.net/access/matrix.html
>
> -Michael
>
>
>
>
From: Daniel Champion
Date: Fri, May 12 2006 9:00AM
Subject: RE: Accessible Matrix Forms
← Previous message | Next message →
Michael wrote:
> Perhaps I should have mentioned to view source (or disable CSS) on
> this example:
> http://www.michaelherring.net/access/matrix.html
As a sighted mouse-user I prefer it unstyled, with the fieldsets visible
and the labels 'clickable' against each checkbox. For me it's more
attractive, has much better visual structure and has greater utility.
Is that just me?
Dan
--
Daniel Champion - Web Dev Mgr - Clackmannanshire Council
e: = EMAIL ADDRESS REMOVED = t: 01259 452258
f: 01259 452265 w: http://www.clacksweb.org.uk
This email and any attachments have been scanned for viruses prior to leaving Clackmannanshire Council.
Clackmannanshire Council will not be liable for any losses as a result of viruses being passed on.
www.clacksweb.org.uk
From: Austin, Darrel
Date: Fri, May 12 2006 9:20AM
Subject: RE: Accessible Matrix Forms
← Previous message | Next message →
> I have no visual problems but I hate them as I can never
> remember what the radio buttons stand for once I get halfway
> down the list.
Accessibility is important, but if it isn't usable either, what's the
point? I would agree with Helen...these types of forms just aren't very
usable...a person has to do a ton of row/column scanning with their
eyes, scroll the page back and forth if the headers scroll off screen,
have to aim the mouse onto a small area to check the box, etc.
As for the example:
http://www.michaelherring.net/access/matrix.html
Horizontally, you're already taking up space for the column headers as
it is. Just remove the headers and put them as labels for each row. Same
space. More usable. Note Michael's un-styled version. It actually uses
less screen real estate.
-Darrel
From: Michael Herring
Date: Fri, May 12 2006 9:40AM
Subject: RE: Accessible Matrix Forms
← Previous message | Next message →
> I would make this without a table, using fieldset for the prompt and
> either use explicit labels that are moved offscreen or use the title
> attribute on the radio input.
Perhaps I should have mentioned to view source (or disable CSS) on this
example:
http://www.michaelherring.net/access/matrix.html
-Michael
From: Helen A
Date: Fri, May 12 2006 9:50AM
Subject: RE: Accessible Matrix Forms
← Previous message | Next message →
At 16:16 12/05/2006, Darrel Austin wrote:
> > I have no visual problems but I hate them as I can never
> > remember what the radio buttons stand for once I get halfway
> > down the list.
>
>Accessibility is important, but if it isn't usable either, what's the
>point? I would agree with Helen...these types of forms just aren't very
>usable...a person has to do a ton of row/column scanning with their
>eyes, scroll the page back and forth if the headers scroll off screen,
>have to aim the mouse onto a small area to check the box, etc.
Personally I still favour boxes to buttons :)
>As for the example:
>http://www.michaelherring.net/access/matrix.html
>Horizontally, you're already taking up space for the column headers as
>it is. Just remove the headers and put them as labels for each row. Same
>space. More usable. Note Michael's un-styled version. It actually uses
>less screen real estate.
I'm being dim here, but where is the setting to disable style sheets in IE6?
--
Helen Aveling
www.livingwithwheels.co.uk
Why doesn't life come with an Undo button?
From: Austin, Darrel
Date: Fri, May 12 2006 10:00AM
Subject: RE: Accessible Matrix Forms
← Previous message | Next message →
> I'm being dim here, but where is the setting to disable style
> sheets in IE6?
I have no idea. I use firefox + webdev toolbar, in which case it's a
matter of CNTL+SHIFT+S. It's a really handy feature.
-Darrel
From: Michael Herring
Date: Fri, May 12 2006 10:20AM
Subject: RE: Accessible Matrix Forms
← Previous message | Next message →
> I'm being dim here, but where is the setting to disable style sheets
in IE6?
For IE6, I'd recommend the "Toggle CSS style sheets" favelet at
http://tantek.com/favelets/
To install as a bookmark in IE6 takes a few steps, since I don't think
you can just drag javascript links into your Links toolbar anymore.
1) Right-click on the "Toggle CSS style sheets" link and choose "Copy
Shortcut"
2) Add http://tantek.com/favelets/ to your favorites
3) Go to Favorites > Organize Favorites
4) Right Click the "Favelets" favorite and choose Properties
5) Paste the javascript into the URL field in the "Web Document" tab
6) Go to the "General" tab and change the title to "Toggle CSS" or
something like that
-Michael
From: ben morrison
Date: Fri, May 12 2006 10:30AM
Subject: Re: Accessible Matrix Forms
← Previous message | Next message →
On 5/12/06, Austin, Darrel < = EMAIL ADDRESS REMOVED = > wrote:
>
> > I'm being dim here, but where is the setting to disable style
> > sheets in IE6?
>
A useful tool is the accessibility toolbar
http://www.visionaustralia.org.au/info.aspx?page=614
ben
From: John Foliot
Date: Fri, May 12 2006 1:30PM
Subject: RE: Accessible Matrix Forms
← Previous message | Next message →
Helen A wrote:
>
> Personally I still favour boxes to buttons :)
A few years ago I had the opportunity to do some form testing with a
mobility impaired user (quadriplegic), and we were able to determine that
dropdowns (select) were easier still, as both radio buttons and checkboxes
are smallish targets for user with poor motor control skills (he was using
Dragon at the time). FWIW.
JF
From: Jukka K. Korpela
Date: Fri, May 12 2006 2:40PM
Subject: RE: Accessible Matrix Forms
← Previous message | Next message →
On Fri, 12 May 2006, Andrew Kirkpatrick wrote:
> Radio buttons that aren't in a matrix have two labels also.
The point is that when you don't use a matrix, you can assign a label to
each radio button without difficulty. In a matrix, you would have to put
the label into the cell where the button resides.
> Using
> fieldset is one solution with the legend for the radio button prompt in
> the row heading.
I don't see how that would affect the label issue.
> I would make this without a table, using fieldset for the prompt and
> either use explicit labels that are moved offscreen or use the title
> attribute on the radio input.
We're more or less supposed to use a fieldset element for a set of radio
buttons, though in practice, a heading or just heading-like text is almost
as good as a legend - and causes fewer protests from visual designers.
Using something and moving it offscreen sounds trickery, and it _is_
trickery. So is the title attribute, which is supposed to be, and which is
in reality, an advisory title that may or may not be accessible to the
user and noticed by him. Such ideas are based on mental models that only
cover "normal" use of a graphic browser on one hand and some assumed
assistive technologies du jour on the other.
> Jim Thatcher will chime in soon, but the
> title attribute is read by default on form controls, irrespective of the
> user's verbosity setting for title attribute reading.
On some assistive technologies, yes. That covers about 1 % of users or
less. Many other users have accessibility problems too. In particular,
labels would be relevant to people who wish to use a graphic browser with
a mouse but have a minor motoric disability, so that it is difficult to
click exactly on a small button.
My point is that this is clumsy and unreliably trickery, aiming at making
an imitation of a paper questionnaire more accessible instead of designing
a form that works well in the web context.
--
Jukka "Yucca" Korpela, http://www.cs.tut.fi/~jkorpela/
From: Andrew Kirkpatrick
Date: Fri, May 12 2006 3:20PM
Subject: RE: Accessible Matrix Forms
← Previous message | Next message →
> We're more or less supposed to use a fieldset element for a
> set of radio buttons, though in practice, a heading or just
> heading-like text is almost as good as a legend - and causes
> fewer protests from visual designers.
It is not as good. A fieldset creates a semantic relationship that
defines the start and end of the grouping.
> On some assistive technologies, yes. That covers about 1 % of
> users or less. Many other users have accessibility problems
> too. In particular, labels would be relevant to people who
> wish to use a graphic browser with a mouse but have a minor
> motoric disability, so that it is difficult to click exactly
> on a small button.
The problem is that there is not agreement on your point that the matrix
form is inherently bad. You could make a version of a form that make it
much more clear which label went with which radio, and you could make it
so that there was a much larger hit area too.
Can you envision a solution where a mstrix form would satisfy your
requirements without repeating the same labels over and over? If we
can't deal with issues like this, then accessibility won't permeate
design implementations anytime soon.
> My point is that this is clumsy and unreliably trickery,
> aiming at making an imitation of a paper questionnaire more
> accessible instead of designing a form that works well in the
> web context.
We need to be able to do this. At a minimum, we need a best-practice
for this inevitable situation. Not every argument between a designer
and accessibility advocate is won by the advocate. What's the next best
thing to prevailing in that discussion?
awk
From: smithj7
Date: Fri, May 12 2006 9:50PM
Subject: RE: Accessible Matrix Forms
← Previous message | Next message →
Go to tools, internet options, then pick accessiblity. Select to ignore
all three of the items listed (colors, fonts, and something else.)
-----Original Message-----
From: = EMAIL ADDRESS REMOVED =
[mailto: = EMAIL ADDRESS REMOVED = ] On Behalf Of Helen A
Sent: Friday, May 12, 2006 11:47 AM
To: = EMAIL ADDRESS REMOVED =
Subject: RE: [WebAIM] Accessible Matrix Forms
At 16:16 12/05/2006, Darrel Austin wrote:
> > I have no visual problems but I hate them as I can never remember
> > what the radio buttons stand for once I get halfway down the list.
>
>Accessibility is important, but if it isn't usable either, what's the
>point? I would agree with Helen...these types of forms just aren't very
>usable...a person has to do a ton of row/column scanning with their
>eyes, scroll the page back and forth if the headers scroll off screen,
>have to aim the mouse onto a small area to check the box, etc.
Personally I still favour boxes to buttons :)
>As for the example: http://www.michaelherring.net/access/matrix.html
>Horizontally, you're already taking up space for the column headers as
>it is. Just remove the headers and put them as labels for each row.
Same
>space. More usable. Note Michael's un-styled version. It actually uses
>less screen real estate.
I'm being dim here, but where is the setting to disable style sheets in
IE6?
--
Helen Aveling
www.livingwithwheels.co.uk
Why doesn't life come with an Undo button?
Address list
messages to = EMAIL ADDRESS REMOVED =
From: Jukka K. Korpela
Date: Sun, May 14 2006 3:20PM
Subject: RE: Accessible Matrix Forms
← Previous message | Next message →
On Fri, 12 May 2006, smithj7 wrote:
> Go to tools, internet options, then pick accessiblity. Select to ignore
> all three of the items listed (colors, fonts, and something else.)
And font sizes. Useful - or even necessary - as this may be, it does not
mean turning style sheets off, which was the question. There is no normal
way to switch styles off on IE. You can override any particular CSS rule,
though, in a user style sheet.
--
Jukka "Yucca" Korpela, http://www.cs.tut.fi/~jkorpela/
From: smithj7
Date: Sun, May 14 2006 6:00PM
Subject: RE: Accessible Matrix Forms
← Previous message | Next message →
You are right. I don't know where my mind is sometimes. At work I have
a little widget to get rid of style sheets. I think I downloaded it
from http://www.htmlhelp.com/tools/widgets/
-----Original Message-----
From: = EMAIL ADDRESS REMOVED =
[mailto: = EMAIL ADDRESS REMOVED = ] On Behalf Of Jukka K.
Korpela
Sent: Sunday, May 14, 2006 5:11 PM
To: WebAIM Discussion List
Subject: RE: [WebAIM] Accessible Matrix Forms
On Fri, 12 May 2006, smithj7 wrote:
> Go to tools, internet options, then pick accessiblity. Select to
> ignore
> all three of the items listed (colors, fonts, and something else.)
And font sizes. Useful - or even necessary - as this may be, it does not
mean turning style sheets off, which was the question. There is no
normal
way to switch styles off on IE. You can override any particular CSS
rule,
though, in a user style sheet.
--
Jukka "Yucca" Korpela, http://www.cs.tut.fi/~jkorpela/
Address list
messages to = EMAIL ADDRESS REMOVED =
From: Moore, Michael
Date: Mon, May 15 2006 7:00AM
Subject: RE: Accessible Matrix Forms
← Previous message | No next message
You are right. I don't know where my mind is sometimes. At work I have
a little widget to get rid of style sheets. I think I downloaded it
from http://www.htmlhelp.com/tools/widgets/
Another useful tool, which will allow you to turn off style sheets along
with a host of other functions is the Accessibility Toolbar at Vision
Australia. The best news that it is free.
http://www.visionaustralia.org.au/info.aspx?page=614
Mike Moore