Difference between revisions of "ARIA Group role"
Jump to navigation
Jump to search
| (22 intermediate revisions by 2 users not shown) | |||
| Line 2: | Line 2: | ||
<html> | <html> | ||
| − | <div role="group" aria-labelledby="s1"> | + | <style type="text/css"> |
| − | <span id="s1">Platform:</span> | + | [role="group"] { |
| − | <label><input type="radio" id="r1"> Mac </label> | + | border: thin solid black; |
| − | <label><input type="radio" id="r2"> Windows </label> | + | width: 50%; |
| − | <label><input type="radio" id="r3"> Linux </label> | + | margin-bottom: 1em; |
| + | } | ||
| + | </style> | ||
| + | |||
| + | <div role="group" aria-labelledby="s1" aria-label="Platform ARIA label"> | ||
| + | <span tabindex="-1" id="s1">Platform:</span> | ||
| + | <label><input type="radio" id="r1" name="a"> Mac </label> | ||
| + | <label><input type="radio" id="r2" name="a"> Windows </label> | ||
| + | <label><input type="radio" id="r3" name="a"> Linux </label> | ||
| + | </div> | ||
| + | |||
| + | <div role="group" aria-labelledby="s2" aria-label="Billing Address aria label"> | ||
| + | <span tabindex="-1" id="s2">Billing Address:</span> | ||
| + | <div><label>Name:<input type="text" id="r1" name="a"></label></div> | ||
| + | <div><label>City:<input type="text" id="r2" name="a"></label></div> | ||
| + | <div><label>Zipcode:<input type="text" id="r3" name="a"></label> </div> | ||
| + | </div> | ||
| + | |||
| + | <br><br><br> | ||
| + | |||
| + | <h3> Fieldset and Legend tag with H2 inside legend</h3> | ||
| + | <fieldset id="feedbackIntro"> | ||
| + | <legend> | ||
| + | <h2> Was this content helpful? </h2> | ||
| + | </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> | ||
| + | |||
| + | <br><br><br> | ||
| + | <h3> Fieldset and Legend tag with H2 wrapping the legend</h3> | ||
| + | <fieldset id="feedbackIntro"> | ||
| + | <h2> | ||
| + | <legend> Was this content helpful? </legend> | ||
| + | </h2> | ||
| + | <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> | ||
| + | |||
| + | <br><br><br> | ||
| + | <h3> Regular Fieldset and Legend tag (no heading)</h3> | ||
| + | <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> | ||
| + | |||
| + | <div role="group"> | ||
| + | group without accessible name | ||
| + | <input type="text" title="Email" /> | ||
</div> | </div> | ||
</html> | </html> | ||
| + | |||
| + | [[Category:ARIA]] | ||
Latest revision as of 15:54, 28 November 2016
ARIA role group example with input type radio.
Platform:
Billing Address:
Fieldset and Legend tag with H2 inside legend
Fieldset and Legend tag with H2 wrapping the legend
Regular Fieldset and Legend tag (no heading)
group without accessible name
