building accessible forms: abilitynet accessibility webinar 26 feb 2015

AbilityNet Accessibility Services www.abilitynet.org.uk/webinars

Deep Dive

Building Accessible Forms

User Input Made Easy

AbilityNet Accessibility Webinar

Thursday 26 February 2015


Welcome

Robin Christopherson

AbilityNet

Mark Walker

AbilityNet


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


• Workplace Services

• Student Services

• Accessibility Services

• Free IT Support for

Disabled People

• My Computer My Way

• Tech4Good Awards

AbilityNet

Adapting Technology. Changing Lives.


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


• 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


• 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?


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)


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?


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?


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?


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


Confirmation before sending

Summarising information

that has been collected

before it is submitted

Accessibility considerations

Also related to how to

segment the form


2. Error Handling

Tell the user what went wrong.

Tell them how they can fix it

• Inline notifications

• ARIA alerts

• Timeouts and segmentation

• CAPTCHA


Inline notifications

Users will make mistakes for all

sorts of reasons


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?


• 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?


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.


CAPTCHA

Catch-22 for access technology

users

Audio CAPTCHA not a solution

Google No CAPTCHA? Maybe

Alternatives

• Try textcaptcha.com

• Or good spam filters


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)


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


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


Control types: issue #1


Facebook mobile registration

start page

Asks for birthday but presents

full text keyboard



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


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


Contact Us

Questions, bespoke webinars, training

[email protected]

+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

mailto:[email protected]