Forms page clarifications and improvements

[shawnbot]

Forms page clarifications and improvements

[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.