wai-tutorials
wai-tutorials copied to clipboard
w3c
Form fields for Mobile
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
I wonder if that should go to the labels page (as not everything has to do with labels).
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.
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.
I’ll take a pass to use this great information and make a proposal (in the new design).
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.
+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.
