1. 01.08.2013
Accessible Web Forms
adesso Tech Talk
Tom Hombergs

3. Web Form

4. Web Form

6. Your
Web Application
Web Form

7. Without Forms
With Forms
Number of Web Applications

8. Why Accessible?

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

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

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

12. Can a developer work
with a badly designed form?
Reluctantly!

13. Can John and Jane Doe work
with a badly designed form?
With luck!

14. Can a blind user work
with a badly designed form?
With effort!

15. With badly
designed Forms
With accessible
Forms
Contentment of Users

16. Accessibility is to the
benefit of every user!

17. 5 Steps to an
Accessible Web Form

18. Example available at github
github.com/thombergs/accessible-forms-example

19. Online Banking
with your eyes
Online Banking
with your ears
(install a screen reader and open the file
0-initial-form.html in a browser)

20. Step 1: use fieldsets
<fieldset>
<legend>Field Group Title</legend>
…
</fieldset>
See the file 1-fieldsets.html

21. 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

22. 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

23. Step 4: add
required semantics
<input id="name" type="text"
required="true"
aria-required="true"/>
See the file 4-required-semantics.html

24. Step 5: add
field 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

25. And what about
Web Frameworks?

26. And what about Java?
Controlling the Tags means
Controlling Accessibility

27. JSF (XHTML Tag-Library)
<h:inputText>
<f:attribute name="required"
value="true"/>
<f:attribute name="aria-required"
value="true"/>
</h:inputText>

28. Wicket (HTML)
<input wicket:id="amount"
type="number"
required="true"
aria-required="true"
aria-describedby="amountHint"
/>

29. Wicket (Java)
amountField.add(
new AttributeAppender(
"aria-required", "true"));
amountField.add(
new AttributeAppender(
"aria-describedby", "amountHint"));

30. If your server-side framework
can‘t control the Tags…

31. …take control
with 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

32. Blog: thombergs.wordpress.com
E-Mail: hombergs@adesso.de
Thank you for your time.
Twitter: @TomHombergs