Form fields for Mobile

[brewerj]

Proposed new subhead ("Form field controls") to improve mobile coverage for responsive design of forms.

If confirmed, add note "Developed with support from WCAG TA Project"

Could also add in resource section:
https://www.w3.org/TR/mobile-accessibility-mapping/#set-the-virtual-keyboard-to-the-type-of-data-entry-required

[yatil]

HTML5 form field controls should be used to automatically show the virtual keyboard.

change to:

When HTML5 form fields are used, a virtual keyboard that allows easier input of the data is shown automatically: For example, a number field shows a numeric keyboard, a date field a native date picker.

---

On smaller screens, field labels may drop completely.

Either say “visual field labels” or drop the sentence altogether (my preferred way). We could even say: “While some designs want visual field labels to be dropped, users prefer visible labels as they make the form easier to understand.”

---

Ensure that fields have text descriptions.

Unsure what this is referring to aria-describedby sections? Might be confusing to have labels and descriptions in one paragraph and not to define both.

[AndrewArch]

agree with "users prefer visible labels as they make the form easier to understand"

Also confused by "Ensure that fields have text descriptions." - aren't these form labels?

[sharronrush]

1. @yatil's edit is clearer even though it adds length, prefer the suggested sentence.
2. +1 to putting more detailed label guidance for responsive/mobile design on a labels page (and point to it)
3. Agree precision is needed in reference to the option to "drop" labels

[hkramer]

+1 to Eric's version. Would drop last sentence. Agree it is confusing.

[yatil]

I wonder if that should go to the labels page (as not everything has to do with labels).

[iamjolly]

I agree with suggestions from @yatil for HTML5 form field use and virtual keyboard examples.

For these two sentences:

On smaller screens, field labels may drop completely. Ensure that fields have text descriptions.

We may need to provide more context about the design choice of hiding ("dropping") the labels on small screens and the responsibility to ensure the form remains usable and accessible with examples of 1) how to reflow labels visually to be above their fields, or 2) visually hide the labels and use other methods to describe the fields.

Putting more detailed label guidance for responsive/mobile design on a labels page may make more sense than adding it to this page, too.

[yatil]

Another note: In the WCAG 2.0 definition of labels, they are presented to all users.

label
text or other component with a text alternative that is presented to a user to identify a component within Web content
Note 1: A label is presented to all users whereas the name may be hidden and only exposed by assistive technology. In many (but not all) cases the name and the label are the same.
Note 2: The term label is not limited to the label element in HTML.

I don’t know if we make that distinction throughout the tutorial, but when we talk about “dropping labels”, we probably want to be precise.

[nrhsinclair]

Agree that additional clarification is needed.

[yatil]

I’ll take a pass to use this great information and make a proposal (in the new design).

[brianelton]

Pulling together the suggested updates:
"When HTML5 form fields are used, a virtual keyboard that allows easier input of the data is shown automatically: For example, a number field shows a numeric keyboard, a date field a native date picker. While some designs want visual field labels to be dropped, users prefer visible labels as they make the form easier to understand.”

I am happy with this and can make a new PR unless there are other comments.

[lakeen]

+1 to:

"When HTML5 form fields are used, a virtual keyboard that allows easier input of the data is shown automatically: For example, a number field shows a numeric keyboard, a date field a native date picker. While some designs want visual field labels to be dropped, users prefer visible labels as they make the form easier to understand.”

or with just a bit of wordsmithing :

"When HTML5 form fields are used, a virtual keyboard appears making it easier to input data.
For example, a number field shows a numeric keyboard, a date field a native date picker.

While some designs want visual field labels to be dropped, users prefer visible labels as they make the form easier to understand.”

I'm ok either way.

[brianelton]

Updates covered in #721. Closing PR.