search

w3c / wai-website

This repository hosts the WAI Website.
https://www.w3.org/WAI/
Other
53 stars 211 forks source link

[New Tip] Design tip no5 - Forms and labels #738

Open dboudreau opened 8 years ago

dboudreau commented 8 years ago

Reference: http://w3c.github.io/wai-quick-start/designing.html#ensure-that-form-elements-include-clearly-associated-labels

This is a follow up to https://github.com/w3c/wai-website/issues/739.

The tip currently reads: "Ensure that all fields have a descriptive label adjacent to the field. For left-to-right languages, labels are usually positioned to the left or above the field, except for checkboxes and radio buttons where they are usually to the right. Avoid having too much space between labels and fields."

A couple of things don't quite work for me here.

  1. I understand why we mention the whole left-to-right languages, but it's overly complicated for no real value. Since the content is written in English and we're already not providing recommendations for any other type of language directions, I think we should just remove that part.
  2. For proximity issues and to provide the best stack possible (including on mobile), I would make a recommendation to favor visible labels, positioned right above the field, not to the left. Except for radio buttons and checkboxes of course).
  3. Because our tips are meant to be as straightforward as possible, I would not mention anything about the special snowflakes covered in H65 for moments when it's ok to have hidden labels.
  4. The last sentence "Avoid having too much space between labels and fields" is too vague. I think we can fix that by being a little more prescriptive in our tip. I would lose that sentence entirely.

Based on arguments explained in issue 321, and the ones above, I would suggest we change the wording of this tip, to: "Ensure that all form elements have a descriptive label adjacent to it. For proximity concerns, it is recommended to position the labels right above the fields, except for checkbox and radio button labels, which are usually positioned to the right of the form elements."

nitedog commented 8 years ago

During the development of these tips, we decided to make sure not to go beyond what WCAG says. We need to ensure consistency with WCAG, otherwise we risk confusing and frustrating people.

I'm not sure about positioning to the right for languages that are left-to-right - my understanding is that some people with screen magnification may find these hard to find. At least this is what I recall from our discussions for this tip.

Personally I would favor not re-opening discussion on completed tips until we have the next sets of tips published but I don't feel strongly about this - I'm happy with what the group decides on this...

sharronrush commented 6 years ago

@dboudreau Please advise if this is ready to be closed of it we should bring this discussion to March 2018 F2F meeting?

dboudreau commented 6 years ago

Happy to discuss once we all meet next week. It's been so long now that I would need to go back to my notes to jog my memory, and unfortunately, I have absolutely zero bandwidth leading to CSUN. But it would come back really quickly if we held a side session on Monday.