Proposed WCAG 2.1 SC Techniques

Identify Common Purpose (1.3.4)

we have the full formatted version at https://docs.google.com/document/d/1YiknHDDDdKBdwVTEpxwUpyCaQL_tnpp9CfDlFjCq16E/edit#heading=h.n8sq8t3ebanu

Purpose of Controls (1)- (Lisa) Technique Title: Providing the purpose of a control using autocomplete

Metadata

Technology: HTML Type: Technique |

When to Use

This technique can be used on form elements.

Description The object of this technique is to make the Autocomplete in HTML tells the browser to automatically complete the input based on user inputs to similar fields that the user has completed in the past. It looks for common name, and then knows to treat the form control.

When autocomplete attribute is on and the name is set to reflect the purpose of the control the browser will suggest values, saving the the user time and making it less likely that the user will make mistakes completing the form. Choosing between different values of this attribute should match choosing what the label for the element will be. This is particularly useful for users with disabilities that may make remembering or copying information harder or may make spelling mistakes or are likely to missread the label. Other user agents can use the same naming conventions to add additional support such as adding symbols

Examples Example Title: autocomplete with email address <form> <label for="email">Email Address</label>
<input type="email" name="email" id="email" autocomplete="on"> </form>

See it working at : https://html.com/attributes/input-autocomplete/

Example Title: autocomplete with first name

<label for="frmName”>First Name</label> <input name="fname" id="frmName" required autocomplete="on">

The autocomplete attribute, in contrast, describes what the value that the user will enter actually represents.

Working example:See lots of exampls at https://developers.google.com/web/updates/2015/06/checkout-faster-with-autofill Sites using it include AMazon

Tests

Procedure

Step 1 Examine the source code of the HTML or XHTML document and check that a that each control has a name attribute\

Step 2 confirm that the name attribute matches the purpose of the control (see table below

Step 3 If step1 or step 2 is not true, check that the purpose of the control is NOT one of the common purposes in the definitions of common controls Expected Results

Result Step 1 and 2 are true OR step 3 is true

Names: The values supported for the name fields are:

Value Description name full name honorific-prefix prefix or title (Mr., Mrs. Dr., etc.) given-name given or first name additional-name additional or middle name additional-name-initial additional or middle name initial family-name family name, surname, or last name honorific-suffix suffix (Jr., II, etc.) nickname nickname street-address full street address condensed into one line address-line1 first line of street address address-line2 second line of street address address-line3 third line of street address city or locality locality or city area administrative area, state, province, or region postal-code postal or ZIP code country country name fax full fax number, including country code fax-country-code international country code fax-national national fax number: full number minus country code fax-area-code area code fax-local local fax number: full number minus country and area codes fax-extension fax extension number email email address tel full phone number, including country code tel-country-code international country code tel-national national phone number: full number minus country code tel-area-code area code tel-local local phone number: full number minus country and area codes tel-extension phone extension number cc-name full name, as it appears on credit card cc-number credit card number cc-exp-month month of expiration of credit card cc-exp-year year of expiration of credit card cc-exp date of expiration of credit card cc-csc credit card security code language preferred language bday birthday bday-year year of birthday bday-month month of birthday bday-day day of birthday topic Topic for the form. Typically selected from a list of reserved words comment comment section. Typically a free text field subject form subject. Typically a free text field answer answer to a section question org company or organization organization-title user's position or title within company or organization sex sex or gender gender gender identity url Website URL photo photo or avatar section-***** used to group forms together

See also

See also: https://www.w3.org/TR/html5/forms.html Support(see https://www.w3schools.com/tags/att_input_autocomplete.asp) numbers in the table specify the first browser version that fully supports the attribute. Attribute

Tip: In some browsers you may need to activate an autocomplete function for this to work (Look under "Preferences" in the browser's menu).

Purpose of Controls (2)- (Lisa)

Technique Title: Purpose of Controls using ARIA

Metadata

Technology: ARIA | | HTML

Description

The objective of this technique is to make the purpose of controls clear so that the user can have additional support and enable personalization for controls. . The action, destination and field terms categorizes the target of a hyperlink, field or button.

Links, fields and buttons with these term present can have additional familiar user interface features to help users understand the link and follow the right one easily. User agents might add a familiar customized icon to the link, or style the link in a customized way, or position the link on the page in a location that the user generally expects to find a link of the particular type.

Examples

Example 1: Action Using ARIA

The action attribute provides the context of a button. It is typically be used on a button element or element with role="button".

For example: <button coga-action="undo" >default</button> The user experience may be simply replacing the text for the term "undo". Note that there is no default value.

See https://rawgit.com/w3c/personalization-semantics/master/semantics.html#action for supported values

Example 2: Destination Using ARIA

The destination term categorizes the target of a hyperlink.

<a href="home.html" coga-destination="home">our main page</a>

See https://rawgit.com/w3c/personalization-semantics/master/semantics.html#destination

Example 3: Feild Using ARIA field provides the context of a text input field such as a text box. It is typically used on an input of type text, or element with a responding role.

Example 3: Fields Using ARIA <input type="text" name="fname" coga-field="phone"/>

Tests Procedure

Step 1 Examine the source code of the HTML or XHTML document and check that a that each control has a field, destination or action attribute

Step 2 confirm that the value of the attribute matches the purpose of the control (see table below

Step 3 If step1 or step 2 is not true, check that the purpose of the control is NOT one of the common purposes in the definitions of common controls Expected Results

Result Step 1 and 2 are true OR step 3 is true Type: Technique

Purpose of Controls (3)- (Lisa)

Technique Title: Purpose of Controls using Microdata and the ARIA vocabulary

Metadata

Technology: ARIA | | HTML || microdata

Description

The objective of this technique is to make the purpose of controls clear so that the user can have additional support and enable personalization for controls. . One can use the microdat The ARIA vocabulary for action, destination and field terms categorizes the target of a hyperlink, field or button.

Links, fields and buttons with these term present can have additional familiar user interface features to help users understand the link and follow the right one easily. User agents might add a familiar customized icon to the link, or style the link in a customized way, or position the link on the page in a location that the user generally expects to find a link of the particular type.

Examples

Example 1 itemprop with schema.org The itemprop attribute provides the context of a button. It is typically be used on a button element or element with role="button".

<button itemscope  itemtype="http://schema.org/WriteAction">Compose</button>

Example 2: itemprop Using coga vocabulary on a button

The itemprop attribute provides the context of a button. It is typically be used on a button element or element with role="button".

In this example itemscope scopes the metadata to the containing element only.

Microdata has both itemprop and itemtype, and the use of either is based upon whether it is a Noun or a Verb (a Name or an Action). Since our goal is to disambiguate "actions" (controls), they are types, not properties. (so for example, the button above's "action" is to Write or Compose something).

For example: <form itemscope itemtype="https://www.w3.org/TR/personalization-semantics-1.0/"> …..

 <button itemprop="undo" >default</button

></form>

The user experience may be simply replacing the text for the term "undo". Note that there is no default value.

See https://rawgit.com/w3c/personalization-semantics/master/semantics.html#action for supported values

Example 2: itemprop with the coga vocabulary on a link

itemprop  value categorizes the target of a hyperlink.

…..

<a href="home.html" coga-destination="home">our main page</a>

See https://rawgit.com/w3c/personalization-semantics/master/semantics.html#destination

Example 3: itemprop with the coga vocabulary on a field Itemprop provides the context of a text input field such as a text box. It is typically used on an input of type text, or element with a responding role.

….. <input type="text" name="fname" Itemprop ="phone"/>

Tests Procedure

Step 1 Examine the source code of the HTML or XHTML document and check that a that each control has an Itemprop attribute

Step 2 confirm that the value of the attribute matches the purpose of the control Step 3 If step1 or step 2 is not true, check that the purpose of the control is NOT one of the common purposes in the definitions of common controls Expected Results

Result Step 1 and 2 are true OR step 3 is true Resources https://www.w3.org/TR/microdata/

we have the full formatted version at https://docs.google.com/document/d/1YiknHDDDdKBdwVTEpxwUpyCaQL_tnpp9CfDlFjCq16E/edit#

Reflow (1.4.10)

• Allowing for Reflow
• Using media queries (CSS). Ref: em based media queries (Future technique)
• Using CSS grids to reflow content (CSS). Ref: fluid grids (Future technique)
• Using CSS Flexbox to reflow content (CSS) (Future technique)
• SCR34: Calculating size and position in a way that scales with text size (Scripting)
• G206: Providing options within the content to switch to a layout that does not require the user to scroll horizontally to read a line of text
• Using PDF/UA when creating PDFs (Future technique)

Text Spacing (1.4.12)

• Allowing for Spacing Override

Timeouts (2.2.8)

we have the full formatted version at https://docs.google.com/document/d/1YiknHDDDdKBdwVTEpxwUpyCaQL_tnpp9CfDlFjCq16E/edit#heading=h.n8sq8t3ebanu

Interruptions (minimum) (2.2.7)

we have the full formatted version at https://docs.google.com/document/d/1YiknHDDDdKBdwVTEpxwUpyCaQL_tnpp9CfDlFjCq16E/edit#heading=h.n8sq8t3ebanu

Accessible Authentication (2.2.6)

we have the full formatted version at https://docs.google.com/document/d/1YiknHDDDdKBdwVTEpxwUpyCaQL_tnpp9CfDlFjCq16E/edit#heading=h.n8sq8t3ebanu

more techneqes

   Allowing the user to reset a password by pressing a link sent to them in an SMS or email.sms, which brings the user to a page that displays either the:
       current username and/or password; OR
       suggested new username and/or password; OR
       opportunity to create a new username and/or password
   Compiling to https://www.w3.org/TR/webauthn/ and allowing one component method such as biometrics or tokens (Possibly reword this to be more clear)
   Automatic user authentication based upon the use of a trusted device (to which the user has already logged in with their own identity);
   Security tokens, some of which are hardware devices, can be used to make authentication easier. Security tokens are used instead of, or in addition to, other forms of authentication such as passwords. Security-token hardware devices:
       include key fobs, rings, or small keypads;
       can store and/or generate a digital signature, a PIN, or biometric data;
       can transmit such data via a USB connector, RFID, Bluetooth wireless, or NFC.
   biometrics;
   being already logged in to third-party authentication services (e.g., OAuth, Facebook, etc.).
   Fast IDentity Online (FIDO), password-free standards for typical and two-factor authentication.
       FIDO relies upon user authentication based upon a user's device (e.g., phone, tablet, computer).
       A user's device registers the user, to a server, via a public key.
       Upon a challenge from the server, the user's device responds with a private key.
       The device's keys are unlocked by the user biometrically (e.g., fingerprint scanner) or by a button press, not by a password.