WebAIM - Web Accessibility In Mind

E-mail List Archives

Form accessibility question

for

From: Jan Heck
Date: Feb 15, 2013 1:17PM

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>