Forms page clarifications and improvements

[shawnbot]

@meiqimichelle and I have some specific questions regarding forms in one of the projects we're working on, but I think they're ones that could be answered in this guide:

• does every <fieldset> really need a <legend>, and if so, what is the best way to hide it? Legends are notoriously difficult to style, and it would be nice to offer people an alternative (e.g., an <h*> either in addition to or instead of <legend>).
• is it generally good or bad practice to wrap inputs in <label> with their text or not?
• can we have a specific example with checkboxes?
• re: <select> elements, what is the best practice for an empty first option (value="")? Does it need text, or does the input need a title attribute? Or would a <label> also suffice?

Re: checkboxes and radio buttons, I have a thing for using <label> because it increases the hit area of the controls (clicking on the label clicks the corresponding input). Can we standardize on a method for this that meets 508 requirements?

As a semantic markup stickler I also find the &nbsp;<br> distracting. Can we simplify the markup and just wrap those "lines" in <div> elements instead so that consumers of this information understand we're not suggesting they use   and <br> for accessibility reasons?

[nickbristow]

1. Yep, sure you can hide it if you duplicate the content
2. Good idea, but it still needs for <label for='id'> Blah <input id='id'></label>
3. Sure I'll add an example
4. value="" for your default value is fine, you can give it a prompt if you want "select blah" no need for title
5. yeah, we should change the  
   

[shawnbot]

Don't leave me hanging, Nick!

[andrewmaier]

@shawnbot I've used section.fieldset > h1.fieldset-legend on the airforce project. @nickbristow suggested I add aria-describedby to complete the effect. Much more easily styled. Changing my mind on this. See below.

[shawnbot]

Nice, thanks @andrewmaier. We should make this part of the guide if it's worth repeating!

[meiqimichelle]

To summarize what I think I'm reading here:

1. We must use fieldset/legend, but we can hide them in a way that keeps them accessible to screen readers and duplicate the content to aid in styling.
2. Proper protocol for labels is: <label for='id'> Blah <input id='id' aria-describedby='id'></label> I added the area-describedby...is this right @nickbristow ?
3. Thanks!
4. You can have an empty first option in <select> elements like so: value=''

...and we also need to update the form examples on the accessibility guide so that the markup is cleaner.

[meiqimichelle]

Also my intention with that comment was -- please correct if I'm not interpreting the convo right! Thx, all!

[meiqimichelle]

Ooooo, follow-up question to 1) -->
For checkboxes and radio buttons, is it true that if I use title I don't also need label ?

[andrewmaier]

1. We must use fieldset/legend

Fieldsets aren't required for accessibility as far as I'm aware because there are alternate, programmatic ways of grouping elements (name attributes for). If you do use them, however, you must have a legend (and deal with their ridiculous styling rules). I originally thought that we could replace <fieldsets/> with <section/> elements but, upon further consideration, I think I'm in the wrong here and that <fieldsets/> should be used.

I'm going to noodle on a good way to style this and get back to you (I'll likely start with something like <fieldset><legend><span class="legend-text" /></legend></fieldset>).

2. If we're getting all fancy with aria stuff, it looks like we should use aria-labelledby rather than aria-describedby: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-labelledby_attribute (where the attribute points to the id of the element that labels the current element). In context, that might look like this wonderful/terrible thing:

<div class="field field-radio">
  <label for="dta-yes">
    <input type="radio" name="dta" id="dta-yes" value="yes" aria-labelledby="dta-yes-label-text">
    <span class="label-text" id="dta-yes-label-text">Yes</span>
  </label>
</div>

[mgwalker]

Closing as stale, on the assumption that the need will resurface if it still exists.