如何为表单控件组设置Label For属性以满足508合规要求？

Great question! When working on 508 compliance for radio button (or checkbox) groups, you’ve already nailed the individual option labels (each <label for="..."> tied to a single radio button ID—perfect). For group-level descriptions like "Speed Assessment", the native, most accessible solution is to use the <fieldset> and <legend> elements—this is the standard WCAG/508-recommended approach.

Why <fieldset> + <legend>? #

• <fieldset> wraps all related form controls to semantically group them together, so assistive tech recognizes they’re part of the same set.
• <legend> acts as the "label" for the entire group. Screen readers will announce the legend text when users navigate into the group, giving them clear context for the options they’re choosing.

Modified Example Code #

Here’s how to update your HTML to fix the "Speed Assessment" group:

CSS (unchanged):

input[type=radio] { float: left; }

Updated HTML:

<form id="myForm">
  <label for="distance">Distance:</label>
  <input type="text" id="distance"/>

  <label for="unit">Unit:</label>
  <select id="unit">
    <option value="miles">Miles</option>
    <option value="km">Km</option>
  </select>

  <!-- Replace the <p> with fieldset + legend -->
  <fieldset>
    <legend>Speed Assessment:</legend>
    <label for="speedSlow">Slow</label>
    <input type="radio" name="speed" id="speedSlow"/><br/>
    <label for="speedMedium">Medium</label>
    <input type="radio" name="speed" id="speedMedium"/><br/>
    <label for="speedFast">Fast</label>
    <input type="radio" name="speed" id="speedFast"/><br/>
  </fieldset>
</form>

Key Notes: #

• You don’t need a for attribute on <legend>—it’s inherently linked to the <fieldset> and its contents.
• This method works reliably across all screen readers and browsers, making it more dependable than ARIA-only workarounds (though aria-labelledby can be used in edge cases, <fieldset>/<legend> is always preferred for native semantic support).
• Your existing labels for the text input and dropdown are already fully compliant—no tweaks needed there!

内容的提问来源于stack exchange，提问作者gene b.