WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Form accessibility question

for

From: Steve Green
Date: Feb 15, 2013 5:48PM

The list markup does add a lot of noise for screen reader users. The only time I have encountered such a form during user testing with a screen reader user, they were highly proficient and although they complained about the lists they were still able to use the forms. This may be more of a barrier for someone less proficient - I plan to include this in some user testing later this year.

Steve Green

-----Original Message-----
From: <EMAIL REMOVED> [mailto: <EMAIL REMOVED> ] On Behalf Of Jan Heck
Sent: 15 February 2013 20:17
To: WebAIM Discussion List
Subject: [WebAIM] Form accessibility question

Someone has asked me to evaluate whether Visual Form Builder (a Wordpress
plug-in) creates accessible form code. They created a simple form for my evaluation. While the code is verbose, it does have the required id and for attributes on inputs and labels.

One thing that concerns me is that the plug-in creates all form fields as list items. I know this isn't preferred, but does it present any real accessibility problems?

I've included the code generated by Visual Form Builder below, in case anyone sees any other red flags that I've missed. All feedback is most welcome!

Jan Heck
(retired & rusty, but still trying to help where I can!)

THE CODE:
<form id="test-form" class="visual-form-builder" method="post"
enctype="multipart/form-data">
<input type="hidden" name="form_id" value="1" /> <input type="hidden" id="_wpnonce" name="_wpnonce" value="84d9b3fe38" />

<fieldset class="vfb-fieldset vfb-fieldset-1 fieldset" id="vfb-fieldset-1"> <div class="vfb-legend"><h3>Fieldset</h3></div>
<ul class="vfb-section vfb-section-1">
<li class="vfb-item vfb-item-text" id="item-vfb-name-5">
<label for="vfb-name-5" class="vfb-desc">Name</label>
<input type="text" name="vfb-5" id="vfb-name-5" value="" class="vfb-text
vfb-medium " />
</li>
<li class="vfb-item vfb-item-select" id="item-vfb-question-6">
<label for="vfb-question-6" class="vfb-desc">Question</label>
<select name="vfb-6" id="vfb-question-6" class="vfb-select vfb-medium ">
<option value="test op1">test op1</option>
<option value="test op1 2">test op1 2</option>
<option value="test op1 3">test op1 3</option>
</select>
</li>
</ul>
<br />
</fieldset>

<fieldset class="vfb-fieldset vfb-fieldset-2 verification"
id="vfb-verification-2">
<div class="vfb-legend"><h3>Verification</h3></div>
<ul class="vfb-section vfb-section-2">
<li class="vfb-item"
id="vfb-please-enter-any-two-digits-with-no-spaces-example-12-3">Logged in as <a href="http://independenceinc.org.previewdns.com/wp-admin/profile.php
<view-source:http://independenceinc.org.previewdns.com/wp-admin/profile.php
>">Admin</a>. Verification not required.</li>
<li class="vfb-item vfb-item-secret" style="display:none;">
<label for="vfb-please-enter-any-two-digits-with-no-spaces-example-12-3"
class="vfb-desc">Please enter any two digits with no spaces (Example: 12) <span>*</span></label>
<input type="hidden" name="_vfb-secret" value="vfb-3" />
<input type="text" name="vfb-3"
id="vfb-please-enter-any-two-digits-with-no-spaces-example-12-3"
value="14" class="vfb-text vfb-medium required {digits:true,maxlength:2,minlength:2}" />
<li style="display:none;">
<label for="vfb-spam">This box is for spam protection - <strong>please leave it blank</strong>:</label>
<div>
<input name="vfb-spam" id="vfb-spam" />
</div>
</li>

<li class="vfb-item vfb-item-submit" id="vfb-submit-4">
<input type="submit" name="visual-form-builder-submit" value="Submit"
class="vfb-submit " id="sendmail" />
</li>
</ul>
</fieldset>
</form>