Accessible Web Forms

01.08.2013

Accessible Web Formsadesso Tech Talk

Tom Hombergs

Web Form

Web Form

YourWeb Application

Web Form

Without Forms

With Forms

Number of Web Applications

Why Accessible?

http://badforms.com/labels-inside-fields/

http://badforms.com/this-field-is-really-really-required/

http://badforms.com/out-of-order-pay-attention-to-the-tab-order/

Can a developer workwith a badly designed form?

Reluctantly!

Can John and Jane Doe workwith a badly designed form?

With luck!

Can a blind user workwith a badly designed form?

With effort!

With badlydesigned Forms

With accessibleForms

Contentment of Users

Accessibility is to thebenefit of every user!

5 Steps to an Accessible Web Form

Example available at github

github.com/thombergs/accessible-forms-example

Online Bankingwith your eyes

Online Bankingwith your ears

(install a screen reader and open the file0-initial-form.html in a browser)

Step 1: use fieldsets

<fieldset><legend>Field Group Title</legend>…

</fieldset>

See the file 1-fieldsets.html

Step 2: use labels

<label for="name">Your name

</label><input id="name" type="text"/>

<input id="name" type="text" aria-label="Your name"/>

See the file 2-labels.html

Step 3: add field hints

<input id="name" type="text"aria-describedby="nameHint"/>

<span id="nameHint">Please enter your first and last name.

</span>

See the file 3-hints.html

Step 4: addrequired semantics

<input id="name" type="text"required="true"aria-required="true"/>

See the file 4-required-semantics.html

Step 5: addfield semantics

<input id="mail" type="email"/><input id="phone" type="text" pattern="[0-9]+"/>

<input id="birthdate" type="date"/>…

See the file 5-field-semantics.html

And what aboutWeb Frameworks?

And what about Java?Controlling the Tags means

Controlling Accessibility

JSF (XHTML Tag-Library)

<h:inputText><f:attribute name="required" value="true"/>

<f:attribute name="aria-required" value="true"/>

</h:inputText>

Wicket (HTML)

<input wicket:id="amount"type="number"required="true"aria-required="true"aria-describedby="amountHint"

/>

Wicket (Java)

amountField.add(new AttributeAppender("aria-required", "true"));

amountField.add(new AttributeAppender("aria-describedby", "amountHint"));

If your server-side frameworkcan‘t control the Tags…

…take controlwith JavaScript!

$(document).ready(function() {$("#amount").attr("required", "true");$("#amount").attr("aria-required", "true");$("#amount").attr("aria-describedby", "amountHint");$("#amount").attr("type", "number");…

});

See the file 6-accessified-with-jquery.html

Blog: thombergs.wordpress.com

E-Mail: [email protected]

Thank you for your time.

Twitter: @TomHombergs