title: Is there a Standardized method of Form Accessibility and Semantics?
body: <p>With so many articles on the "proper," "semantic," and "accessible" use of forms and architecture, I'm rethinking how I approach forms. There are literally so many variations of what is "right" that I'm not 100% on what is really accurate anymore. </p>
  
  <p>In an MDN article (<a href="https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Forms/How_to_structure_an_HTML_form#The_%3Cfieldset%3E_and_%3Clegend%3E_elements" rel="nofollow">here</a>), it mentions:</p>
  
  <blockquote>
    <p>With this example, a screen reader will pronounce "Fruit juice size small" for the first widget, "Fruit juice size medium" for the second, and "Fruit juice size large" for the third.</p>
  </blockquote>
  
  <pre><code>&lt;form&gt;
    &lt;fieldset&gt;
      &lt;legend&gt;Fruit juice size&lt;/legend&gt;
      &lt;p&gt;
        &lt;input type="radio" name="size" id="size_1" value="small" /&gt;
        &lt;label for="size_1"&gt;Small&lt;/label&gt;
      &lt;/p&gt;
      &lt;p&gt;
        &lt;input type="radio" name="size" id="size_2" value="medium" /&gt;
        &lt;label for="size_2"&gt;Medium&lt;/label&gt;
      &lt;/p&gt;
      &lt;p&gt;
        &lt;input type="radio" name="size" id="size_3" value="large" /&gt;
        &lt;label for="size_3"&gt;Large&lt;/label&gt;
      &lt;/p&gt;
    &lt;/fieldset&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>Now, I can see the benefit of this for something like the example above, however, say I made a multi-step shopping cart, I wouldn't want assistive technology to speak "Checkout: cc-number," "Checkout: cc-date" using "checkout" prior to every label. Especially in cases where steps are labelled. This would be repetitive and sometimes confusing I would assume... But I've always grouped sections of a form within a <code>&lt;fieldset&gt;</code>. Now I'm rethinking using <code>fieldset</code> and <code>legend</code> at all, but does it now go against semantics? What's the trade-off? Is there a balance?</p>
  
  <p>Additionally, and I'll use the same MDN article so I'm not sending you all over the web,</p>
  
  <blockquote>
    <p>Note that even without considering assistive technologies, having a
    formal label set for a given widget lets users to click on the label
    to activate the corresponding widget in all browsers. This is
    especially useful for radio buttons and checkboxes.</p>
    
    <p>Some assistive technologies can have trouble handling multiple labels
    for a single widget. Because of this, you should nest a widget inside
    its corresponding element to build an accessible form.</p>
  </blockquote>
  
  <pre><code>&lt;form&gt;
    &lt;p&gt;
      &lt;input type="checkbox" id="taste_1" name="taste_cherry" value="1"&gt;
      &lt;label for="taste_1"&gt;I like cherry&lt;/label&gt;
    &lt;/p&gt;
    &lt;p&gt;
      &lt;label for="taste_2"&gt;
        &lt;input type="checkbox" id="taste_2" name="taste_banana" value="1"&gt;
        I like banana
      &lt;/label&gt;
    &lt;/p&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>Now, in this instance, the labeling for both these items are reasonably common, I have used both methods, but is there a balance between accessibility and semantics here? I tend to put the label <em>not</em> wrapping the input for consistency in code and I know their is strong debate on this subject  (mainly the ability to drop the <code>for</code> and not need the <code>id</code> and/or having labels in different areas of the markup). So, I'm not trying to rehash the debate here, I tend to use the <code>for</code> and <code>id</code> regardless if I wrap elements in a <code>label</code> or not. But if there is an accessibility concern for one then why isn't the latter the golden standard? </p>
  
  <p>Yet another point, WAI-Aria rules now contribute, so how much do these rules really impact the accessibility and semantics of a form?</p>
  
  <pre><code>&lt;p&gt;Required fields are followed by &lt;strong&gt;&lt;abbr title="required"&gt;*&lt;/abbr&gt;&lt;/strong&gt;.&lt;/p&gt;
  &lt;form&gt;
    &lt;fieldset&gt;
      &lt;legend&gt;Fruit juice size*&lt;/legend&gt;
      &lt;p&gt;
        &lt;label for="size_1"&gt;
          &lt;input type="radio" name="size" id="size_1" value="small" aria-labelledby="size_1_label" /&gt;
          &lt;span id="size_1_label" required aria-required="true"&gt;Small&lt;/span&gt;
        &lt;/label&gt;
      &lt;/p&gt;
      &lt;p&gt;
        &lt;label for="size_2"&gt;
          &lt;input type="radio" name="size" id="size_2" value="medium" aria-labelledby="size_2_label" /&gt;
          &lt;span id="size_2_label"&gt;Medium&lt;/span&gt;
        &lt;/label&gt;
      &lt;/p&gt;
      &lt;p&gt;
        &lt;label for="size_3"&gt;
          &lt;input type="radio" name="size" id="size_3" value="large" aria-labelledby="size_3_label" /&gt;
          &lt;span id="size_3_label"&gt;Large&lt;/span&gt;
        &lt;/label&gt;
      &lt;/p&gt;
    &lt;/fieldset&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>I'm really just curious whether or not there is a standardized method of approach when dealing with Semantic and Accessible markup. So far it seems people just do whatever they feel is right and then vocalize their thoughts all over the internet. </p>
  
  <p>I've read through W3C's drafts and recommendations but even they use varying examples. Does anyone have evidence of what approach really improves accessibility and semantics in relation to forms? Are their any particular websites that have the time an resources to test this and draw an accurate conclusion that I'd be able to review? </p>