accessible web forms
TRANSCRIPT
![Page 1: Accessible Web Forms](https://reader036.vdocuments.net/reader036/viewer/2022062419/5598baf21a28abb74a8b475e/html5/thumbnails/1.jpg)
01.08.2013
Accessible Web Formsadesso Tech Talk
Tom Hombergs
![Page 2: Accessible Web Forms](https://reader036.vdocuments.net/reader036/viewer/2022062419/5598baf21a28abb74a8b475e/html5/thumbnails/2.jpg)
![Page 3: Accessible Web Forms](https://reader036.vdocuments.net/reader036/viewer/2022062419/5598baf21a28abb74a8b475e/html5/thumbnails/3.jpg)
Web Form
![Page 4: Accessible Web Forms](https://reader036.vdocuments.net/reader036/viewer/2022062419/5598baf21a28abb74a8b475e/html5/thumbnails/4.jpg)
Web Form
![Page 5: Accessible Web Forms](https://reader036.vdocuments.net/reader036/viewer/2022062419/5598baf21a28abb74a8b475e/html5/thumbnails/5.jpg)
![Page 6: Accessible Web Forms](https://reader036.vdocuments.net/reader036/viewer/2022062419/5598baf21a28abb74a8b475e/html5/thumbnails/6.jpg)
YourWeb Application
Web Form
![Page 7: Accessible Web Forms](https://reader036.vdocuments.net/reader036/viewer/2022062419/5598baf21a28abb74a8b475e/html5/thumbnails/7.jpg)
Without Forms
With Forms
Number of Web Applications
![Page 8: Accessible Web Forms](https://reader036.vdocuments.net/reader036/viewer/2022062419/5598baf21a28abb74a8b475e/html5/thumbnails/8.jpg)
Why Accessible?
![Page 9: Accessible Web Forms](https://reader036.vdocuments.net/reader036/viewer/2022062419/5598baf21a28abb74a8b475e/html5/thumbnails/9.jpg)
http://badforms.com/labels-inside-fields/
![Page 10: Accessible Web Forms](https://reader036.vdocuments.net/reader036/viewer/2022062419/5598baf21a28abb74a8b475e/html5/thumbnails/10.jpg)
http://badforms.com/this-field-is-really-really-required/
![Page 11: Accessible Web Forms](https://reader036.vdocuments.net/reader036/viewer/2022062419/5598baf21a28abb74a8b475e/html5/thumbnails/11.jpg)
http://badforms.com/out-of-order-pay-attention-to-the-tab-order/
![Page 12: Accessible Web Forms](https://reader036.vdocuments.net/reader036/viewer/2022062419/5598baf21a28abb74a8b475e/html5/thumbnails/12.jpg)
Can a developer workwith a badly designed form?
Reluctantly!
![Page 13: Accessible Web Forms](https://reader036.vdocuments.net/reader036/viewer/2022062419/5598baf21a28abb74a8b475e/html5/thumbnails/13.jpg)
Can John and Jane Doe workwith a badly designed form?
With luck!
![Page 14: Accessible Web Forms](https://reader036.vdocuments.net/reader036/viewer/2022062419/5598baf21a28abb74a8b475e/html5/thumbnails/14.jpg)
Can a blind user workwith a badly designed form?
With effort!
![Page 15: Accessible Web Forms](https://reader036.vdocuments.net/reader036/viewer/2022062419/5598baf21a28abb74a8b475e/html5/thumbnails/15.jpg)
With badlydesigned Forms
With accessibleForms
Contentment of Users
![Page 16: Accessible Web Forms](https://reader036.vdocuments.net/reader036/viewer/2022062419/5598baf21a28abb74a8b475e/html5/thumbnails/16.jpg)
Accessibility is to thebenefit of every user!
![Page 17: Accessible Web Forms](https://reader036.vdocuments.net/reader036/viewer/2022062419/5598baf21a28abb74a8b475e/html5/thumbnails/17.jpg)
5 Steps to an Accessible Web Form
![Page 18: Accessible Web Forms](https://reader036.vdocuments.net/reader036/viewer/2022062419/5598baf21a28abb74a8b475e/html5/thumbnails/18.jpg)
Example available at github
github.com/thombergs/accessible-forms-example
![Page 19: Accessible Web Forms](https://reader036.vdocuments.net/reader036/viewer/2022062419/5598baf21a28abb74a8b475e/html5/thumbnails/19.jpg)
Online Bankingwith your eyes
Online Bankingwith your ears
(install a screen reader and open the file0-initial-form.html in a browser)
![Page 20: Accessible Web Forms](https://reader036.vdocuments.net/reader036/viewer/2022062419/5598baf21a28abb74a8b475e/html5/thumbnails/20.jpg)
Step 1: use fieldsets
<fieldset><legend>Field Group Title</legend>…
</fieldset>
See the file 1-fieldsets.html
![Page 21: Accessible Web Forms](https://reader036.vdocuments.net/reader036/viewer/2022062419/5598baf21a28abb74a8b475e/html5/thumbnails/21.jpg)
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
![Page 22: Accessible Web Forms](https://reader036.vdocuments.net/reader036/viewer/2022062419/5598baf21a28abb74a8b475e/html5/thumbnails/22.jpg)
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
![Page 23: Accessible Web Forms](https://reader036.vdocuments.net/reader036/viewer/2022062419/5598baf21a28abb74a8b475e/html5/thumbnails/23.jpg)
Step 4: addrequired semantics
<input id="name" type="text"required="true"aria-required="true"/>
See the file 4-required-semantics.html
![Page 24: Accessible Web Forms](https://reader036.vdocuments.net/reader036/viewer/2022062419/5598baf21a28abb74a8b475e/html5/thumbnails/24.jpg)
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
![Page 25: Accessible Web Forms](https://reader036.vdocuments.net/reader036/viewer/2022062419/5598baf21a28abb74a8b475e/html5/thumbnails/25.jpg)
And what aboutWeb Frameworks?
![Page 26: Accessible Web Forms](https://reader036.vdocuments.net/reader036/viewer/2022062419/5598baf21a28abb74a8b475e/html5/thumbnails/26.jpg)
And what about Java?Controlling the Tags means
Controlling Accessibility
![Page 27: Accessible Web Forms](https://reader036.vdocuments.net/reader036/viewer/2022062419/5598baf21a28abb74a8b475e/html5/thumbnails/27.jpg)
JSF (XHTML Tag-Library)
<h:inputText><f:attribute name="required" value="true"/>
<f:attribute name="aria-required" value="true"/>
</h:inputText>
![Page 28: Accessible Web Forms](https://reader036.vdocuments.net/reader036/viewer/2022062419/5598baf21a28abb74a8b475e/html5/thumbnails/28.jpg)
Wicket (HTML)
<input wicket:id="amount"type="number"required="true"aria-required="true"aria-describedby="amountHint"
/>
![Page 29: Accessible Web Forms](https://reader036.vdocuments.net/reader036/viewer/2022062419/5598baf21a28abb74a8b475e/html5/thumbnails/29.jpg)
Wicket (Java)
amountField.add(new AttributeAppender("aria-required", "true"));
amountField.add(new AttributeAppender("aria-describedby", "amountHint"));
![Page 30: Accessible Web Forms](https://reader036.vdocuments.net/reader036/viewer/2022062419/5598baf21a28abb74a8b475e/html5/thumbnails/30.jpg)
If your server-side frameworkcan‘t control the Tags…
![Page 31: Accessible Web Forms](https://reader036.vdocuments.net/reader036/viewer/2022062419/5598baf21a28abb74a8b475e/html5/thumbnails/31.jpg)
…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
![Page 32: Accessible Web Forms](https://reader036.vdocuments.net/reader036/viewer/2022062419/5598baf21a28abb74a8b475e/html5/thumbnails/32.jpg)
Blog: thombergs.wordpress.com
E-Mail: [email protected]
Thank you for your time.
Twitter: @TomHombergs