Your SlideShare is downloading. ×
0
01.08.2013
Accessible Web Forms
adesso Tech Talk
Tom Hombergs
Web Form
Web Form
Your
Web 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 work
with a badly designed form?
Reluctantly!
Can John and Jane Doe work
with a badly designed form?
With luck!
Can a blind user work
with a badly designed form?
With effort!
With badly
designed Forms
With accessible
Forms
Contentment of Users
Accessibility is to the
benefit of every user!
5 Steps to an
Accessible Web Form
Example available at github
github.com/thombergs/accessible-forms-example
Online Banking
with your eyes
Online Banking
with your ears
(install a screen reader and open the file
0-initial-form.html...
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-...
Step 3: add field hints
<input id="name" type="text"
aria-describedby="nameHint"/>
<span id="nameHint">
Please enter your ...
Step 4: add
required semantics
<input id="name" type="text"
required="true"
aria-required="true"/>
See the file 4-required...
Step 5: add
field semantics
<input id="mail" type="email"/>
<input id="phone" type="text"
pattern="[0-9]+"/>
<input id="bi...
And what about
Web 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=...
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(
"...
If your server-side framework
can‘t control the Tags…
…take control
with JavaScript!
$(document).ready(function() {
$("#amount").attr("required", "true");
$("#amount").attr("ar...
Blog: thombergs.wordpress.com
E-Mail: hombergs@adesso.de
Thank you for your time.
Twitter: @TomHombergs
Accessible Web Forms
Accessible Web Forms
Upcoming SlideShare
Loading in...5
×

Accessible Web Forms

16,212

Published on

Published in: Technology, Design
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
16,212
On Slideshare
0
From Embeds
0
Number of Embeds
12
Actions
Shares
0
Downloads
13
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Transcript of "Accessible Web Forms"

  1. 1. 01.08.2013 Accessible Web Forms adesso Tech Talk Tom Hombergs
  2. 2. Web Form
  3. 3. Web Form
  4. 4. Your Web Application Web Form
  5. 5. Without Forms With Forms Number of Web Applications
  6. 6. Why Accessible?
  7. 7. http://badforms.com/labels-inside-fields/
  8. 8. http://badforms.com/this-field-is-really-really-required/
  9. 9. http://badforms.com/out-of-order-pay-attention-to-the-tab-order/
  10. 10. Can a developer work with a badly designed form? Reluctantly!
  11. 11. Can John and Jane Doe work with a badly designed form? With luck!
  12. 12. Can a blind user work with a badly designed form? With effort!
  13. 13. With badly designed Forms With accessible Forms Contentment of Users
  14. 14. Accessibility is to the benefit of every user!
  15. 15. 5 Steps to an Accessible Web Form
  16. 16. Example available at github github.com/thombergs/accessible-forms-example
  17. 17. 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)
  18. 18. Step 1: use fieldsets <fieldset> <legend>Field Group Title</legend> … </fieldset> See the file 1-fieldsets.html
  19. 19. 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
  20. 20. 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
  21. 21. Step 4: add required semantics <input id="name" type="text" required="true" aria-required="true"/> See the file 4-required-semantics.html
  22. 22. 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
  23. 23. And what about Web Frameworks?
  24. 24. And what about Java? Controlling the Tags means Controlling Accessibility
  25. 25. JSF (XHTML Tag-Library) <h:inputText> <f:attribute name="required" value="true"/> <f:attribute name="aria-required" value="true"/> </h:inputText>
  26. 26. Wicket (HTML) <input wicket:id="amount" type="number" required="true" aria-required="true" aria-describedby="amountHint" />
  27. 27. Wicket (Java) amountField.add( new AttributeAppender( "aria-required", "true")); amountField.add( new AttributeAppender( "aria-describedby", "amountHint"));
  28. 28. If your server-side framework can‘t control the Tags…
  29. 29. …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
  30. 30. Blog: thombergs.wordpress.com E-Mail: hombergs@adesso.de Thank you for your time. Twitter: @TomHombergs
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×