Difference between revisions of "ARIA Group role"
Jump to navigation
Jump to search
| (7 intermediate revisions by the same user not shown) | |||
| Line 2: | Line 2: | ||
<html> | <html> | ||
| − | <div role="group" aria-labelledby="s1" aria-label=" | + | <style type="text/css"> |
| − | <span id="s1">Platform:</span> | + | [role="group"] { |
| + | border: thin solid black; | ||
| + | width: 50%; | ||
| + | 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="r1" name="a"> Mac </label> | ||
<label><input type="radio" id="r2" name="a"> Windows </label> | <label><input type="radio" id="r2" name="a"> Windows </label> | ||
| Line 9: | Line 17: | ||
</div> | </div> | ||
| − | <div role="group" aria-labelledby="s2" aria-label=" | + | <div role="group" aria-labelledby="s2" aria-label="Billing Address aria label"> |
<span tabindex="-1" id="s2">Billing Address:</span> | <span tabindex="-1" id="s2">Billing Address:</span> | ||
<div><label>Name:<input type="text" id="r1" name="a"></label></div> | <div><label>Name:<input type="text" id="r1" name="a"></label></div> | ||
| Line 16: | Line 24: | ||
</div> | </div> | ||
| + | <br><br><br> | ||
| − | |||
| − | |||
<h3> Fieldset and Legend tag with H2 inside legend</h3> | <h3> Fieldset and Legend tag with H2 inside legend</h3> | ||
<fieldset id="feedbackIntro"> | <fieldset id="feedbackIntro"> | ||
| − | <legend>< | + | <legend> |
| − | <button id="feedbackYes" class="feedbackHelpful" title="Yes" data-value="yes">Yes</button> | + | <h2> Was this content helpful? </h2> |
| − | <button id="feedbackNo" class="feedbackHelpful" title="No" data-value="no");">No</button> | + | </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> | ||
<br><br><br> | <br><br><br> | ||
| − | <h3> Fieldset and Legend tag with H2 | + | <h3> Fieldset and Legend tag with H2 wrapping the legend</h3> |
<fieldset id="feedbackIntro"> | <fieldset id="feedbackIntro"> | ||
| − | < | + | <h2> |
| − | <button id="feedbackYes" class="feedbackHelpful" title="Yes" data-value="yes">Yes</button> | + | <legend> Was this content helpful? </legend> |
| − | <button id="feedbackNo" class="feedbackHelpful" title="No" data-value="no");">No</button> | + | </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> | </fieldset> | ||
<br><br><br> | <br><br><br> | ||
| − | <h3> Regular Fieldset and Legend tag</h3> | + | <h3> Regular Fieldset and Legend tag (no heading)</h3> |
<fieldset id="feedbackIntro"> | <fieldset id="feedbackIntro"> | ||
| − | <legend> Was this content helpful?</legend> | + | <legend> Was this content helpful?</legend> |
| − | <button id="feedbackYes" class="feedbackHelpful" title="Yes" data-value="yes">Yes</button> | + | <button id="feedbackYes" class="feedbackHelpful" title="Yes" data-value="yes">Yes</button> |
| − | <button id="feedbackNo" class="feedbackHelpful" title="No" data-value="no");">No</button> | + | <button id="feedbackNo" class="feedbackHelpful" title="No" data-value="no");">No</button> |
</fieldset> | </fieldset> | ||
| + | <div role="group"> | ||
| + | group without accessible name | ||
| + | <input type="text" title="Email" /> | ||
| + | </div> | ||
</html> | </html> | ||
[[Category:ARIA]] | [[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
