Date post: | 05-Jul-2015 |
Category: |
Technology |
Upload: | tom-hombergs |
View: | 16,144 times |
Download: | 2 times |
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