HTML5 forms, usability, and accessibility
A more textbook definition of a widget
"A __ is a stand-alone application that can be embedded into third party sites by any user on a page where they have rights of authorship (e.g. a webpage, blog, or profile on a social media site)."
Principle 4 of universal design- Perceptible Information
(Information is critical to users. Whether it's communicated via text, pictures, audios or videos, make sure the information is easy to digest and access) When you incorporate this principle into your design, start with your users. You can figure out how best to present information by considering users with disabilities, such as those with vision or hearing impairments.
Principle 6 of universal design low physical effort
(Many people are using their computers for eight or more hours to perform tasks at work. The amount of time we spend on our computers is taxing on our bodies. In fact, people with physical disability have even more difficulty with using the web than normal users do.) This is why designing for low physical efforts is vital to bear in mind whenever we work.
Principle 3 of universal design Simple and Intuitive use
(one of the goals of user experience design) This principle aims to reduce complexity and mental or cognitive loads.
Principle 5 of universal design- Tolerance for error
(we should design for an error-friendly environment) this principle pushes you to think beyond the screen and how the system and user will interact with each other.
The list attribute of the <input> element, must refer to the id attribute of the
<datalist> element
HTML5 form elements added the following form elements
<datalist>, <keygen>, <output>
Input type button
<input type="button"> defines a button
Input type checkbox
<input type="checkbox"> defines a checkbox
Input type color
<input type="color"> is used for input fields that should contain a color
Input type date
<input type="date"> is used for input field that should contain a date
Input type datetime-local
<input type="datetime-local"> specifies a date and time input field, with no time zone
Input type email
<input type="email"> is used for input fields that should contain an e-mail address
Input type month
<input type="month"> allows the user to select a month and year
Input type number
<input type="number"> defines a numeric input field
Input type password
<input type="password"> defines a password field
Input type reset
<input type="reset"> defines a reset button that will reset all form values to their default values
Many assistive technologies will use the
<legend> element as if it is a part of the label of each widget inside the corresponding <fieldset> element.
You can label a <fieldset> by including a
<legend> element just below the opening <fieldset> tag. :
List of <form> attributes
Accept-charset, action, Autocomplete, Ectype, Method, Name, Novalidate, Target
General principles for forms
Allow for flexibility, Be simple and intuitive, Minimize errors, Include redundant modalities, Avoid side effect
Guidelines for low physical effort
Allow user to maintain a neutral body position, Use reasonable operating forces, Minimize repetitive actions, Minimize sustained physical effort.
Input type time
Allows the user to select a time (no time zone)
Input type week
Allows the user to select a week and year
Guidelines for Tolerance for error
Arrange elements so as to minimize hazards and errors: most used elements, most accessible, with hazardous elements eliminated, isolated, or shielded, Provide warnings about hazards and errors, Provide fail-safe features, Discourage unconscious action in tasks that require vigilance
The formmethod attribute
Define the HTTP method for sending form-data to the action URL
<legend>
Defines a caption for a <fieldset> element
<button> element
Defines a clickable button
Input type range
Defines a control for entering a number whose exact value is not important (like a slider control). Default range 0-100. however, you can set restrictions on what numbers are accepted with the min, max, and step attributes
<select>
Defines a drop-down list
The <select> Element
Defines a drop-down list
<optgroup>
Defines a group of related options in a drop-down list
<label>
Defines a label for an <input> element
<textarea>
Defines a multiline input control (text area)
<input type="text">
Defines a one-line text input field
<input type="radio">
Defines a radio button (for selecting one of many choices)
<form>
Defines an HTML form for user input
<input>
Defines an input control
<option>
Defines an option in a drop-down list
The action attribute
Defines the action to be performed when the form is submitted
<output>
Defines the result of a calculation
Multi-Page Forms
Divide long forms into multiple smaller forms that constitute a series of logical steps or stages and inform users about their progress.
Be simple and intuitive
Do not design something differently from user expectations just to be different, Eliminate unnecessary complexity, Provide feedback
maxlength attribute
Does not provide any feedback. If you want an alert the user, you must write JavaScript code
Guidelines for Simple and Intuitive use
Eliminate unnecessary complexity, Be consistent with user expectations and intuition, Accommodate a wide range of literacy and language skills, Arrange information to be consistent with its importance, Provide effective prompting and feedback during and after task completion.
Key aspects in incorporating real people in design
Ensuring that everyone involved in web projects understands the basics of how people with disabilities use the web, Involving users with disabilities early and throughout the design process, Involving users in evaluating web accessibility
Providing instructions within labels
For simple use cases, providing instructions within labels may be sufficient, This approach is reliable across different web browsers and assistive technologies
Default method when submitting form data is
GET
<fieldset>
Groups related elements in a form
Field names should be clear and concise
If additional information would be helpful, XHTML 1.1 provides the caption tag to add a descriptive caption and provide proper accessibility.
In-line instructions
In addition to overall instructions, it is also important to provide relevant instructions within the labels of the form controls.
Inclusion
Inclusive design, universal design, and design for all involves designing products, such as websites, to be usable by everyone to the greatest extent possible, without the need for adaptation. Inclusion addresses a broad range of issues including access to and quality of hardware, software, and Internet connectivity; computer literacy and skills; economic situation; education; geographic location; and language — as well as age and disability.
The novalidate attribute
Is a <form> attribute, Specifies that the form data should not be validated when submitted
To make your form as concise as possible, a two-step evaluation of every element of the form. Ask yourself the following questions about each form element
Is this a piece of information that is valuable to us? Is this a piece of information that is so valuable that it's worth denying users access to (whatever lies beyond the form) if they do not choose to provide it?
<keygen> element
Is to provide a secure way to authenticate users
Input type search
Is used for input field that should contain a URL address
Input type tel
Is used for input field that should contain a telephone number
Input type search
Is used for search fields (a search field behaves like a regular text field)
GET must
NOT be used when sending sensitive information!
User Notifications
Notify users about successful task completion, any errors, and provide instructions to help them correct mistakes.
formaction attribute
Overrides the action attribute of the <form> element
formenctype attribute
Overrides the enctype attribute of the <form> element
formmethod attribute
Overrides the method attribute of the <form> element
The formnovalidate attribute
Overrides the novalidate attribute of the <form> element
formtarget attribute
Overrides the target attribute of the <form> element
Web accessibility benefits people with and without disabilities like
People with low literacy or not fluent in the language, People with low bandwidth connections or using old technologies, New and infrequent users, Mobile users
Guidelines for size and space for approach and use
Provide a clear line of sight to important elements for any seated or standing user, Make reach to all components comfortable for any seated or standing user,. Accommodate variations in hand and grip size, Provide adequate space for the use of assistive devices or personal assistance.
Guidelines for flexibility in use
Provide choice in methods of use, Accommodate right- or left-handed access and use, Facilitate the user's accuracy and precision, Provide adaptability to the user's pace.
Allow for flexibility
Provide choices in features and ways that tasks can be accomplished, Accommodate right- and left-handed use, Allow the user to customize settings whenever possible, Keep in mind that people may be using adaptive technologies
Form Instructions
Provide instructions to help users understand how to complete the form and individual form controls.
Guidelines for equitable use
Provide the same means of use for all users: identical whenever possible, equivalent when not., Avoid segregating or stigmatizing any users., Provisions for privacy, security, and safety should be equally available to all users., Make the design appealing to all users.
Minimize errors
Provide warnings, Build fail-safe features when possible, Do not establish patterns when you want people to pay attention
The list attributes
Refers to a <datalist> element that contains pre-defined options for an <input>
Can better error messages by
Replace cryptic messages with context sensitive messages, Provide visual cues as to where the problem list, Use CSS to hide the fields that already filled in correctly and only display those which need to be corrected by using the fieldset tag
humans can handle only 3-9 items in a short amount of time when processing information
So as to reduce complexity and reduce cognitive loads, you should always aim to present information between 3 and 9 items.
Step
Specifics the legal number intervals for an input field
<keygen> element
Specifies a key-pair generator field in a form, When the form is submitted, 2 keys are generated, one private and one public
<datalist> element
Specifies a list of pre-defined options for an <input> element, Users will see a drop-down list of the pre-defined option as they input data
<datalist>
Specifies a list of pre-defined options for input controls
The formtarget attribute
Specifies a name or a keyword that indicates where to display the response that is received after submitting the form
Name
Specifies a name used to identify the form (for DOM usage; document.forms.name)
Pattern
Specifies a regular expression to check the input value against
Action
Specifies an address (url) where to submit the form (default: the submitting page)
The formenctype attribute
Specifies how the form data should be encoded when submitted (only for forms with method="post")
Autocomplete
Specifies if the browser should autocomplete the form (default; on)
Readonly
Specifies that an input field is read only (cannot be changed)
Required
Specifies that an input field is required (must be filled out)
The required attributes
Specifies that an input field must be filler out before submitting the form
Disabled
Specifies that an input field should be disabled
The form attribute
Specifies that one or more forms an <input> element belongs to
Novalidate
Specifies that the browser should not validate the form
The disabled attribute
Specifies that the input field is disabled, is unusable and un-clickable, and its value will not be sent when submitting the form
The autofocus attribute
Specifies that the input field should automatically get focus when the pages load
The method attribute
Specifies the HTTP method (GET or POST) to be used when submitting the form data:
Method
Specifies the HTTP method used when submitting the form (default; GET)
The formaction attribute
Specifies the URL of a file that will process the input control when the form is submitted
Accept-charset
Specifies the charset used in the submitted form (default; the page charset)
Value
Specifies the default value for an input field
Ectype
Specifies the encoding of the submitted data (default; is url-encoded)
The value attribute
Specifies the initial value for an input field
The step attributes
Specifies the legal number intervals for an <input> element
Maxlength
Specifies the maximum number of character for an input field
Max
Specifies the maximum value for an input field
Min
Specifies the minimum value for an input field
Target
Specifies the target of the address in the action attribute (default; _self)
Size
Specifies the width (in character) of an input field
The autocomplete attribute
Specifies whether a form or input field should have autocomplete on or off
The placeholder attributes
Specify a hint that describes the expected value of an input field (a sample value or a short description of the format), The hint is displayed in the input field before the users enters a value
The pattern attributes
Specify that a regular expression that the <input> element's value is checked against
The multiple attributes
Specify that the user is allowed to enter more than one value in the <input> element
The height and width attributes
Specify the height and width of an <input type="image">
The min and max attributes
Specify the minimum and maximum values for an <input> element
Computer handling format 3 ways to handle this
Tells the user that a specific format of input is required and returns them to the form with an error message if they fail to heed this instruction, Split the telephone number input into 3 fields, Let the user do as they please
Principle 1 of universal design Equitable use
The driver for accessibility, When you use this principle, you must consider all users, instead of only the target users
Widgets
They're those little doo-dads you see on websites, often in the sidebar, that perform one simple function and don't take up much room while they're doing it.
Principle 7 of universal design size and space for approach and use
This is a shortsighted mindset because it is important to think outside of the screen and consider our users' environment as well, (especially as users view websites not only on desktops but also—increasingly—on mobile devices as well,) its guidelines so as to create a universal design website, one for both desktop and mobile devices.
Tips for checking the accessibility of your website
Turn off graphics, Turn off sounds, Check the contrast by viewing the page in grayscale, Turn off style sheets, Turn off scripts, applets, or other programmatic objects, Use the largest font size allowed by a browser, Resize the browser window, Select all text and copy it into a word processor to make sure it makes sense, Use an automated accessibility tool to check your website
Guidelines for Perceptible Information
Use different modes (pictorial, verbal, tactile) for redundant presentation of essential information, Provide adequate contrast between essential information and its surroundings, Maximize "legibility" of essential information, Differentiate elements in ways that can be described (i.e., make it easy to give instructions or directions)., Provide compatibility with a variety of techniques or devices that people with sensory limitations use
Custom Controls
Use stylized form elements and other progressive enhancement techniques to provide custom controls.
Grouping Controls
Use the <fieldset> and <legend> elements to group and associate related form controls.
Labeling Controls
Use the <label> element, and, in specific cases, other mechanisms (e.g. WAI-ARIA, title attribute etc.), to identify each form control.
Validating Input
Validate input provided by the user and provide options to undo changes and confirm data entry.
multiple attributes
Works with the following input types: email and file
pattern attributes
Works with the following input types; text, search, url, tel, email, password
placeholder attributes
Works with the following input types; text, search, url, tel, email, password
<form> element
You should not nest a form inside another form
It's common practice to wrap a label and its widget with
a <div> element.
In the case of multiple labels, you should nest a widget and its labels inside
a single <label> element.
To define a pre-selected option
add the selected attribute to the option
Accessibility
addresses discriminatory aspects related to equivalent user experience for people with disabilities, including people with age-related impairments. For the web, accessibility means that people with disabilities can perceive, understand, navigate, and interact with websites and tools, and that they can contribute equally without barriers.
"Universal Design"
aims to extend standard design principles to include people of all ages and abilities, but remains at the level of generality, so it does not address all the specific needs of any particular disability
Providing instructions outside of labels
allows more flexible positioning and design but sometimes it can be missed.
Accessibility standards
also have an important role in accessible design.
Side effects
are actions that occur as the result of user actions that do not seem to the user to be related to the primary goal of the action.
Forms
are commonly used to provide user interaction on websites and in web applications.
make sure your labels
are descriptive enough that users do not question what is expected in that field.
An HTML form contains form elements
are different types of input elements, like text fields, checkboxes, radio buttons, submit buttons, and more
the needs of people with disabilities
are often not sufficiently addressed in usability practice and research.
Checkboxes
are used when there are lists of options and the user may select any number of choices, including zero, one, or several. In other words, each checkbox is independent of all other checkboxes in the list, so checking one box doesn't uncheck the others.
Radio buttons
are used when there is a list of two or more options that are mutually exclusive and the user must select exactly one choice. In other words, clicking a non-selected radio button will deselect whatever other button was previously selected in the list.
<p> elements are also commonly used,
as are HTML lists (the latter is most common for structuring multiple checkboxes or radio buttons).
Added the following attributes for <input>
autocomplete, autofocus, form, formaction, formenctype, formmethod, formnovalidate, formtarget, height and width, list, min and max, multiple, pattern (regexp), placeholder, required, step
And the following attributes for <form>
autocomplete, novalidate
Side effects should be
avoided because they cause particular problems for novice users and disabled users who may have difficulty detecting or correcting certain types of side effects.
Accessible design has
both a technical component and a user interface component.
You can put multiple labels on a single widget
but this is not a good idea as some assistive technologies can have trouble handling them
"Accessible Design"
calls for design that includes the needs of people whose physical, mental, or environmental conditions limit their performance.
adopting universal design principles
can reduce fatigue, increase speed, decrease errors, and decrease learning time for all users.
New input types
color, date, datetime-local, email, month, number, range, search, tel, time, url, week
<keygen> element Public key
could be used to generate a client certificate to authenticate the user in the future
don't make the physical size of the input box
cover less area than the expected entry.
<input type="submit">
defines a button for submitting the form data to a form-handler
<legend> element
defines a caption for the <fieldset> element
The HTML <form> element
defines a form that is used to collect user input
<textarea> element
defines a multi-line input field (a text area)
<option> elements
defines an option that can be selected
Principle 2 of universal design Flexibility in use,
encourages flexible, adaptable and/or customizable design, It takes into account individual preferences and lets the users choose how they will use a product.
The role of accessibility in a universal web
encourages increased communication and coordination between accessibility, usability, and inclusion research and practice in the design and development of guidelines, websites, browsers, assistive technologies, and other web tools.
In some situations, form controls cannot be labeled
explicitly: In this case, the label element is used as a container for both the form control and the label text, so that the two are associated implicitly.
Provide at least 20 characters
for each of the first and last name fields.
Placeholder text it makes it more difficult
for users to check their responses before submitting the form.
POST
has no size limitations, and can be used to send large amounts of data
placing labels above the form fields
helps reduce horizontal scrolling for people with low vision and mobile device users.
Always used POST
if the form data contains sensitive or personal information. The POST method does not display the submitted form data in the page address field
However, accessibility focuses on disability and does not try to address broader issues. Other efforts, such as
internationalization, address other inclusion issues.
<fieldset> element
is a convenient way to create groups of widgets that share the same purpose, for styling and semantic purposes.
Usability and user experience design
is about designing products to be effective, efficient, and satisfying. Specifically, ISO defines usability as the "extent to which a product can be used by specified users to achieve specified goals effectively, efficiently and with satisfaction in a specified context of use"
For fields in which a single selection
is required and there are a large number of possible options, consider using a drop-down select box to conserve screen real estate
label of a <button> element
is set inside the element and can include markup. This allows more advanced accessibility hints to be included, like marking up language change. When using the <input> element to create buttons, the label is set in the value attribute of the element.
<keygen> element Private key
is stored locally, and the public key is sent to the server
<label> element
is the formal way to define a label for an HTML form widget.
<label> element
is the most important element if you want to build accessible forms, when implemented properly, screenreaders will speak a form element's label along with any related instructions.
The <input> element
is the most important form element
The goal of web accessibility
is to make the web work well for people with disabilities.
form-handler
is typically a server page with a script for processing input data
A stand-alone checkbox
is used for a single option that the user can turn on or off.
<fieldset> element
is used to group related data in a form
left-to-right languages
it is customary to visually position labels to the right of radio buttons and checkboxes, and to the left or directly above other form fields.
In addition to the <fieldset> element,
it's also common practice to use HTML titles (e.g. <h1>, <h2>) and sectioning (e.g. <section>) to structure a complex form.
For text areas
make sure to give the user sufficient room to enter and read their text.
grouping related form controls
makes forms more understandable for all users, as related controls are easier to identify.
Grouping controls
makes it easier for people to focus on smaller and more manageable groups rather than try to grasp the entire form at once.related entries of a <select> element can be grouped using <optgroup>.
While accessibility focuses on people with disabilities
many accessibility requirements also improve usability for everyone.
Each input field must have a
name attribute to be submitted
Labels
need to describe the purpose of the form control
min and max attributes Works with the following input types
number, range, date, datatime-local, month, time and week
step attributes Works with the following input types
number, range, date, datetime-local, month, time and week
Note that it's always possible to use a form widget
outside of a <form> element but if you do so, that form widget has nothing to do with any form.
The role of accessibility in a universal web
provides a more in-depth exploration of the importance and benefits of accessibility as a distinct discipline continuing to focus on people with disabilities,
Placeholder text
provides instructions or an example of the required data format inside form fields that have not yet been edited by the user.
<output> element
represents the result of a calculation (like one performed by a script)
You can use an asterisk, "required" in parentheses following the field, or we can divide the form into two sections
required and optional information.
By default, the first item in the drop-down list is
selected
GET is best suited for
short, non-sensitive, amounts of data, because it has size limitations too
A label and a form control
should be associated with each other either implicitly or explicitly.
Usability and user experience design
significantly overlap with accessibility when "specified users" includes people with a range of disabilities and "specified context of use" includes accessibility considerations such as assistive technologies.
The Readonly attribute
specifies that the input field is read only (cannot be changed)
The maxlength attribute
specifies the maximum allowed length for the input field
The size attribute
specifies the size (in characters) for the input field
The rows attribute
specifies the visible number of lines in a text area
Cols attribute
specifies the visible width of a text area
required attributes Works with the following input types
text, search, url, tel, email, password, date pickers, number, checkbox, radio, file
The autocomplete attribute works with <form> and the following <input> types
text, search, url, tel, email, password, datepickers, range, and color
Accessibility Requirements
that are also general usability principles — which are included in accessibility requirements because they can be significant barriers to people with disabilities.
Accessibility Requirements
that are more specific to people with disabilities — for example, they ensure that websites work well with assistive technologies such as screen readers that read aloud web pages, screen magnifiers that enlarge web pages, and voice recognition software that is used to input text. Most of these requirements are technical and relate to the underlying code rather than to the visual appearance.
Combining accessibility standards and usability processes with real people ensures
that web design is technically and functionally usable by people with disabilities. This is referred to as usable accessibility or accessible user experience (UX)
If the action attribute is omitted
the action is sent to the current page
If the name attribute is omitted
the data of that input field will not be sent at all
With a maxlength attribute
the input field will not accept more than the allowed number of characters
when GET is used
the submitted form data will be visible in the page address field
When you provide choices for your users
they will feel more free and more in control of their experience on your website.
The label can be hidden visually
though it still needs to be provided within the code to support other forms of presentation and interaction, such as for screen reader and speech input users.
Web designers and developers can use usability processes, methods, and techniques, such as user-centered design (UCD) process and user experience design
to address the user interface component of accessibility.
(The exact values will vary depending on their use but ) minimums of 50 characters wide by 10 lines tall
to ensure readability.
Provide instructions
to help users understand how to complete the form and use individual form controls.
Provide labels
to identify all form controls, including text fields, checkboxes, radio buttons, and drop-down menus. In most cases, this is done by using the <label> element.
for radio buttons or checkboxes
use the fieldset and legend tags to group the elements logically under an obvious heading. This grouping keeps the form manageable to users, as it can be broken down into smaller pieces in their minds.
Include redundant modalities
using both a beep and a menu bar flash to notify a user of an error, using text to label images, redundantly allowing a user to issue commands by typing or selecting something with a pointer
Placeholder text
usually displayed with lower color contrast than text provided by users, and it disappears from am fields when users start entering text.
Normally, the form data is sent to a web page on the server
when the user clocks on the submit button
Screen readers often switch to "Forms Mode"
when they are processing content within a <form> element.
you need to provide an easily findable legend
which notifies the user of the symbol's meaning.
Whenever possible, use the label element to associate text
with form elements explicitly. The for attribute of the label must exactly match the id of the form control.
Accessibility especially benefits people
without disabilities who are in limiting situations, such as using the web on a mobile phone when visual attention is elsewhere, in bright sunlight, in a dark room, in a quiet environment, in a noisy environment, and in an emergency.
Another advantage of properly set up labels is that
you can click the label to activate the corresponding widget, in all browsers.
Each time you have a set of radio buttons
you ought to nest them inside a <fieldset> element.