HTML5 forms, usability, and accessibility

अब Quizwiz के साथ अपने होमवर्क और परीक्षाओं को एस करें!

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.


संबंधित स्टडी सेट्स

Chapter 5 GDP (Gross Domestic Production) Quiz

View Set

Final Exam Part 2 (Chapters 8 - 14)

View Set

Advanced Health Assessment Test 1

View Set

Week 5 Sherpath: Natural Events, Disasters, and Mass Casualties

View Set

Biology exam 2 Module HW/ Pre-assessment

View Set

Implement & Support Servers chap 1-7 & Mid-Term,

View Set

Factoring Trinomials: a = 1 Quiz

View Set

Health Assessment Exam 3 test bank, Chapter 21: Abdomen (Health Assessment), Ch. 18PAD and PVD,

View Set