Difference between revisions of "ARIA Group role"

From Level Access Web Labs
Jump to navigation Jump to search
(Created page with "ARIA role group example with input type radio. <div role="group"> <label><input type="radio" id="r1"> Mac </label> <label><input type="radio" id="r2"> Windows </label> ...")
 
 
(26 intermediate revisions by 2 users not shown)
Line 1: Line 1:
 
ARIA role group example with input type radio.
 
ARIA role group example with input type radio.
 +
 +
<html>
 +
<style type="text/css">
 +
  [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="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">
 
<div role="group">
   <label><input type="radio" id="r1"> Mac </label>
+
   group without accessible name
  <label><input type="radio" id="r2"> Windows </label>
+
   <input type="text" title="Email" />
   <label><input type="radio" id="r3"> Linux </label>
 
 
</div>
 
</div>
 +
</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

Was this content helpful?




Fieldset and Legend tag with H2 wrapping the legend

Was this content helpful?




Regular Fieldset and Legend tag (no heading)

Was this content helpful?
group without accessible name