1.
Accessible & Usable Web Forms.
Your How To Guide!
Rabab Gomaa
@RubysDo
Confoo.ca. March 11th
, 2017
http://bit.do/webforms

2.
2
Objective
To explore coding techniques that make web forms
accessible and usable for all users and in particular for
people who use screen readers or keyboards.
@RubysDo “Accessible & Usable Web Forms. Your How To Guide!” http://bit.do/webforms

3.
3
Table of Contents
• What is an “accessible & usable” web form?
• Keyboard users examples
• What is WAI-ARIA & how screen readers navigate
web forms?
• Coding Techniques
1. Labeling & Grouping Controls
2. Form Instructions
3. Validating Input & User Notifications
4. Multi-page Forms
5. Dialog boxes
• Summary
• Questions (10 mins)
@RubysDo “Accessible & Usable Web Forms. Your How To Guide!” http://bit.do/webforms

4.
4
What is an “accessible and usable”
web form?
• A web form that users with disability can
understand, perceive, interact with without
barriers
• A web form that is designed to be easy to
use!
References:
W3C (2015, May 21). Notes on Using ARIA in HTML. Retrieved from https://www.w3.org/TR/aria-in-html/
WAI-ARIA Overview (2016, Jan 15). Retrieved from https://www.w3.org/WAI/intro/aria
@RubysDo “Accessible & Usable Web Forms. Your How To Guide!” http://bit.do/webforms

5.
5
Keyboard Users
Examples (1/2)
• Blind users
{use of screen reader e.g. JAWS, NVDA, Voice Over, etc.}
• Motor / physical disability
{Parkinson disease, hand tremor, heart attack consequence}
Snapshot sources:
Keyguard retrieved from from https://www.youtube.com/watch?v=zFv2myGVhl8
Mouse stick and head Wand retrieved from from http://webaim.org/articles/motor/assistive
Mouse stick user snapshot retrieved from https://www.w3.org/WAI/perspectives/keyboard.html
@RubysDo “Accessible & Usable Web Forms. Your How To Guide!” http://bit.do/webforms
Keyguard is raised above the keyboard to guide
him to the specific key without making mistakes
Mouse stick Rubber tip to give better traction on keyboard, and
end to insert into the mouth.
Head Wand: A person moves the head to make the head wand
type characters, navigate through web pages

6.
6
Keyboard Users
Examples (2/2)
• Temporary limited mobility
{broken arm}
• Computer problem
{Mouse is not functional}
• Preference / situations
{Use of laptop on the bed, standing up in metro or airport, carry
a baby with one hand}
References:
snapshot of keyguard from https://www.youtube.com/watch?v=zFv2myGVhl8
@RubysDo “Accessible & Usable Web Forms. Your How To Guide!” http://bit.do/webforms

7.
7
Using WAI-ARIA (1)
Accessible Rich Internet Applications (WAI-ARIA)
• WAI-ARIA defines a way to make Web
content and Web applications more
accessible to people with disabilities.
• Example:
References:
W3C (2015, May 21). Notes on Using ARIA in HTML. Retrieved from https://www.w3.org/TR/aria-in-html/
WAI-ARIA Overview (2016, Jan 15). Retrieved from https://www.w3.org/WAI/intro/aria
@RubysDo “Accessible & Usable Web Forms. Your How To Guide!” http://bit.do/webforms

8.
8
Using WAI-ARIA (2)
Accessible Rich Internet Applications (WAI-ARIA)
User Agent Support for WAI-ARIA:
•“User Agent support for WAI-ARIA varies, but overall support for WAI-
ARIA is improving” (W3C, ARIA Techniques for WCAG 2.0.)
First rule of using ARIA:
•Use a native HTML element instead of ARIA as long as it
is possibleReferences:
W3C (2015, May 21). Notes on Using ARIA in HTML. Retrieved from https://www.w3.org/TR/aria-in-html/
W3C, ARIA Techniques for WCAG 2.0. Retrieved from https://www.w3.org/TR/WCAG20-TECHS/aria
@RubysDo “Accessible & Usable Web Forms. Your How To Guide!” http://bit.do/webforms
Reliability Trend for aria-describedby
Last updated October 16, 2016
Source: https://goo.gl/GRBTo7

9.
9
Using WAI-ARIA (3)
Keyboard Demo
<button> vs. <a role="button“> when pressing "spacebar" key
https://youtu.be/KCyC9CUFiDw
Notice:
Pressing “Spacebar” key on a link makes the page scroll down. The link is not activated.
•<button> can be activated using “Enter” or Spacebar” keyboard keys .
•<a>, <a role=“button”> can be activated using “Enter” key only.
@RubysDo “Accessible & Usable Web Forms. Your How To Guide!” http://bit.do/webforms
<button> vs <a role=“button”>

10.
10
Using WAI-ARIA (4)
Repurposing a <div> to radio group
@RubysDo “Accessible & Usable Web Forms. Your How To Guide!” http://bit.do/webforms
• Many considerations for keyboard interaction
• Many WAI-ARIA roles, states and properties
involved
Learn More on required effort:
https://www.w3.org/TR/wai-aria-practices-1.1/#radiobutton
When possible use native HTML element e.g. radio group instead of repurposing
<div> to function as a radio group.
Why?

11.
11
Using WAI-ARIA (3)
Under what circumstances?
• “If the feature is available in HTML [HTML5.1] but it
is not implemented or it is implemented, but
accessibility support is not.
• If the visual design constraints rule out the use of a
particular native element, because the element
cannot be styled as required.
• If the feature is not currently available in HTML.”
(W3C, Notes on Using ARIA in HTML)
Reference:
W3C (2015, May 21). Notes on Using ARIA in HTML. Retrieved from https://www.w3.org/TR/aria-in-html/
@RubysDo “Accessible & Usable Web Forms. Your How To Guide!” http://bit.do/webforms

12.
12
How screen readers
navigate web forms?
• Screen readers inform users when they
have entered into a form “Forms Mode” by
playing a sound
• In “Forms Mode” :
• User can edit input fields and interact with form
elements
• User generally navigate through a form using the TAB
key for next control and SHIFT+TAB for previous
control
• Demos of today are done using JAWS 17
Reference:
Freedom Scientific. Using Forms with JAWS and MAGic L. Retrieved from http://www.freedomscientific.com/Training/Surfs-Up/Forms.htm
WebAIM. Creating Accessible Forms. Retrieved from http://webaim.org/techniques/forms/
@RubysDo “Accessible & Usable Web Forms. Your How To Guide!” http://bit.do/webforms

13.
13
Screen readers navigate web forms
How does this matter?
Scenario of Failure : Jaws user fails to interact with a form
Non-accessible
Mimic of form element coded using <div>s and
<span>s
Accessible
Form element coded using HTML form controls
<label>& <select>
Snapshot 1 captured from JIRA Issue Tracking v7.1
• Developer used <div>s and <span>s and on-hover event (and not on
focus) to edit assignee name instead of select element
• Jaws user hears no switch to forms mode and missed the edit feature
(1)
(2)
Labeling Controls
. Association of labels
. Invisible labels
. Visual position
Grouping Controls
Form Instructions
Validating Input &
User Notifications
Multi-page Forms
Dialog Boxes
Summary
@RubysDo “Accessible & Usable Web Forms. Your How To Guide!” http://bit.do/webforms

14.
14
Labeling Controls
• “Associating labels with form controls allows
assistive technology to recognize the label and
present it to the user”WCAG WG, EOWG (2015, March 2)
• Possible ways of associating labels and form
controls:
1. <label> & for/id attributes (recommended)
2. aria-labelledby attribute
3. wrapping <label> around text and control
Reference:
WCAG WG, EOWG (2015, March 2). Forms Concepts. Retrieved from http://www.w3.org/WAI/tutorials/forms/
Labeling Controls
. Association of labels
. Invisible labels
. Visual position
Grouping Controls
Form Instructions
Validating Input &
User Notifications
Multi-page Forms
Dialog Boxes
Summary
@RubysDo “Accessible & Usable Web Forms. Your How To Guide!” http://bit.do/webforms

15.
15
Association of labels
1. <label> & for/id
• A <label> is attached to a specific form control
through the use of for and id attributes.
Reference:
WCAG WG, EOWG (2015, March 2). Forms Concepts. Retrieved from http://www.w3.org/WAI/tutorials/forms/
Labeling Controls
. Association of labels
. Invisible labels
. Visual position
Grouping Controls
Form Instructions
Validating Input &
User Notifications
Multi-page Forms
Dialog Boxes
Summary
@RubysDo “Accessible & Usable Web Forms. Your How To Guide!” http://bit.do/webforms

16.
16
Association of labels
2. aria-labelledby
• With aria-labelledby, the form field indicates which
element labels it by referencing its id attribute
Reference:
W3C (2014). ARIA9: Using aria-labelledby to concatenate a label from several text nodes. Retrieved from https://www.w3.org/TR/WCAG20-TECHS/ARIA9.html
Labeling Controls
. Association of labels
. Invisible labels
. Visual position
Grouping Controls
Form Instructions
Validating Input &
User Notifications
Multi-page Forms
Dialog Boxes
Summary
@RubysDo “Accessible & Usable Web Forms. Your How To Guide!” http://bit.do/webforms

17.
17
Association of Labels
3. Associating labels implicitly
• When form controls cannot be labelled explicitly, the
label element is used as a container for both the
form control and the label text, so that the two are
associated implicitly.
Reference:
WCAG WG, EOWG (2015, March 2). Forms Concepts. Retrieved from http://www.w3.org/WAI/tutorials/forms/
Labeling Controls
. Association of labels
. Invisible labels
. Visual position
Grouping Controls
Form Instructions
Validating Input &
User Notifications
Multi-page Forms
Dialog Boxes
Summary
@RubysDo “Accessible & Usable Web Forms. Your How To Guide!” http://bit.do/webforms

18.
18
Association of Labels
Screen Reader Demo
Labeling Controls
. Association of labels
. Invisible labels
. Visual position
Grouping Controls
Form Instructions
Validating Input &
User Notifications
Multi-page Forms
Dialog Boxes
Summary
Association of labels demo - https://youtu.be/PjKAusofvP0
@RubysDo “Accessible & Usable Web Forms. Your How To Guide!” http://bit.do/webforms

19.
19
Invisible Labels
• Label is visually hidden to avoid redundancy for users who can
derive the purpose from the visual cues
Warning! Screen readers hide elements from their users when they are
styled using display: none; and visibility: hidden;Reference:
WCAG WG, EOWG (2015, March 2). Forms Concepts. Retrieved from http://www.w3.org/WAI/tutorials/forms/
Labeling Controls
. Association of labels
. Invisible labels
. Visual position
Grouping Controls
Form Instructions
Validating Input &
User Notifications
Multi-page Forms
Dialog Boxes
Summary
WET 4
class
@RubysDo “Accessible & Usable Web Forms. Your How To Guide!” http://bit.do/webforms

20.
20
Placeholder Attribute
A placeholder attribute can't be a replacement for a label.
Labeling Controls
. Association of labels
. Invisible labels
. Visual position
Grouping Controls
Form Instructions
Validating Input &
User Notifications
Multi-page Forms
Dialog Boxes
Summary
Reference:
W3C (October, 2014). A vocabulary and associated APIs for HTML and XHTML. Retrieved from https://www.w3.org/TR/html5/forms.html#the-placeholder-attribute
“Use of the placeholder attribute as a replacement for a label can reduce the
accessibility and usability of the control for a range of users including older
users and users with cognitive, mobility, fine motor skill or vision impairments.”
(W3C, placeholder-attribute)
BAD PRACTISE
Notice: The placeholder text disappears as soon as the user enters a value.
@RubysDo “Accessible & Usable Web Forms. Your How To Guide!” http://bit.do/webforms

21.
21
Placeholder Attribute
A placeholder can be used to display short hint while keeping a
visible label.Labeling Controls
. Association of labels
. Invisible labels
. Visual position
Grouping Controls
Form Instructions
Validating Input &
User Notifications
Multi-page Forms
Dialog Boxes
Summary
Screenshot source: Government of Canada – Open data website
Notice: Each form control has a visible label!
@RubysDo “Accessible & Usable Web Forms. Your How To Guide!” http://bit.do/webforms

22.
22
Visual Position of Label text
Best practises
• Which is best for accessibility and usability?
Placing labels above OR beside the form fields
Labeling Controls
. Association of labels
. Invisible labels
. Visual position
Grouping Controls
Form Instructions
Validating Input &
User Notifications
Multi-page Forms
Dialog Boxes
Summary
@RubysDo “Accessible & Usable Web Forms. Your How To Guide!” http://bit.do/webforms

23.
23
Visual Position of Label text
Best practises
• Placing labels above the form fields and position
labels to the right of radio buttons and checkboxes.Labeling Controls
. Association of labels
. Invisible labels
. Visual position
Grouping Controls
Form Instructions
Validating Input &
User Notifications
Multi-page Forms
Dialog Boxes
Summary
GOODLearn More!
W3C. G162: Positioning labels to maximize predictability of relationships. Retrieved from https://www.w3.org/TR/WCAG20-TECHS/G162.html
@RubysDo “Accessible & Usable Web Forms. Your How To Guide!” http://bit.do/webforms

24.
24
Grouping Controls
• “Grouping related form controls makes forms more
understandable for all users, as related controls are
easier to identify. It also makes it easier for people to
focus on smaller and more manageable groups
rather than try to grasp the entire form at once.”WCAG
WG, EOWG (2015, March 2)
• Possible ways of grouping form controls include:
1. <fieldset> and <legend> elements
2. <optgroup> to group items inside a
selection list
Reference:
WCAG WG, EOWG (2015, March 2). Forms Concepts. Retrieved from http://www.w3.org/WAI/tutorials/forms/
Labeling Controls
. Association of labels
. Invisible labels
. Visual position
Grouping Controls
Form Instructions
Validating Input &
User Notifications
Multi-page Forms
Dialog Boxes
Summary
@RubysDo “Accessible & Usable Web Forms. Your How To Guide!” http://bit.do/webforms

25.
25
Grouping Controls
1.<fieldset> & <legend> (1)
• <fieldset> has a <legend> that is the label of the
group
• Important for related radio buttons and checkboxes
Reference:
W3C. WCAG H71: Providing a description for groups of form controls using fieldset and legend elements. Retrieved from https://www.w3.org/TR/WCAG20-TECHS/H71
Labeling Controls
. Association of labels
. Invisible labels
. Visual position
Grouping Controls
Form Instructions
Validating Input &
User Notifications
Multi-page Forms
Dialog Boxes
Summary
@RubysDo “Accessible & Usable Web Forms. Your How To Guide!” http://bit.do/webforms

26.
26
Grouping Controls
1.<fieldset> & <legend> (2)
• Important for related radio buttons and checkboxes
Labeling Controls
. Association of labels
. Invisible labels
. Visual position
Grouping Controls
Form Instructions
Validating Input &
User Notifications
Multi-page Forms
Dialog Boxes
Summary
Reference:
W3C. WCAG H71: Providing a description for groups of form controls using fieldset and legend elements. Retrieved from https://www.w3.org/TR/WCAG20-TECHS/H71
@RubysDo “Accessible & Usable Web Forms. Your How To Guide!” http://bit.do/webforms

27.
27
Grouping Controls
1.<fieldset> & <legend> (3)
Heading H1-H6 now allowed inside a <legend> (HTML 5.2 Working Draft)
Labeling Controls
. Association of labels
. Invisible labels
. Visual position
Grouping Controls
Form Instructions
Validating Input &
User Notifications
Multi-page Forms
Dialog Boxes
Summary
Reference: W3C, HTML 5.2 <legend>. Retrieved from https://www.w3.org/TR/html52/
Remember !
- To do a screen reader test before
to determine the level of support.
@RubysDo “Accessible & Usable Web Forms. Your How To Guide!” http://bit.do/webforms

28.
28
Grouping Controls
2.<optgroup> inside a selection list
• Group <option> in a selection list using <optgroup>
• Label <optgroup> with label attribute for users to
know what to expect inside the group
Reference:
W3C. H85: Using OPTGROUP to group OPTION elements inside a SELECT. Retrieved from https://www.w3.org/TR/WCAG20-TECHS/H85
Labeling Controls
. Association of labels
. Invisible labels
. Visual position
Grouping Controls
Form Instructions
Validating Input &
User Notifications
Multi-page Forms
Dialog Boxes
Summary
@RubysDo “Accessible & Usable Web Forms. Your How To Guide!” http://bit.do/webforms

29.
29
Form Instructions
• “Provide instructions to help users understand how
to complete the form and use individual form
controls. ”WCAG WG, EOWG (2015, March 2)
• Types of Instructions:
1. Overall Instruction
(instructions that apply to the entire form)
2. In-line instructions (specific to a form element)
(example of input , instructions on filling a field)
• 2.1 Instruction within <label>
• 2.2 Instruction associated with control using
<aria-describedby“
3. Instruction between form controls
Reference:
WCAG WG, EOWG (2015, March 2). Forms Concepts. Retrieved from http://www.w3.org/WAI/tutorials/forms/
Labeling Controls
. Association of labels
. Invisible labels
. Visual position
Grouping Controls
Form Instructions
Validating Input &
User Notifications
Multi-page Forms
Dialog Boxes
Summary
@RubysDo “Accessible & Usable Web Forms. Your How To Guide!” http://bit.do/webforms

30.
30
Form Instructions
1. Overall Instruction
• “Where relevant, provide such instructions that apply to the entire form
before the <form> element to ensure that it is read aloud by screen
readers before they switch to “Forms Mode”.WCAG WG, EOWG (2015, March 2)
Reference:
WCAG WG, EOWG (2015, March 2). Forms Concepts. Retrieved from http://www.w3.org/WAI/tutorials/forms/
Labeling Controls
. Association of labels
. Invisible labels
. Visual position
Grouping Controls
Form Instructions
Validating Input &
User Notifications
Multi-page Forms
Dialog Boxes
Summary
@RubysDo “Accessible & Usable Web Forms. Your How To Guide!” http://bit.do/webforms

31.
31
Form Instructions
2.1 Instruction within <label>
• Within <label> for simple use cases indicating:
• required form controls
• expected data format and example
References:
W3C. H90: Indicating required form controls using label or legend. Retrieved from https://www.w3.org/TR/2014/NOTE-WCAG20-TECHS-20140916/H90
W3C. G89: Providing expected data format and example. Retrieved from https://www.w3.org/TR/2014/NOTE-WCAG20-TECHS-20140916/G89
Labeling Controls
. Association of labels
. Invisible labels
. Visual position
Grouping Controls
Form Instructions
Validating Input &
User Notifications
Multi-page Forms
Dialog Boxes
Summary
@RubysDo “Accessible & Usable Web Forms. Your How To Guide!” http://bit.do/webforms

32.
32
Form Instructions
2.2.arai-describedby (1)
• Use aria-describedby to associate instructions with
form fields while there is a form label.
• Instructions will be available to users when the form
control has focus
Reference:
W3C, ARIA1: Using the aria-describedby property to provide a descriptive label for user interface controls. Retrieved from https://www.w3.org/TR/WCAG20-TECHS/ARIA1.html
WCAG WG, EOWG (2015, March 2). Forms Concepts. Retrieved from http://www.w3.org/WAI/tutorials/forms/
W3C, WCAG 3.3.2 Labels or Instructions. Retrieved from http://www.w3.org/TR/UNDERSTANDING-WCAG20/minimize-error-cues.html
WEBAIM, Creating Accessible Forms. Retrieved from http://webaim.org/techniques/forms/advanced
Labeling Controls
. Association of labels
. Invisible labels
. Visual position
Grouping Controls
Form Instructions
Validating Input &
User Notifications
Multi-page Forms
Dialog Boxes
Summary
@RubysDo “Accessible & Usable Web Forms. Your How To Guide!” http://bit.do/webforms

33.
33
Form Instructions
2.2.arai-describedby (2)
Labeling Controls
. Association of labels
. Invisible labels
. Visual position
Grouping Controls
Form Instructions
Validating Input &
User Notifications
Multi-page Forms
Dialog Boxes
Summary
Instruction
Government of Canada - Statistic Canada,
2016 Census
Screenshot Reference:
Government of Canada - Statistic Canada, 2016 Census - Start questionnaire. Retrieved from https://www133.statcan.gc.ca/census-recensement/en/login-connexion/open-ouvrir
@RubysDo “Accessible & Usable Web Forms. Your How To Guide!” http://bit.do/webforms

34.
34
Form Instructions
2.2.arai-describedby (3)
Reference:
W3C, ARIA1: Using the aria-describedby property to provide a descriptive label for user interface controls. Retrieved from https://www.w3.org/TR/WCAG20-TECHS/ARIA1.html
WCAG WG, EOWG (2015, March 2). Forms Concepts. Retrieved from http://www.w3.org/WAI/tutorials/forms/
W3C, WCAG 3.3.2 Labels or Instructions. Retrieved from http://www.w3.org/TR/UNDERSTANDING-WCAG20/minimize-error-cues.html
WEBAIM, Creating Accessible Forms. Retrieved from http://webaim.org/techniques/forms/advanced
Labeling Controls
. Association of labels
. Invisible labels
. Visual position
Grouping Controls
Form Instructions
Validating Input &
User Notifications
Multi-page Forms
Dialog Boxes
Summary
@RubysDo “Accessible & Usable Web Forms. Your How To Guide!” http://bit.do/webforms

35.
35
Form Instructions
Screen Reader demo
Form instructions demo - https://youtu.be/9rIT595KrZQ
Labeling Controls
. Association of labels
. Invisible labels
. Visual position
Grouping Controls
Form Instructions
Validating Input &
User Notifications
Multi-page Forms
Dialog Boxes
Summary
@RubysDo “Accessible & Usable Web Forms. Your How To Guide!” http://bit.do/webforms

36.
36
Form Instructions
3. Instruction between form elements
• Add tabindex=“0“ to instruction between form
elements to receive focus and be included in the
natural tab order
Labeling Controls
. Association of labels
. Invisible labels
. Visual position
Grouping Controls
Form Instructions
Validating Input &
User Notifications
Multi-page Forms
Dialog Boxes
Summary
<p tabindex=“0”>Once Click offers
you convenient features to modify your
online content</p>
<p tabindex=“0”>Please ensure
accuracy of input before submitting
the form</p>
@RubysDo “Accessible & Usable Web Forms. Your How To Guide!” http://bit.do/webforms

37.
37
Validating Input &
User Notification
• Validating Input
• User Notifications
Labeling Controls
. Association of labels
. Invisible labels
. Visual position
Grouping Controls
Form Instructions
Validating Input &
User Notifications
Multi-page Forms
Dialog Boxes
Summary
@RubysDo “Accessible & Usable Web Forms. Your How To Guide!” http://bit.do/webforms

38.
38
Validating Input & User Notification
Validating Input
1) Validating required input fields
•Indicate required fields in the label text
•Add required attribute to form controls to indicate that user input is required before
submission
W3C. ARIA2: Identifying a required field with the aria-required property. Retrieved from https://www.w3.org/TR/WCAG20-TECHS/ARIA2.html
Labeling Controls
. Association of labels
. Invisible labels
. Visual position
Grouping Controls
Form Instructions
Validating Input &
User Notifications
Multi-page Forms
Dialog Boxes
Summary
@RubysDo “Accessible & Usable Web Forms. Your How To Guide!” http://bit.do/webforms
required=“required”
When user clicks submit without filling
a mandatory field, user agent indicates
to the user that input is required before
submission “Please fill out this field”
aria-required=“true”
provided redundantly to support web browsers that don’t
communicate the required attribute to assistive technology to inform
assistive technologies about required controls so that they are
appropriately announced to the users (as opposed to validating the
input)

39.
39
Validating Input & User Notification
Validating Input
2) Validating common input for input fields
•HTML5 validates common types for an <input> element such as tel, email, urlLabeling Controls
. Association of labels
. Invisible labels
. Visual position
Grouping Controls
Form Instructions
Validating Input &
User Notifications
Multi-page Forms
Dialog Boxes
Summary
@RubysDo “Accessible & Usable Web Forms. Your How To Guide!” http://bit.do/webforms

40.
40
Validating Input & User Notification
User Notifications
Provide feedback to users about the results of their form submission.
Error messages need to be informative - should provide guidance on how
to correct mistakes.
•Notification summary of errors:
Overall feedback with list of errors that occurred provided after user
submission of the form provided at the top of the page
•Notification on form control:
Inline specific feedback provided at or near the form controls
Labeling Controls
. Association of labels
. Invisible labels
. Visual position
Grouping Controls
Form Instructions
Validating Input &
User Notifications
Multi-page Forms
Dialog Boxes
Summary
Reference:
WCAG WG, EOWG (2015, March 2). Forms Concepts. Retrieved from http://www.w3.org/WAI/tutorials/forms/
W3C. Error Identification: Understanding SC 3.3.1. https://www.w3.org/TR/UNDERSTANDING-WCAG20/minimize-error-identified.html
Screenshot inspired from : Form validation Working examples - Web Experience Toolkit http://wet-boew.github.io/v4.0-ci/demos/formvalid/formvalid-en.html
@RubysDo “Accessible & Usable Web Forms. Your How To Guide!” http://bit.do/webforms

41.
41
Validating Input & User Notification
Form Validation Demo
Example uses WET 4 validation of input and error message handling (http://wet-boew.github.io/v4.0-ci/demos/index-en.html)
Labeling Controls
. Association of labels
. Invisible labels
. Visual position
Grouping Controls
Form Instructions
Validating Input &
User Notifications
Multi-page Forms
Dialog Boxes
Summary
Notification on form control:
•Error message placed within
the <label> to not be missed
•Error message provides
guidance on how to correct
mistakes
Notification summary of
errors:
•Focus moved from the submit
button to list of errors
•Notification placed at the top
of the form and list all errors
•Each error linked to the
relevant control
@RubysDo “Accessible & Usable Web Forms. Your How To Guide!” http://bit.do/webforms

42.
42
Validating Input & User Notification
Form Validation Demo
Web Experience Toolkit (WET 4) “Form validation” provides
example on validation of input and error message handling
Screenshot source:
WET 4 Working examples - Web Experience Toolkit. Retrieved from http://wet-boew.github.io/v4.0-ci/demos/index-en.html
Hint: Google “WET 4 examples” to
find this page!
Labeling Controls
. Association of labels
. Invisible labels
. Visual position
Grouping Controls
Form Instructions
Validating Input &
User Notifications
Multi-page Forms
Dialog Boxes
Summary
@RubysDo “Accessible & Usable Web Forms. Your How To Guide!” http://bit.do/webforms

43.
43
Multi-page Form
• Divide long forms into multiple smaller forms that
constitute a series of logical steps or stages, and
• Inform users about their progress.
Reference:
WCAG WG, EOWG (2015, March 2). Forms Concepts. Retrieved from http://www.w3.org/WAI/tutorials/forms/
Labeling Controls
. Association of labels
. Invisible labels
. Visual position
Grouping Controls
Form Instructions
Validating Input &
User Notifications
Multi-page Forms
Dialog Boxes
Summary
@RubysDo “Accessible & Usable Web Forms. Your How To Guide!” http://bit.do/webforms

44.
44
Multi-page Form
Example
Reference:
W3C. WCAG G98: Providing the ability for the user to review and correct answers before submitting. Retrieved from https://www.w3.org/TR/WCAG20-TECHS/G98.html
Labeling Controls
. Association of labels
. Invisible labels
. Visual position
Grouping Controls
Form Instructions
Validating Input &
User Notifications
Multi-page Forms
Dialog Boxes
Summary
Repeat overall
instructions on
every page before
<form>
Indicating
progress in
each step
(title, h1,
nav)
The ability to review
and correct answers
before submitting
@RubysDo “Accessible & Usable Web Forms. Your How To Guide!” http://bit.do/webforms

45.
45
Multi-page Form
Indicating progress (1)
• “Each step should inform the user about the
progress they are making” WCAG WG, EOWG (2015, March 2)
• Possible techniques include using:
1. Page <title>
2. The main heading <h1>
3. HTML5 <progress> element
4. Step-by-step indicator
Reference:
WCAG WG, EOWG (2015, March 2). Forms Concepts. Retrieved from http://www.w3.org/WAI/tutorials/forms/
Labeling Controls
. Association of labels
. Invisible labels
. Visual position
Grouping Controls
Form Instructions
Validating Input &
User Notifications
Multi-page Forms
Dialog Boxes
Summary
@RubysDo “Accessible & Usable Web Forms. Your How To Guide!” http://bit.do/webforms

46.
46
Multi-page Form
Indicating progress (2)
1. Page <title>
(The progress information should precede other information
provided in the title)
2. The main heading <h1>
(Include progress in prominent heading)
<h1>Billing Address (step 2 of 4)</h1>
Reference:
WCAG WG, EOWG (2015, March 2). Forms Concepts. Retrieved from http://www.w3.org/WAI/tutorials/forms/
Labeling Controls
. Association of labels
. Invisible labels
. Visual position
Grouping Controls
Form Instructions
Validating Input &
User Notifications
Multi-page Forms
Dialog Boxes
Summary
<title>Step 2 of 4 : Billing Address - Camp Registration</title>
@RubysDo “Accessible & Usable Web Forms. Your How To Guide!” http://bit.do/webforms

47.
47
Multi-page Form
Indicating progress (3)
3.1 HTML5 <progress> element
(Inform users about the progress such as in a survey)
Note: Some browsers do not support <progress> functionality natively which requires
a polyfill to emulate the same functionality using generic HTML and WAI-ARIA.
•<div role="progressbar" aria-valuenow="29" aria-valuemin="0" aria-
valuemax="100">29 %</div>
3.2 Custom progress bar (personal preference!)
Labeling Controls
. Association of labels
. Invisible labels
. Visual position
Grouping Controls
Form Instructions
Validating Input &
User Notifications
Multi-page Forms
Dialog Boxes
Summary
Screenshot Source: WCAG WG, EOWG (2015, March 2). Forms Concepts
<div><span class="wb-inv">Progress:</span>
<span id="ProgressText">29</span>% <span
class="wb-inv"> complete</span></div>
@RubysDo “Accessible & Usable Web Forms. Your How To Guide!” http://bit.do/webforms

48.
48
Multi-page Form
Indicating progress (3)
4. Step-by-step indicator
(known number of steps to be completed)
<ol class="breadcrumb">
<li class="h5"><a href="childinfo.html"> <span class="glyphicon glyphicon-ok"> </span>
<span class="wb-inv">Completed:</span> Child Information</a></li>
<li class="h5"><span class="glyphicon glyphicon-unchecked"> </span>
<span class="wb-inv">Current:</span> Billing Address</li>
<li>Review Registration</li>
<li>Complete Registration</li>
</ol>
Reference:
WCAG WG, EOWG (2015, March 2). Forms Concepts. Retrieved from http://www.w3.org/WAI/tutorials/forms/
Labeling Controls
. Association of labels
. Invisible labels
. Visual position
Grouping Controls
Form Instructions
Validating Input &
User Notifications
Multi-page Forms
Dialog Boxes
Summary
@RubysDo “Accessible & Usable Web Forms. Your How To Guide!” http://bit.do/webforms

49.
49
Dialog Boxes (before and after)
Labeling Controls
. Association of labels
. Invisible labels
. Visual position
Grouping Controls
Form Instructions
Validating Input &
User Notifications
Multi-page Forms
Dialog Boxes
Summary
@RubysDo “Accessible & Usable Web Forms. Your How To Guide!” http://bit.do/webforms
Non-accessible dialog box issues
https://youtu.be/cFW4VVzcec4?t=25s
•User has access to background
page
•Dialog box has not title
When developing a dialog box, ensure that:
The dialog box receives focus
User knows that he is in a dialog box
Dialog box has a title
User does not have access to the background page.
Example of a non-accessible dialog box:

50.
50
Dialog Boxes (before and after)
Labeling Controls
. Association of labels
. Invisible labels
. Visual position
Grouping Controls
Form Instructions
Validating Input &
User Notifications
Multi-page Forms
Dialog Boxes
Summary
@RubysDo “Accessible & Usable Web Forms. Your How To Guide!” http://bit.do/webforms
HTML snippet:
<div role="dialog" aria-labelledby="login">
<h1 id="login">Log in to Kangaroo
Kilometers</h1>
<!-- input fields -->
</div>
 The dialog box receives focus
 User knows that he is in a dialog box
 Dialog box has a title
JS pseudo code:
// When dialog box is opened
//Select the background page main wrapper and give it aria hidden="true"
document.querySelector('.wrapper').setAttribute('aria-hidden', true);
// When dialog box is closed
//change the background page main wrapper to aria-hidden="false"
document.querySelector('.wrapper').setAttribute('aria-hidden', false);
 User does not have access to the background page.
A role="dialog" interrupts the current
processing in order to prompt the
user to enter information or require a
response
Accessible Dialog box example https://www.youtube.com/watch?
v=nLjAqr6YDZE

51.
51
Summary
With the techniques of labeling & grouping controls,
Form instructions , validating Input, user notifications
and multi-page forms your web forms will be easier to
understand and more accessible for all users.
@RubysDo “Accessible & Usable Web Forms. Your How To Guide!” http://bit.do/webforms

52.
52
Questions Period
Resources
•Google Accessibility Course (Lesson 5 – ARIA)
https://www.udacity.com/course/web-accessibility--ud89
•Creating Accessible Forms
http://webaim.org/techniques/forms/
•Forms Concepts
http://www.w3.org/WAI/tutorials/forms/
•User Agent Support Notes for HTML and XHTML Techniques
https://www.w3.org/WAI/WCAG20/Techniques/ua-notes/
Thank you for your attention!
Rabab Gomaa
@RubysDo
http://bit.do/webforms
•Notes on Using ARIA in HTML
https://www.w3.org/TR/aria-in-html/
•WAI-ARIA Authoring Practices 1.1
https://www.w3.org/TR/wai-aria-practices-1.1/
•Buttons, Submits, and Divs, Oh Hell
http://adrianroselli.com/2016/01/links-buttons-submits-and-divs-
oh-hell.html
•JAWS Screen reader Demos
https://www.youtube.com/channel/UCVoa-B5tR08-
T2c1ku5mhfA
•How to Meet WCAG 2.0
https://www.w3.org/WAI/WCAG20/quickref/
@RubysDo “Accessible & Usable Web Forms. Your How To Guide!” http://bit.do/webforms