Difference between revisions of "Fieldset, Label, and Legend Elements"

From Level Access Web Labs
Jump to navigation Jump to search
Line 58: Line 58:
  
 
<br><br>
 
<br><br>
<h3> Regular Fieldset and Legend tag</h3>
+
<h3> Using ARIA Describedby instead of legend</h3>
  
 
<H4 id="hid">Was this content helpful?</H4>
 
<H4 id="hid">Was this content helpful?</H4>
 
<button id="feedbackYes" class="feedbackHelpful" title="Yes" data-value="yes" aria-describedby=hid>Yes</button>
 
<button id="feedbackYes" class="feedbackHelpful" title="Yes" data-value="yes" aria-describedby=hid>Yes</button>
 
<button id="feedbackNo" class="feedbackHelpful" title="No" data-value="no");" aria-describedby=hid>No</button>
 
<button id="feedbackNo" class="feedbackHelpful" title="No" data-value="no");" aria-describedby=hid>No</button>
 +
 +
<br><br>
 +
<h3> Using ARIA Labelledby instead of legend</h3>
 +
 +
<H4 id="hid">Was this content helpful?</H4>
 +
<button id="feedbackYes" class="feedbackHelpful" title="Yes" data-value="yes" aria-labelledby=hid>Yes</button>
 +
<button id="feedbackNo" class="feedbackHelpful" title="No" data-value="no");" aria-labelledby=hid>No</button>
 +
 +
<br><br>
 +
<h3> Using ARIA Label instead of legend</h3>
 +
 +
<H4 id="hid">Was this content helpful?</H4>
 +
<button id="feedbackYes" class="feedbackHelpful" title="Yes" data-value="yes" aria-label="Was this content helpful?">Yes</button>
 +
<button id="feedbackNo" class="feedbackHelpful" title="No" data-value="no");" aria-label="Was this content helpful?">No</button>
 +
  
 
</form>
 
</form>

Revision as of 21:10, 20 April 2016

Shipping Address:


Fieldset and Legend tag with H2 inside legend

Was this content helpful?



Fieldset and Legend tag with H2 outside the legend

Was this content helpful?



Regular Fieldset and Legend tag

Was this content helpful?


Using ARIA Describedby instead of legend

Was this content helpful?



Using ARIA Labelledby instead of legend

Was this content helpful?



Using ARIA Label instead of legend

Was this content helpful?


<html>