Form inputs

Must

A default input format must be indicated and supported.

Description

All users benefit from clearly indicated, well supported, form input formats, whether text, numbers, date, or a specific combination. It makes it easier to get it right first time and reduces errors when completing forms.

The format required can be indicated as part of the label, set by correctly coding the input field, and assisted by providing the correct keyboard mode on devices that support it.

Gesture based input, such as a slider or swipe-able select list, should also be clearly indicated. Any gestures must be implemented along with support for accessible alternatives, for example mobile keyboards.

IOS

UITextField elements use the UITextInputTraits protocol to control what type of keyboard will be shown to the user (numeric, text, etc.). Thus, the default type of keyboard can be set using the keyboardType property.

Accessibility traits can be used to provide special accessibility gestures such as flicking up and down to increase or decrease a value or using UIAccessibilityTraitAllowsDirectInteraction to allow users to use the control directly once it is focused. Accessibility Hints should be used to indicate special gestures.

iOS examples

// Example 1 - set the default input type for a text field
textField.keyboardType = UIKeyboardTypeNumbersAndPunctuation;

// Example 2 - allow and indicate direct interaction for gestures
[aButton setTitle:NSLocalizedString(@"Smile", @"Button title") forState:UIControlStateNormal];
[aButton setAccessibilityHint:NSLocalizedString(@"Draw a smile on this button!", @"Accessibility hint for the smile button")];
[aButton setAccessibilityTraits:UIAccessibilityTraitSelected | UIAccessibilityTraitImage | UIAccessibilityTraitAllowsDirectInteraction];                        
// No indication of input type or gestures expected
[aButton setTitle:NSLocalizedString(@"Smile", @"Button title") forState:UIControlStateNormal];
[aButton setAccessibilityTraits:UIAccessibilityTraitSelected | UIAccessibilityTraitImage];                        

ANDROID

Use contentDescription to provide information on special gestures. The default keyboard can also be set using the android:inputType attribute of the editText element. This can be used to tailor the provided keyboard for entry of numbers, passwords or email addresses. See Android Developer Training - Keyboard Input.

Android example

// Example 1 - setting the default keyboard type
<EditText android:inputType="number" ... />

// Example 2 - using android:contentDescription to indicate gestures that can be used with graphical elements
<View android:contentDescription="Mood - Draw a smile or a frown" />                        
// Example 1 - not setting the default keyboard type to number for a number field
<EditText ... />

// Example 2 - not setting the contentDescription property with instructions for gesture use
<View android:hint="Mood" ... />                        

HTML

In HTML 5 the type of input can be indicated by the type attribute. Examples include:

  • Date
  • Month
  • Number
  • Range
  • Tel
  • Text
  • Time
  • url
  • week

Without HTML 5 the input method can be indicated textually as part of the explicit label or through off-screen text for screen reader users.

 

HTML example

input[type=range] with descriptive fallback text in associated label:

<label for="t1">Rating (between 1 and 5):</label>
<input type="range" min="1" max="5" value="3" id="t1">                        

No indication of expected input:

<label for="t1">Rating:</label>
<input type="text" id="t1">                        

TESTING

Procedures
  1. Activate a screen reader.
  2. Locate form fields.
  3. Verify that form fields announce a input type or restrict the keyboard to relavant input.
Results

The following checks are all true:

  • The input type is announced by a screen reader;
  • The input type is restricted via the keyboard.