View source for Proposed WCAG 2.1 SC Techniques

[[Category: WCAG 2.1]]
==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><br> <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.
					
<div itemscope itemtype="https://www.w3.org/TR/personalization-semantics-1.0/">
…..


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

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.

<div itemscope itemtype="https://www.w3.org/TR/personalization-semantics-1.0/">
…..
<input type="text" name="fname" Itemprop ="phone"/>
</div>
					

			 		 		 			
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: [https://cloudfour.com/thinks/the-ems-have-it-proportional-media-queries-ftw/ em based media queries] (Future technique)
* Using CSS grids to reflow content (CSS). Ref: [http://alistapart.com/article/fluidgrids fluid grids] (Future technique)
* Using CSS Flexbox to reflow content (CSS) (Future technique)
* [https://www.w3.org/TR/WCAG20-TECHS/SCR34 SCR34: Calculating size and position in a way that scales with text size (Scripting)]
* [https://www.w3.org/TR/WCAG20-TECHS/G206 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)

==Graphics Contrast (1.4.11)==
*

==Text Spacing (1.4.12)==
* [[Allowing for Spacing Override]]

==Content on Hover or Focus (1.4.13)==
*

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

==Animation from Interactions (2.2.9)==
*

==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.

==Character Key Shortcuts (2.4.11)==
*

==Label in Name (2.4.12)==
*

==Target Size (2.5.3)==
*

==Target Size (Enhanced) (2.5.4)==
*

==Pointer Gestures (2.5.1)==
*

==Concurrent Input Mechanisms (2.5.5)==
*

==Orientation (2.6.2)==
*

==Motion Actuation (2.6.1)==
*

==Accidental Activation (2.5.2)==
*

==Status Changes (3.2.6)==
*