E-mail List Archives

Search E-mail List Archives for

Number of posts in this thread: 2 (In chronological order)

From: Jan Heck
Date: Fri, Feb 15 2013 1:17PM
Subject: Form accessibility question
No previous message | Next message →

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>

From: Steve Green
Date: Fri, Feb 15 2013 5:48PM
Subject: Re: Form accessibility question
← Previous message | No next message

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 ADDRESS REMOVED = [mailto: = EMAIL ADDRESS 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>