H71: Providing a description for groups of form controls using fieldset and legend elements

HTML Snippet	Code
Scenario 1: Group of radio buttons are grouped with fieldset and legend
Select Payment Method Debit Card Credit Card Online Banking
Scenario 2: Group of checkboxes are grouped with fieldset and legend
I am interested in the following (check all that apply): Photography Watercolor Acrylic
Scenario 3: Group of radio buttons using role group
Set Alerts for your Account Send an alert when balance exceeds $ 3,000 Yes No
Scenario 4: Group of checkboxes using role group
Select options to send everyday balance Yes No
Scenario 5: Group of text fields are grouped with fieldset and legend
Residential Address Address: Postal/Zip Code: Postal Address Address: Postal/Zip Code:

<form> <fieldset> <legend>Select Payment Method</legend> <input type="radio" name="PM" id="debit" value="0"> <label for="debit">Debit Card</label><br> <input type="radio" name="PM" id="Credit" value="1"> <label for="Credit">Credit Card</label><br> <input type="radio" name="PM" id="online" value="2"> <label for="online">Online Banking</label><br> </fieldset> </form>

I am interested in the following (check all that apply): Photography
Watercolor
Acrylic

<fieldset> <legend>I am interested in the following (check all that apply):</legend> <input type="checkbox" id="photo" name="interests" value="ph"> <label for="photo">Photography</label><br /> <input type="checkbox" id="watercol" name="interests" checked="checked" value="wa"> <label for="watercol">Watercolor</label><br /> <input type="checkbox" id="acrylic" name="interests" checked="checked" value="ac"> <label for="acrylic">Acrylic</label> </fieldset>

Set Alerts for your Account

Send an alert when balance exceeds $ 3,000

Yes

No

<h3>Set Alerts for your Account</h3> <div role="group" aria-labelledby="alert1"> <p id="alert1">Send an alert when balance exceeds $ 3,000</p> <div> <input type="radio" aria-labelledby="a1r1" name="a1radio"/> <span id="a1r1">Yes</span> </div> <div> <input type="radio" aria-labelledby="a1r2" name="a1radio"/> <span id="a1r2">No</span> </div> </div> <p><input type="submit" value="Continue" id="continue_btn" name="continue_btn" /></p>

Select options to send everyday balance

Yes

No

<div role="group" aria-labelledby="alertc2"> <p id="alertc2">Select options to send everyday balance</p> <div> <input type="checkbox" aria-labelledby="a1c1" name="a1check"/> <span id="a1c1">Yes</span> </div> <div> <input type="checkbox" aria-labelledby="a2c2" name="a2check"/> <span id="a2c2">No</span> </div> </div> <p><input type="submit" value="Continue" id="continue_btn_chk" name="continue_btn_chk" /></p>

Residential Address Address: Postal/Zip Code:

Postal Address Address: Postal/Zip Code:

<fieldset> <legend>Residential Address</legend> <label for="raddress">Address: </label> <input type="text" id="raddress" name="raddress" /> <label for="rzip">Postal/Zip Code: </label> <input type="text" id="rzip" name="rzip" /> </fieldset> <fieldset> <legend>Postal Address</legend> <label for="paddress">Address: </label> <input type="text" id="paddress" name="paddress" /> <label for="pzip">Postal/Zip Code: </label> <input type="text" id="pzip" name="pzip" /> </fieldset>