View
388
Download
4
Category
Preview:
Citation preview
AbilityNet Accessibility Services www.abilitynet.org.uk/webinars
Deep Dive
Building Accessible Forms
User Input Made Easy
AbilityNet Accessibility Webinar
Thursday 26 February 2015
AbilityNet Accessibility Services www.abilitynet.org.uk/webinars
Welcome
Robin Christopherson
AbilityNet
Mark Walker
AbilityNet
AbilityNet Accessibility Services www.abilitynet.org.uk/webinars
Why?
• Achieve accessibility
• Reduce abandonment rates
• Deliver a more effective user experience
What?
1. Make sure the instructions
2. Error handling
3. Mobile may be the best place to start
Building Accessible Forms
AbilityNet Accessibility Services www.abilitynet.org.uk/webinars
• Workplace Services
• Student Services
• Accessibility Services
• Free IT Support for
Disabled People
• My Computer My Way
• Tech4Good Awards
AbilityNet
Adapting Technology. Changing Lives.
AbilityNet Accessibility Services www.abilitynet.org.uk/webinars
1. Instructions
You know what that form field means,
but do your users?
• Set expectations
• Mandatory fields
• Optional fields
• Label positioning
• Expected formats
• Use of language
• Confirmation before sending
AbilityNet Accessibility Services www.abilitynet.org.uk/webinars
• Let users know what they need
beforehand
• Note how long the form is likely
to take to complete
• Can users pause and then come
back and complete later?
• How many screens does the
form have?
Setting expectations
AbilityNet Accessibility Services www.abilitynet.org.uk/webinars
• Let users know what the
mandatory field indicator is
• Add a paragraph at the beginning:
“Mandatory fields are indicated
with an asterisk (*)”
Mandatory fields I
Developer notes:
1.Have you made sure that all vital information relating to a form
field is in the label tag i.e. tips, and mandatory field identifiers?
2.Is there a span tag with a title="mandatory" or title=”required”
on the asterisk?
AbilityNet Accessibility Services www.abilitynet.org.uk/webinars
Mandatory fields II
• Code the indicator within the label for each required field:
Code snippet
<label for="name">Name *</label>
<input id="name" type="text" />
Developer notes:
1. Does all input boxes have the label (tag) element with corresponding
for and id attributes?
2. Do fields without labels have visible labels or hidden labels using
CSS? (optional)
AbilityNet Accessibility Services www.abilitynet.org.uk/webinars
Optional fields
• For greater clarity, state that all fields
are required except those indicated
purely as optional
• Can be easier for users to interpret
as no referring to a legend for
meaning of the asterisk
Developer notes:
1.Are optional fields marked?
AbilityNet Accessibility Services www.abilitynet.org.uk/webinars
Checkboxes and radio
buttons
• Make sure that labels are
positioned to the right of
the form
• Grouped checkboxes
Label positioning
Developer notes:
1.Are labels for checkboxes and radio buttons positioned to
the right of the form field?
AbilityNet Accessibility Services www.abilitynet.org.uk/webinars
Expected formats
• If you want data in a specific
format then tell the user
Code snippet:
<label for=“date">Date of birth</label>
<input id=“date" type="text" />
<span id =“example”> dd/mm/yyyy </span>
Developer notes:
1.Have you included tips or examples for expected formats?
AbilityNet Accessibility Services www.abilitynet.org.uk/webinars
Use of language
Avoid confusing opt-in\opt-out
instructions
“Don’t tick this checkbox if you don’t
want to receive updates from us”
Instead…
“Check this box if you are happy to
receive updates”www.darkpatterns.org
AbilityNet Accessibility Services www.abilitynet.org.uk/webinars
Confirmation before sending
Summarising information
that has been collected
before it is submitted
Accessibility considerations
Also related to how to
segment the form
AbilityNet Accessibility Services www.abilitynet.org.uk/webinars
2. Error Handling
Tell the user what went wrong.
Tell them how they can fix it
• Inline notifications
• ARIA alerts
• Timeouts and segmentation
• CAPTCHA
AbilityNet Accessibility Services www.abilitynet.org.uk/webinars
Inline notifications
Users will make mistakes for all
sorts of reasons
AbilityNet Accessibility Services www.abilitynet.org.uk/webinars
What went wrong
And
How they can fix it
Make sure
users know
Developer notes:
1.Have you checked every error that users might commit?
2.Have you provided examples to solve these errors?
3.Have you positioned error messages at the top of the page
or in a pop up event window?
AbilityNet Accessibility Services www.abilitynet.org.uk/webinars
• As an attribute to dynamically created
messages – e.g. form validation errors
• Best used for one time messages.
Same importance as ARIA assertive
Code snippet:
<span role="alert">First name (required)
</span>
ARIA alerts (role="alert")
Developer notes:
1.Have you checked alerts are provided visually and
for screen reader users?
AbilityNet Accessibility Services www.abilitynet.org.uk/webinars
Using ARIA alerts
• When carrying out client side validation, wrap error messages in
<div role="alert”>
• Code snippet:
var div = document.createElement('div');
div.setAttribute('role', 'alert');
div.textContent = "Accessible text";
document.body.appendChild(div);
This content will be read out as soon as it is added to the page.
AbilityNet Accessibility Services www.abilitynet.org.uk/webinars
CAPTCHA
Catch-22 for access technology
users
Audio CAPTCHA not a solution
Google No CAPTCHA? Maybe
Alternatives
• Try textcaptcha.com
• Or good spam filters
AbilityNet Accessibility Services www.abilitynet.org.uk/webinars
Testing forms
• Make sure a ‘for’ attribute and an ‘id’
attribute have both been used for each
form field.
• In the WAT Toolbar click on the ‘Structure’
tab and select ‘Fieldset/ Labels’.
• Fieldset and label elements will be
highlighted on the page.
Tools
WAT Toolbar (for Internet Explorer)
WAVE Toolbar (for Firefox)
AbilityNet Accessibility Services www.abilitynet.org.uk/webinars
3. Mobile Issues with
Accessible Forms
Problems are bigger?
• On a small screen…
• On a sunny day…
• Default font size
• Legible font choice
• Good colour contrast
• Avoid too much
scrolling
• Separate, generous
tappable areas
AbilityNet Accessibility Services www.abilitynet.org.uk/webinars
On mobile, smaller
screensizes mean using an
onscreen keyboard to enter
data is not always easy.
Use appropriate inputs where
possible e.g. dropdown boxes
where limited options are
available, checkboxes for
multi-select inputs and so on.
Mobile text input
AbilityNet Accessibility Services www.abilitynet.org.uk/webinars
Facebook mobile registration
start page
Asks for birthday but presents
full text keyboard
Control types: issue #2
AbilityNet Accessibility Services www.abilitynet.org.uk/webinars
HTML5 allows for many custom
input types
Gracefully degrade on older
devices\browsers
Provide additional support for
users of newer devices\browsers
• type=“tel”
• type=“email”
• type=“date”
• type=“url”
HTML5 input types
AbilityNet Accessibility Services www.abilitynet.org.uk/webinars
Why?
• Achieve accessibility
• Reduce abandonment rates
• Deliver a more effective user experience
What?
• Make sure the instructions
• Error handling
• Mobile may be the best place to start
Summary: Building Accessible Forms
AbilityNet Accessibility Services www.abilitynet.org.uk/webinars
Contact Us
Questions, bespoke webinars, training
sales@abilitynet.org.uk
+44 (0)1926 465 247 @abilitynet
Next AbilityNet Webinars
Dealing with RSI in the Workplace, 11th March 2015
Accessible Apps, 19th March 2015
Sign up at www.abilitynet.org.uk/webinars
Recommended