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

From Level Access Web Labs
Jump to navigation Jump to search
 
(39 intermediate revisions by 4 users not shown)
Line 1: Line 1:
 +
==Notes==
 +
* JAWS 18+ only announces fieldset label when entering in Firefox and Chrome but in IE still announces for each tab stop in the fieldset. Doesn’t seem to announce fieldset for Edge.
 +
 +
==Fieldset with legend and inputs with aria-label==
 +
<html>
 +
<body>
 +
<fieldset>
 +
  <legend>Phone number</legend>
 +
  <input id="areaCode" name="areaCode" aria-label="Area Code"
 +
type="text" size="3" value="" >
 +
  <input id="exchange" name="exchange" aria-label ="First three digits of phone number"
 +
type="text" size="3" value="" >
 +
  <input id="lastDigits" name="lastDigits" aria-label ="Last four digits of phone number"
 +
type="text" size="4" value="" >
 +
</fieldset>
 +
</body>
 +
</html>
 +
 +
==Fieldset with Legend and Label elements preceding their associated Input elements==
 +
 
<html>
 
<html>
 
<head>
 
<head>
 
<style>
 
<style>
−
  input {
+
  input.left {
 
   float:right;
 
   float:right;
 
  }
 
  }
−
  label {
+
  label.left {
 
   float:left;
 
   float:left;
 
  }
 
  }
Line 13: Line 33:
 
</style>
 
</style>
 
</head>
 
</head>
−
<div>
+
<body>
−
  <label>Label text on it's own</label>
 
−
</div>
 
−
<div>
 
 
<form>
 
<form>
 
   <fieldset style="width:40%;" id="f1">
 
   <fieldset style="width:40%;" id="f1">
 
     <legend >Shipping Address:</legend>
 
     <legend >Shipping Address:</legend>
 
     <div>
 
     <div>
−
       <label for="t1">Name:</label> <input id="t1" type="text" >
+
       <label class="left" for="t1">Name:</label> <input class="left" id="t1" type="text" >
 
     </div>
 
     </div>
 
     <div>
 
     <div>
−
       <label for="t3">Address:</label> <input id="t3" type="text">
+
       <label class="left" for="t3">Address:</label> <input class="left" id="t3" type="text">
 
     </div>
 
     </div>
 
     <div>
 
     <div>
−
       <label for="t2">Email:</label><input id="t2" type="text">
+
       <label class="left" for="t2">Email:</label><input class="left" id="t2" type="text">
 
     </div>
 
     </div>
 
</fieldset>
 
</fieldset>
 +
</form>
 +
</body>
 +
</html>
  
 +
==Fieldset with Legend and Inputs wrapping their associated Labels==
 +
<html>
 +
<body>
 +
<form>
 +
  <fieldset style="width:40%;" id="f11">
 +
    <legend >Meal Selection:</legend>
 +
    <div>
 +
      <input id="cb1" type="checkbox" ><label for="cb1">Fish</label>
 +
    </div>
 +
    <div>
 +
      <input id="cb2" type="checkbox"><label for="cb2">Chicken</label>
 +
    </div>
 +
    <div>
 +
      <input id="cb3" type="checkbox"><label for="cb3">Veggie</label>
 +
    </div>
 +
</fieldset>
 +
</form>
 +
</body>
 +
</html>
  
−
<br><br>
+
==Fieldset and Legend element containing an H2==
−
<h3> Fieldset and Legend tag with H2 inside legend</h3>
+
<html>
 +
<body>
 
<fieldset id="feedbackIntro">
 
<fieldset id="feedbackIntro">
−
<legend><H2> Was this content helpful? </H2></legend>
+
  <legend><H2> Was this content helpful? </H2></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>
 +
</body>
 +
</html>
  
−
<br><br>
+
==Fieldset with H2 and no Legend==
−
<h3> Fieldset with H2 and no legend</h3>
+
<html>
 +
<body>
 
<fieldset id="feedbackIntro">
 
<fieldset id="feedbackIntro">
 
<H2> Was this content helpful? </H2>
 
<H2> Was this content helpful? </H2>
 
<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>
 +
</body>
 +
</html>
  
−
<br><br>
+
==Fieldset with Legend wrapped by H2==
−
<h3> Fieldset and Legend tag with H2 outside the legend</h3>
+
<html>
 +
<body>
 
<fieldset id="feedbackIntro">
 
<fieldset id="feedbackIntro">
 
<H2><legend> Was this content helpful? </legend></H2>
 
<H2><legend> Was this content helpful? </legend></H2>
 
<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>
 +
</body>
 +
</html>
  
−
<br><br>
+
==Regular Fieldset and Legend tag with buttons==
−
<h3> Regular Fieldset and Legend tag</h3>
+
<html>
 +
<body>
 
<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>
 +
</body>
 +
</html>
  
−
 
+
==Using ARIA Describedby instead of Fieldset/Legend==
−
<br><br>
+
<html>
−
<h3> Using ARIA Describedby instead of legend</h3>
+
<body>
−
 
 
 
<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>
−
 
+
</body>
−
<br><br>
+
</html>
−
<h3> Using ARIA Describedby instead of legend and input type submit instead of button</h3>
 
  
 +
==Using ARIA Describedby instead of Fieldset/Legend and input type submit instead of button==
 +
<html>
 +
<body>
 
<H4 id="hid2">Was this content helpful?</H4>
 
<H4 id="hid2">Was this content helpful?</H4>
 
<input type="submit" value="Yes" aria-describedby="hid2">
 
<input type="submit" value="Yes" aria-describedby="hid2">
 
<input type="submit" value="No" aria-describedby="hid2">
 
<input type="submit" value="No" aria-describedby="hid2">
 +
</body>
 +
</html>
  
−
<br><br>
+
==Using ARIA Labelledby instead of Fieldset/Legend==
−
<h3> Using ARIA Labelledby instead of legend</h3>
 
  
 +
<html>
 +
<body>
 
<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-labelledby=hid>Yes</button>
 
<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>
+
<button id="feedbackNo" class="feedbackHelpful" title="No" data-value="no" aria-labelledby=hid>No</button>
 +
</body>
 +
</html>
 +
 
 +
==Using ARIA Label instead of Fieldset/Legend==
  
−
<br><br>
+
<html>
 +
<body>
 
<div>
 
<div>
−
<h3> Using ARIA Label 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-label="Was this content helpful?">Yes</button>
 
<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>
+
<button id="feedbackNo" class="feedbackHelpful" title="No" data-value="no" aria-label="Was this content helpful?">No</button>
 
</div>
 
</div>
 +
<label id="labl1">This is a legend</label>
 +
<H4 id="labl1">Was this content helpful?</H4>
 +
<button id="feedbackYes" class="feedbackHelpful" data-value="yes" aria-label="Was this content helpful? Yes">Yes</button>
 +
<button id="feedbackNo" class="feedbackHelpful" data-value="no" aria-labelledby="labl1">No</button>
 +
</body>
 +
</html>
  
−
<div>
+
==Fieldset with Aria-describedby set to the Fieldset element==
 +
<html>
 +
<body>
 +
  <fieldset aria-describedby="fruit_descr">
 +
    <legend>Choose a fruit:</legend>
 +
    <div id="fruit_descr">These are fruits from tropical regions.</div>
 +
    <input id="radio_1" type="radio" name="fruit" /><label for="radio_1">Gauva</label>
 +
    <input id="radio_2" type="radio" name="fruit" /><label for="radio_2">Mango</label>
 +
    <input id="radio_3" type="radio" name="fruit" /><label for="radio_3">Durian</label>
 +
  </fieldset>
 +
</body>
 +
</html>
 +
 
 +
==Fieldset with Aria-describedby set to the Input (type=radio) element==
 +
<html>
 +
<body>
 +
  <fieldset >
 +
    <legend>Choose a fruit:</legend>
 +
    <div id="fruit_descr">These are fruits from tropical regions.</div>
 +
    <input aria-describedby="fruit_descr" id="radio_1" type="radio" name="fruit" /><label for="radio_1">Gauva</label>
 +
    <input aria-describedby="fruit_descr" id="radio_2" type="radio" name="fruit" /><label for="radio_2">Mango</label>
 +
    <input aria-describedby="fruit_descr" id="radio_3" type="radio" name="fruit" /><label for="radio_3">Durian</label>
 +
  </fieldset>
 +
</body>
 +
</html>
 +
 
 +
==Other Miscellaneous Examples==
 +
<html>
 +
<body>
 +
<form>
 
<fieldset>
 
<fieldset>
−
<legend>What type of search would you like to perform?</legend>
+
  <legend>What type of search would you like to perform?</legend>
−
<input name="n2" required id="i1" type="radio" name="searchType" />
+
  <input aria-required="true" id="i1" type="radio" name="searchType" />
−
<label for="i1"> Search intranet </label><br>
+
  <label for="i1"> Search intranet </label><br>
−
<input name="n2" required id="i1a" type="radio" name="searchType" />
+
  <input aria-required="true" id="i1a" type="radio" name="searchType" />
−
<label for="i1a"> Search Internet </label><br>
+
  <label for="i1a"> Search Internet </label><br>
−
<input name="n2" required id="i1b" type="radio" name="searchType" />
+
  <input aria-required="true" id="i1b" type="radio" name="searchType" />
−
<label for="i1b"> Search both </label><br>
+
  <label for="i1b"> Search both </label><br>
 
</fieldset>
 
</fieldset>
−
</div>
 
 
</form>
 
</form>
−
</div>
+
</body>
 
</html>
 
</html>
  
 +
<html lang="en">
 +
  <head>
 +
    <title>radios</title>
 +
  </head>
 +
  <body>
 +
    <fieldset aria-required="true">
 +
      <legend>What type of search would you like to perform?</legend>
 +
      <input required id="i1" type="radio" name="searchType" />
 +
      <label for="i1"> Search intranet </label>
 +
      <input required id="i1a" type="radio" name="searchType" />
 +
      <label for="i1a"> Search Internet </label>
 +
      <input required id="i1b" type="radio" name="searchType" />
 +
      <label for="i1b"> Search both </label>
 +
    </fieldset>
  
−
<html>
+
    <fieldset title="this is a title">
−
 
+
      <input type="text" title="first name" >
−
 
+
    </fieldset>
  
 +
    <fieldset aria-label="this is an aria-label">
 +
      <input type="text" title="first name" >
 +
    </fieldset>
 +
  </body>
 +
</html>
  
 
[[Category:Elements]]
 
[[Category:Elements]]

Latest revision as of 00:47, 21 June 2019

Notes

  • JAWS 18+ only announces fieldset label when entering in Firefox and Chrome but in IE still announces for each tab stop in the fieldset. Doesn’t seem to announce fieldset for Edge.

Fieldset with legend and inputs with aria-label

Phone number

Fieldset with Legend and Label elements preceding their associated Input elements

Shipping Address:

Fieldset with Legend and Inputs wrapping their associated Labels

Meal Selection:

Fieldset and Legend element containing an H2

Was this content helpful?

Fieldset with H2 and no Legend

Was this content helpful?

Fieldset with Legend wrapped by H2

Was this content helpful?

Regular Fieldset and Legend tag with buttons

Was this content helpful?

Using ARIA Describedby instead of Fieldset/Legend

Was this content helpful?

Using ARIA Describedby instead of Fieldset/Legend and input type submit instead of button

Was this content helpful?

Using ARIA Labelledby instead of Fieldset/Legend

Was this content helpful?

Using ARIA Label instead of Fieldset/Legend

Was this content helpful?

Was this content helpful?

Fieldset with Aria-describedby set to the Fieldset element

Choose a fruit:
These are fruits from tropical regions.

Fieldset with Aria-describedby set to the Input (type=radio) element

Choose a fruit:
These are fruits from tropical regions.

Other Miscellaneous Examples

What type of search would you like to perform?


radios

What type of search would you like to perform?

Retrieved from "https://labs.levelaccess.com/index.php?title=Fieldset,_Label,_and_Legend_Elements&oldid=6218"