Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Update identify-input-purpose.html #629

Closed
wants to merge 2 commits into from
Closed

Update identify-input-purpose.html #629

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
452b03e
Update identify-input-purpose.html
marcjohlic Feb 19, 2019
c670ab8
Update identify-input-purpose.html
marcjohlic Feb 19, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
151 changes: 102 additions & 49 deletions understanding/21/identify-input-purpose.html
View file
Open in desktop
@@ -1,58 +1,111 @@
<!DOCTYPE html> <!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"> <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">

<head> <head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<title>Identify Input Purpose - Understanding WCAG 2.1</title> <title>Identify Input Purpose - Understanding WCAG 2.1</title>
<link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove" /> <link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove" />
</head> </head>

<body> <body>
<h1>Understanding Identify Input Purpose</h1> <h1>Understanding Identify Input Purpose</h1>
<section id="intent"> <section id="intent">
<h2>Intent of this Success Criterion</h2> <h2>Intent of this Success Criterion</h2>


<p>The intent of this Success Criterion is to ensure that the purpose of a form input collecting information about the user can be programmatically determined, so that user agents can extract and present this purpose to users using different modalities. The ability to programmatically declare the specific kind of data expected in a particular field makes filling out forms easier, especially for people with cognitive disabilities.</p> <p>The intent of this Success Criterion is to ensure that the purpose of a form input collecting information about
<p>Appropriate visible labels and instruction can help users understand the purpose of form input fields, but users may benefit from having fields that collect specific types of information be rendered in an unambiguous, consistent, and possibly customized way for different modalities - either through defaults in their user agent, or through the aid of assistive technologies.</p> the user can be programmatically determined, so that user agents can extract and present this purpose to users
<p>For some input fields, the type attribute already offers a way to specify the purpose, for example, input type="tel", input type="email", or input type="password". However, these are only very broad categories, describing the type of input, but not necessarily its purpose, especially as it relates to user-specific input fields. As an example, type="email" indicates that the field is for an e-mail address but does not clarify if the purpose is for entering the user's e-mail address or some other person's e-mail.</p> using different modalities. The ability to programmatically declare the specific kind of data expected in a
<p>This success criterion defines the types of user interface component inputs, found in <a href="https://www.w3.org/TR/WCAG21/#input-purposes">Section 7 of the WCAG 2.1 Recommendation</a>, that must be programmatically identified. When these user input purposes are present, and if the technology supports doing so, the field purpose must be identified programmatically.</p> particular field makes filling out forms easier, especially for people with cognitive disabilities.</p>
<p>The HTML autocomplete attribute only accepts a certain number of specific well-defined fixed values. This allows a more fine-grained definition or identification of purpose than the type attribute, for example, by allowing the author to specify a specific type of name: Name (autocomplete="name”), Given Name (autocomplete="given-name”), Family Name (autocomplete="family-name”), as well as Username (autocomplete="username”), and Nickname (autocomplete="nickname”).</p> <p>Appropriate visible labels and instruction can help users understand the purpose of form input fields, but users
<p>By adopting and repurposing this predefined taxonomy of definitions, user agents and assistive technologies can now present the purpose of the inputs to users in different modalities. For example, assistive technologies may display familiar icons next to input fields to help users who have difficulties reading. An icon of a birthday cake may be shown in front of an input field with autocomplete="bday", or the icon of a telephone in front of an input field with autocomplete="tel".</p> may benefit from having fields that collect specific types of information be rendered in an unambiguous,
<p>In addition to repurposing this taxonomy, when the autocomplete attribute technique is used to meet this Success Criteria, browsers and other user-agents can suggest and 'autofill' the right content by autocompleting these fields based on past user input stored in the browser. By defining more granular definitions of common input purposes, for example “Birthday” (autocomplete=”bday”), browsers can store personalized values for each of these fields (the user's birth day date). The user is relieved of having to type the information and can instead confirm or - if needed - change the value of the field, a significant benefit for users with memory issues, dyslexia and other disabilities. Because the autocomplete values are independent of language, users that may not be familiar with the text used to visually identify user input fields (the label) can still have that purpose consistently identified to them due to the fixed taxonomy of terms.</p> consistent, and possibly customized way for different modalities - either through defaults in their user agent, or
<p>When the user agent and assistive technology support for other metadata formats matures, metadata schemes like the <a href="https://w3c.github.io/personalization-semantics/content/">Personalization Semantics Content Module</a> may be used in addition or instead of the HTML autocomplete attribute to identify the purpose of input fields. They can also support automated adaptations that identify and match author-provided input labels to defined vocabularies or symbols that are used instead for labelling inputs.</p> through the aid of assistive technologies.</p>
</section> <p>For some input fields, the type attribute already offers a way to broadly specify the intention of the input

field, for
<section id="benefits"> example, input type="tel", input type="email", or input type="password". However, these are only very broad
<h3>Specific Benefits of Success Criterion 1.3.5:</h3> categories, describing the type of input, but not necessarily its purpose, especially as it relates to
<ul> user-specific input fields. As an example, type="email" indicates that the field is for an e-mail address but does
<li>People with language and memory related disabilities or disabilities that affects executive function and decision-making benefit from the browser auto-filling personal information (such as name or address) when the autocomplete attribute is used to meet this Success Criteria, which means information does not need to be remembered by the user.</li> not clarify if the purpose is for entering the user's e-mail address or some other person's e-mail.</p>
<li>People with cerebral palsy, stroke, head injury, motor neuron disease or learning disability sometimes prefer images for communication. They can employ assistive technology which adds icons to input fields to communicate the purpose of the fields visually.</li> <p>This success criterion defines the types of user interface component input purposes, found in <a
<li>People with motor impairments also benefit from reducing the need for manual input when filling out forms.</li> href="https://www.w3.org/TR/WCAG21/#input-purposes">Section 7 of the WCAG 2.1 Recommendation</a>, that must be
</ul> programmatically identifiable. When these user input purposes are present, and if the technology supports doing
</section> so, the field purpose must be programmatically identifiable.</p>

<p>The HTML autocomplete attribute only accepts a certain number of specific well-defined fixed values. This allows
<section id="examples"> a more fine-grained definition or identification of purpose than the type attribute, for example, by allowing the
<h2>Examples of Success Criterion 1.3.5</h2> author to specify a specific type of name: Name (autocomplete="name”), Given Name (autocomplete="given-name”),
<ul> Family Name (autocomplete="family-name”), as well as Username (autocomplete="username”), and Nickname
<li><strong>A contact form using autofill</strong><br />A contact form auto-fills in the fields for name, street, post code, city, telephone number and email address from autofill values stored in the user's browser. Assistive technology can offer a customized way of identifying particular input fields, for example drawing on a set of symbols / icons that is familiar to the user, to communicate the purpose of the fields visually.</li> (autocomplete="nickname”).</p>
<li><strong>An order from with separate billing and shipping address</strong><br />A product order form fills in the address fields for billing address and a separate set of address fields for the shipping address, using the autofill detail tokens 'billing' and 'shipping'</li> <p>By adopting and repurposing this predefined taxonomy of definitions, user agents and assistive technologies can
<li><strong>A contact form using icons</strong><br />A browser plugin to add icons inserts icons representing the person's name, home address, telephone number and email address to identify the input purpose visually.</li> now present the purpose of the inputs to users in different modalities. For example, assistive technologies may
</ul> display familiar icons next to input fields to help users who have difficulties reading. An icon of a birthday
</section> cake may be shown in front of an input field with autocomplete="bday", or the icon of a telephone in front of an

input field with autocomplete="tel".</p>
<section id="resources"> <p>In addition to repurposing this taxonomy, when the autocomplete attribute technique is used to meet this Success
<h2>Related Resources</h2> Criteria, browsers and other user-agents can suggest and 'autofill' the right content by autocompleting these
<ul><li><a href="https://www.w3.org/TR/coga-gap-analysis/#table3">COGA Gap Analysis Table 3: Entering Data, Error Prevention, &amp; Recovery</a></li></ul> fields based on past user input stored in the browser. By defining more granular definitions of common input
</section> purposes, for example “Birthday” (autocomplete=”bday”), browsers can store personalized values for each of these

fields (the user's birthday date). The user is relieved of having to type the information and can instead confirm
<section id="techniques"> or - if needed - change the value of the field, a significant benefit for users with memory issues, dyslexia and
<h2>Techniques and Failures for Success Criterion 1.3.5</h2> other disabilities. Because the autocomplete values are independent of language, users that may not be familiar

with the text used to visually identify user input fields (the label) can still have that purpose consistently
<section id="sufficient"> identified to them due to the fixed taxonomy of terms.</p>
<h3>Sufficient Techniques</h3> <p>When the user agent and assistive technology support for other metadata formats matures, metadata schemes like
the <a href="https://w3c.github.io/personalization-semantics/content/">Personalization Semantics Content
Module</a> may be used in addition or instead of the HTML autocomplete attribute to identify the purpose of
input fields. They can also support automated adaptations that identify and match author-provided input labels to
defined vocabularies or symbols that are used instead for labelling inputs.</p>
</section>

<section id="benefits">
<h3>Specific Benefits of Success Criterion 1.3.5:</h3>
<ul> <ul>
<li><a href="../../techniques/html/H98.html">Identify the purpose of inputs using the autocomplete values from HTML5.2</a></li> <li>People with language and memory related disabilities or disabilities that affects executive function and
decision-making benefit from the browser auto-filling personal information (such as name or address) when the
autocomplete attribute is used to meet this Success Criteria, which means information does not need to be
remembered by the user.</li>
<li>People with cerebral palsy, stroke, head injury, motor neuron disease or learning disability sometimes prefer
images for communication. They can employ assistive technology which adds icons to input fields to communicate
the purpose of the fields visually.</li>
<li>People with motor impairments also benefit from reducing the need for manual input when filling out forms.
</li>
</ul> </ul>
</section>


<section id="examples">
<h2>Examples of Success Criterion 1.3.5</h2>
<ul>
<li><strong>A contact form using autofill</strong><br />A contact form auto-fills in the fields for name, street,
post code, city, telephone number and email address from autofill values stored in the user's browser. Assistive
technology can offer a customized way of identifying particular input fields, for example drawing on a set of
symbols / icons that is familiar to the user, to communicate the purpose of the fields visually.</li>
<li><strong>An order from with separate billing and shipping address</strong><br />A product order form fills in
the address fields for billing address and a separate set of address fields for the shipping address, using the
autofill detail tokens 'billing' and 'shipping'</li>
<li><strong>A contact form using icons</strong><br />A browser plugin to add icons inserts icons representing the
person's name, home address, telephone number and email address to identify the input purpose visually.</li>
</ul>
</section> </section>
</section>
</body> <section id="resources">
</html> <h2>Related Resources</h2>
<ul>
<li><a href="https://www.w3.org/TR/coga-gap-analysis/#table3">COGA Gap Analysis Table 3: Entering Data, Error
Prevention, &amp; Recovery</a></li>
</ul>
</section>

<section id="techniques">
<h2>Techniques and Failures for Success Criterion 1.3.5</h2>

<section id="sufficient">
<h3>Sufficient Techniques</h3>
<ul>
<li><a href="../../techniques/html/H98.html">Identify the purpose of inputs using the autocomplete values from
HTML5.2</a></li>
</ul>

</section>
</section>
</body>

</html>