Web Forms: Usability and Accessibility Question.

Hi,

An experienced web developer friend asked me about accessibility in web
forms, which I found was highlighted and covered in this example and
article.

http://www.webdevtips.com/webdevtips/html/accessibility/forms.shtml
<http://www.webdevtips.com/webdevtips/html/accessibility/forms.shtml>

If possible I’d like someone with more speech reader knowledge and
experience than myself to answered some of the following…

First, if you have a two choice question answered via radio buttons, does it
read as a question when the query is in the <legend> field, followed by the
correctly marked up radio buttons.  In otherwords, does <legend> followed by
two labelled radio buttons, enclosed in <fieldset>, read that way?

Also, I have seen advice where one should always place the field label
before the field so that the user of the speech reader hears the label
before the reader focuses on the input field.  But it seems to me that if
the <label> element is used correctly, it does not matter how they arranged;
before or after, or within table cells, because any action on the label will
be transferred to the associate input field.  Is this correct?

But then again, users must be so used to forms designed without use of such
markup, they may not even know that the form has been designed with
accessibility in mind.  Is that a problem, or do they know that forms are
accessible friendly when they encounter them?

What about when a field is mandatory?  The standard way of indicating this
is with an asterisk after the label.  For accessibility this should precede
any other information in the label so that the user knows that what follows
is mandatory.  So what special techniques can others share with this?  Is
there a way of showing the asterisk last for sighted readers yet sounding it
first for people using speech readers?  The obvious first thought is via
tabindex, but <label> doesn’t have a tabindex attribute.


Simple code example 1

<form method="post" action="/dosomething">

<fieldset>
<legend accesskey=""> Post my messages from: </legend>


<label  for="asa" accesskey="">Ak Ses Abel <input id="asa" tabindex=""
type="radio" /></label>

<br />

<label for="cm" accesskey="">Code Monkey <input id="cm" tabindex=""
type="radio" /></label>

</fieldset>

</form>


or Simple code example 2 (is one preferable to the other or it doesn’t
matter?)



<form method="post" action="/dosomething">

<fieldset>
<legend accesskey=""> Post my messages from: </legend>

<input id="asa" tabindex="" type="radio" />
<label  for="asa" accesskey="">Ak Ses Abel</label>

<br />
<input id="cm" tabindex="" type="radio" />
<label for="cm" accesskey="">Code Monkey</label>

</fieldset>

</form>


Regards,
Geoff Deering

Received on Monday, 2 February 2004 22:13:29 UTC