Difference between revisions of "ARIA Group role"

From Level Access Web Labs
Jump to navigation Jump to search
 
(5 intermediate revisions by the same user not shown)
Line 2: Line 2:
  
 
<html>
 
<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">  
 
<div role="group" aria-labelledby="s1" aria-label="Platform ARIA label">  
 
   <span tabindex="-1" id="s1">Platform:</span>
 
   <span tabindex="-1" id="s1">Platform:</span>
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