• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Accessible Web Forms
 

Accessible Web Forms

on

  • 14,809 views

 

Statistics

Views

Total Views
14,809
Views on SlideShare
1,248
Embed Views
13,561

Actions

Likes
2
Downloads
9
Comments
0

9 Embeds 13,561

http://thombergs.wordpress.com 12029
http://wickedsource.org 1518
http://digg.com 5
http://plus.url.google.com 2
http://cloud.feedly.com 2
http://131.253.14.66 2
http://www.tuicool.com 1
http://translate.googleusercontent.com 1
https://wickedsource.org 1
More...

Accessibility

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Accessible Web Forms Accessible Web Forms Presentation Transcript

    • 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 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: add required semantics <input id="name" type="text" required="true" aria-required="true"/> See the file 4-required-semantics.html
    • 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
    • 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="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 framework can‘t control the Tags…
    • …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
    • Blog: thombergs.wordpress.com E-Mail: hombergs@adesso.de Thank you for your time. Twitter: @TomHombergs