1.3.5: Mention heuristics, turning off autocomplete for forms, and tweak examples

custom-words.txt

@@ -83,6 +83,8 @@ Zehe
 # Words
 artboard
 auditorily
+autofill
+autofilling
 autoplays
 chatbot
 chatbots

understanding/21/identify-input-purpose.html

@@ -23,13 +23,16 @@ <h2>Intent of this Success Criterion</h2>
   <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>
   <p>For some input fields, the <code>type</code> attribute already offers a way to broadly specify the intention of the input field, for example, <code>&lt;input type="tel"&gt;</code>, <code>&lt;input type="email"&gt;</code>, or <code>&lt;input type="password"&gt;</code>. 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, <code>type="email"</code> indicates that the field is for an email address but does not clarify if the purpose is for entering the user's email address or some other person's email.</p>
   <p>This success criterion defines the types of user interface component input purposes, found in <a href="{{ trUrl }}#input-purposes">Section 7 of the WCAG 2.1 Recommendation</a>, that must be programmatically identifiable. When these user input purposes are present, and if the technology supports doing so, the field purpose must be programmatically identifiable.</p>
+  <p>The list of <a href="{{ trUrl }}#input-purposes">Input Purposes for User Interface Components</a> borrows from the <a href="https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#autofill">HTML specification's autofill definitions</a>, but conceptually the listed purposes apply to other technologies.</p>
   <p>The HTML <code>autocomplete</code> 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 (<code>autocomplete="name"</code>), Given Name (<code>autocomplete="given-name"</code>), Family Name (<code>autocomplete="family-name"</code>), as well as Username (<code>autocomplete="username"</code>), and Nickname (<code>autocomplete="nickname"</code>).</p>
   <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 <code>autocomplete="bday"</code>, or the icon of a telephone in front of an input field with <code>autocomplete="tel"</code>.</p>
-  <p>In addition to repurposing this taxonomy, when the autocomplete attribute technique is used to meet this Success Criterion, 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” (<code>autocomplete="bday"</code>), 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 or, if needed, change the value of the field, a significant benefit for users with memory issues, dyslexia, and other disabilities. Because the <code>autocomplete</code> 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>
+  <p>In addition to repurposing this taxonomy, when the <code>autocomplete</code> attribute technique is used to meet this success criterion for HTML content, 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” (<code>autocomplete="bday"</code>), 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 or, if needed, change the value of the field, a significant benefit for users with memory issues, dyslexia, and other disabilities. Because the <code>autocomplete</code> 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>
+  <p>Whether or not user agents actually autofill inputs is <em>not</em> relevant when evaluating this criterion. What matters is whether or not the inputs programmatically expose their purpose. Conversely, user agents may use heuristics, rather than programmatically determined purposes, to autofill inputs – this is <em>not</em> sufficient to meet the requirements of this criterion.</p>
   <p>If an input field accepts two different types of input purpose (as in combined user name/user email fields) and the technology used does not allow multiple purpose values to be defined, it is valid to provide either one or the other value or leave out the designation of input purpose altogether.</p>
   <p>When the user agent and assistive technology support for other metadata formats matures, metadata schemes like the <a href="https://www.w3.org/TR/adapt-symbols/">WAI-Adapt: Symbols 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>
   <p class="note">This success criterion is specifically scoped to inputs collecting <em>information about the user</em>. The list of <a href="{{ trUrl }}#input-purposes">Input Purposes</a> includes a few values that may not strictly be interpreted as directly relating to a user – most prominently, <code>transaction-amount</code>. An input field for information that is not <em>about the user</em> does not need to programmatically expose its purpose, even if that purpose is included in the <a href="{{ trUrl }}#input-purposes">Input Purposes</a> list.</p>
   <p class="note">The term <q>input</q> is used here as a generic way to refer to form controls that accept user input. For instance, in HTML, it is not limited to the <code>&lt;input&gt;</code> element, but also covers other controls such as <code>&lt;textarea&gt;</code> and <code>&lt;select&gt;</code>.</p>
+  <p class="note">In some instances, authors may want to prevent user agents from autofilling form fields. However, in order to meet the requirements of this criterion, input purposes still need to be programmatically determinable. For HTML, there are methods to turn off autocomplete/autofill behavior in browsers, while still allowing for explicit purpose to be specified for inputs – for example, see <a href="https://developer.mozilla.org/en-US/docs/Web/Security/Practical_implementation_guides/Turning_off_form_autocompletion">MDN: How to turn off form autocompletion</a></p>
 </section>
 
 <section id="benefits">
@@ -44,19 +47,18 @@ <h3>Specific Benefits of Success Criterion 1.3.5</h3>
 <section id="examples">
   <h2>Examples of Success Criterion 1.3.5</h2>
   <dl>
-    <dt>A contact form using autofill</dt>
-    <dd>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.</dd>
+    <dt>A contact form</dt>
+    <dd>A contact form explicitly identifies the purpose for its various fields: name, street, post code, city, telephone number and email address. This makes it possible for the user's browser to then autofill the fields with previously stored values. Assistive technologies can offer a customized way of identifying particular input fields, for example showing a set of symbols / icons that is familiar to the user, in order to communicate the purpose of the fields visually.</dd>
     <dt>An order form with separate billing and shipping address</dt>
-    <dd>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'</dd>
-    <dt>A contact form using icons</dt>
-    <dd>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.</dd>
+    <dd>A product order form explicitly identifies the address fields for the billing address and a separate set of address fields for the shipping address, using the HTML <code>autocomplete</code> detail tokens 'billing' and 'shipping'</dd>
   </dl>
 </section>
 
 <section id="resources">
   <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>
+    <li><a href="https://developer.mozilla.org/en-US/docs/Web/Security/Practical_implementation_guides/Turning_off_form_autocompletion">MDN: How to turn off form autocompletion</a> while keeping <code>autocomplete</code> attributes on form fields</li>
   </ul>
 </section>