Deque Summary And Checklist: Form Labels, Instructions, Validation Design Checklist

User Manual: Pdf

Open the PDF directly: View PDF PDF.
Page Count: 2

DownloadDeque Summary And Checklist: Form Labels, Instructions, Validation - Design Checklist
Open PDF In BrowserView PDF
Summary and Checklist: Form Labels, Instructions, and Validation
Summary
In order for users to know how to fill out a form, the
form has to be accessible. For the most part this is easy
to do. Key concepts include:






Labels for form inputs
Labels for groups of inputs
Instructions and hints, where necessary
Error prevention
Form validation

With all of these, information must be visible on the
screen, accurate and meaningful, programmatically
discernible, and programmatically associated with the
appropriate form element or group.
The more interactive a form element or process is, the
more attention needs to be given to accessibility with
respect to:



Focus management
Setting and updating ARIA names, roles, and values,
where necessary
 ARIA live announcements, where necessary

Checklist
Labels
Semantic Labels
 Labels MUST be programmatically associated with
their corresponding elements.
 Labels MUST be programmatically-discernible.
Meaningful Label Text
 Labels MUST be meaningful.
 Labels MUST NOT rely solely on references to
sensory characteristics.
Icons as Labels
 Icons MAY be used as visual labels (without visual
text) if the meaning of the icon is visually self-evident
AND if there is a programmatically-associated
semantic label available to assistive technologies.
Placeholder Text as Labels
 Placeholder text MUST NOT be used as the only
method of providing a label for a text input.
Visibility of Labels
 Labels MUST be visible.

Proximity of Labels to Controls
 A label SHOULD be visually adjacent to its
corresponding element.
 A label SHOULD be adjacent in the DOM to its
corresponding element.
Multiple Labels for One Field
 When multiple labels are used for one element, each
label MUST be programmatically associated with the
corresponding element.
One Label for Multiple Fields
 When one label is used for multiple elements, the
label MUST be programmatically associated with
each of the corresponding elements.

Group Labels
Semantic Group Labels
 Group labels MUST be programmatically-associated
with the group if the individual labels for each
element in the group are insufficient on their own.
 Group labels MUST be programmatically-discernible.
Meaningful Group Labels
 Group labels MUST be meaningful.
 Group labels MUST NOT rely solely on references to
sensory characteristics.
Proximity of Group Labels
 Group labels SHOULD be visually adjacent to the
grouped elements.
 Group labels SHOULD be adjacent in the DOM to the
grouped elements.
Visibility of Group Labels
 Group labels MUST be visible.

Page 1 of 2

Version 2017.01.17

Summary and Checklist: Form Labels, Instructions, and Validation
Instructions & Other Helpful Info

Dynamic Forms & Custom Widgets

Instructions for Forms, Groups, and Sections
 Instructions for groups or sections SHOULD be
programmatically-associated with the group.
 Instructions for groups or sections MUST be
programmatically-discernible.
 Instructions for groups or sections MUST be
meaningful.
 Instructions for groups or sections MUST be visible.
 Instructions for groups or sections SHOULD be
visually adjacent to the grouped elements.
 Instructions for groups or sections SHOULD be
adjacent in the DOM to the grouped elements.
 If the instructions for groups or sections are not
critical, the instructions MAY be hidden until the user
requests them.
 Instructions for groups or sections MUST NOT rely
solely on references to sensory characteristics.
Instructions for Inputs
 Instructions for an element MUST be
programmatically-associated with the element.
 Instructions for an element MUST be available as
programmatically-discernible text.
 Instructions for an element MUST be meaningful.
 Instructions for an element MUST be visible.
 Instructions for an element SHOULD be visually
adjacent to the element.
 Instructions for an element SHOULD be adjacent in
the DOM to the element.
 If the instructions for an element are not critical, the
instructions MAY be hidden until the user requests
them.
 Instructions for an element MUST NOT rely solely on
references to sensory characteristics.
Required Fields
 Required fields SHOULD be programmatically
designated as such.
 Required fields SHOULD have a visual indicator that
the field is required.
 The form validation process MUST include an error
message explaining that a field is required if the field
isn't identified as required both visually and
programmatically in the form's initial state.

Changes in Context
 Focusing on an element MUST NOT automatically
trigger a change of context, unless the user has been
adequately advised ahead of time.
 Changing an element's value MUST NOT
automatically trigger a change of context, unless the
user is adequately advised ahead of time.
 Hovering over an element with the mouse MUST
NOT automatically trigger a change of context,
unless the user has been adequately advised ahead
of time.
Custom Form Inputs
 Native HTML form elements SHOULD be used
whenever possible.
 Custom form elements SHOULD act like native HTML
form elements, to the extent possible.
 Custom form elements SHOULD have appropriate
names, roles, and values.
 Updates and state changes that cannot be
communicated through HTML or ARIA methods
SHOULD be communicated via ARIA live messages.

Form Validation
Error Identification Considerations
 Error feedback SHOULD be made available
immediately after form submission (or after an
equivalent event if there is no form submission
event).
 Error feedback MUST be programmaticallyassociated with the appropriate element.
 Error feedback MUST be programmaticallydiscernible.
 Error feedback MUST be meaningful.
 Error feedback MUST be visible.
Success Confirmation Considerations
 Success confirmation feedback SHOULD be
programmatically-discernible.
 Success confirmation feedback SHOULD be
meaningful.
 Success confirmation feedback MUST be visible.

Page 2 of 2

Version 2017.01.17



Source Exif Data:
File Type                       : PDF
File Type Extension             : pdf
MIME Type                       : application/pdf
PDF Version                     : 1.5
Linearized                      : No
Has XFA                         : No
Language                        : en-US
Tagged PDF                      : Yes
XMP Toolkit                     : Adobe XMP Core 5.6-c015 84.158975, 2016/02/13-02:40:29
Producer                        : Microsoft® Word 2016
Format                          : application/pdf
Creator                         : Deque Systems, Inc.
Title                           : Deque Summary and Checklist: Form Labels, Instructions, and Validation
Creator Tool                    : Microsoft® Word 2016
Create Date                     : 2017:01:17 13:12:12-05:00
Modify Date                     : 2017:01:17 16:31:15-05:00
Metadata Date                   : 2017:01:17 16:31:15-05:00
Document ID                     : uuid:87AEC8F4-EFBD-47E3-B2A1-D1F7D1B3C9AB
Instance ID                     : uuid:b0cab87f-ad4f-3c43-82c7-03fc948d426d
Page Count                      : 2
Author                          : Deque Systems, Inc.
Warning                         : [Minor] Ignored duplicate Info dictionary
EXIF Metadata provided by EXIF.tools

Navigation menu