Upload
tom-hombergs
View
16.150
Download
2
Embed Size (px)
Citation preview
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