Fieldset, Label, and Legend Elements

Label text on it's own

Shipping Address:

Name:

Address:

Email:

Fieldset and Legend tag with H2 inside legend

<fieldset id="feedbackIntro">

<legend>

Was this content helpful?

</legend>

<button id="feedbackYes" class="feedbackHelpful" title="Yes" data-value="yes">Yes</button> <button id="feedbackNo" class="feedbackHelpful" title="No" data-value="no");">No</button> </fieldset>

Fieldset with H2 and no legend

<fieldset id="feedbackIntro">

Was this content helpful?

<button id="feedbackYes" class="feedbackHelpful" title="Yes" data-value="yes">Yes</button> <button id="feedbackNo" class="feedbackHelpful" title="No" data-value="no");">No</button> </fieldset>

Fieldset and Legend tag with H2 outside the legend

<fieldset id="feedbackIntro">

<legend> Was this content helpful? </legend>

<button id="feedbackYes" class="feedbackHelpful" title="Yes" data-value="yes">Yes</button> <button id="feedbackNo" class="feedbackHelpful" title="No" data-value="no");">No</button> </fieldset>

Regular Fieldset and Legend tag

<fieldset id="feedbackIntro"> <legend> Was this content helpful?</legend> <button id="feedbackYes" class="feedbackHelpful" title="Yes" data-value="yes">Yes</button> <button id="feedbackNo" class="feedbackHelpful" title="No" data-value="no");">No</button> </fieldset>

Using ARIA Describedby instead of legend

Was this content helpful?

<button id="feedbackYes" class="feedbackHelpful" title="Yes" data-value="yes" aria-describedby=hid>Yes</button> <button id="feedbackNo" class="feedbackHelpful" title="No" data-value="no");" aria-describedby=hid>No</button>

Using ARIA Describedby instead of legend and input type submit instead of button

Was this content helpful?

<input type="submit" value="Yes" aria-describedby="hid2"> <input type="submit" value="No" aria-describedby="hid2">

Using ARIA Labelledby instead of legend

Was this content helpful?

<button id="feedbackYes" class="feedbackHelpful" title="Yes" data-value="yes" aria-labelledby=hid>Yes</button> <button id="feedbackNo" class="feedbackHelpful" title="No" data-value="no");" aria-labelledby=hid>No</button>

Using ARIA Label instead of legend

Was this content helpful?

<button id="feedbackYes" class="feedbackHelpful" title="Yes" data-value="yes" aria-label="Was this content helpful?">Yes</button> <button id="feedbackNo" class="feedbackHelpful" title="No" data-value="no");" aria-label="Was this content helpful?">No</button>

<fieldset> <legend>What type of search would you like to perform?</legend> <input name="n2" required id="i1" type="radio" name="searchType" /> <label for="i1"> Search intranet </label>
<input name="n2" required id="i1a" type="radio" name="searchType" /> <label for="i1a"> Search Internet </label>
<input name="n2" required id="i1b" type="radio" name="searchType" /> <label for="i1b"> Search both </label>
</fieldset>

</form>

</html>

What type of search would you like to perform?

Search intranet Search Internet Search both