Difference between revisions of "ARIA Group role"

From Level Access Web Labs
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="my 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="my 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>
  
 
<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><H2> Was this content helpful? </H2></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 outside the legend</h3>
+
<h3> Fieldset and Legend tag with H2 wrapping the legend</h3>
 
<fieldset id="feedbackIntro">
 
<fieldset id="feedbackIntro">
<H2><legend> Was this content helpful? </legend></H2>
+
  <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

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