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

From Level Access Web Labs
Jump to navigation Jump to search
m (Jon Avila moved page Fieldset Legend Elements to Fieldset and Legend Elements without leaving a redirect)
 
(66 intermediate revisions by 5 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>
 +
<form>
 +
  <fieldset style="width:40%;" id="f1">
 +
    <legend >Shipping Address:</legend>
 +
    <div>
 +
      <label class="left" for="t1">Name:</label> <input class="left" id="t1" type="text" >
 +
    </div>
 +
    <div>
 +
      <label class="left" for="t3">Address:</label> <input class="left" id="t3" type="text">
 +
    </div>
 +
    <div>
 +
      <label class="left" for="t2">Email:</label><input class="left" id="t2" type="text">
 +
    </div>
 +
</fieldset>
 +
</form>
 +
</body>
 +
</html>
 +
 
 +
==Fieldset with Legend and Inputs wrapping their associated Labels==
 +
<html>
 +
<body>
 
<form>
 
<form>
   <fieldset style="width:40%;">
+
   <fieldset style="width:40%;" id="f11">
     <legend>Shipping Address:</legend>
+
     <legend >Meal Selection:</legend>
 
     <div>
 
     <div>
       <label for="t1">Name:</label> <input id="t1" type="text" >
+
       <input id="cb1" type="checkbox" ><label for="cb1">Fish</label>  
 
     </div>
 
     </div>
 
     <div>
 
     <div>
      <label for="t3">Address:</label> <input id="t3" type="text">
+
      <input id="cb2" type="checkbox"><label for="cb2">Chicken</label>
 
     </div>
 
     </div>
 
     <div>
 
     <div>
       <label for="t2">Email:</label><input id="t2" type="text">
+
       <input id="cb3" type="checkbox"><label for="cb3">Veggie</label>
 
     </div>
 
     </div>
 
</fieldset>
 
</fieldset>
 
</form>
 
</form>
 +
</body>
 +
</html>
 +
 +
==Fieldset and Legend element containing an H2==
 +
<html>
 +
<body>
 +
<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>
 +
</body>
 +
</html>
 +
 +
==Fieldset with H2 and no Legend==
 +
<html>
 +
<body>
 +
<fieldset id="feedbackIntro">
 +
<H2> Was this content helpful? </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>
 +
</body>
 +
</html>
 +
 +
==Fieldset with Legend wrapped by H2==
 +
<html>
 +
<body>
 +
<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>
 +
</body>
 +
</html>
 +
 +
==Regular Fieldset and Legend tag with buttons==
 +
<html>
 +
<body>
 +
<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>
 +
</body>
 +
</html>
 +
 +
==Using ARIA Describedby instead of Fieldset/Legend==
 +
<html>
 +
<body>
 +
<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="feedbackNo" class="feedbackHelpful" title="No" data-value="no" aria-describedby=hid>No</button>
 +
</body>
 +
</html>
 +
 +
==Using ARIA Describedby instead of Fieldset/Legend and input type submit instead of button==
 +
<html>
 +
<body>
 +
<H4 id="hid2">Was this content helpful?</H4>
 +
<input type="submit" value="Yes" aria-describedby="hid2">
 +
<input type="submit" value="No" aria-describedby="hid2">
 +
</body>
 +
</html>
 +
 +
==Using ARIA Labelledby instead of Fieldset/Legend==
 +
 +
<html>
 +
<body>
 +
<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>
 +
</body>
 +
</html>
 +
 +
==Using ARIA Label instead of Fieldset/Legend==
 +
 +
<html>
 +
<body>
 +
<div>
 +
<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>
 
</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>
 +
 +
==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>
 +
  <legend>What type of search would you like to perform?</legend>
 +
  <input aria-required="true" id="i1" type="radio" name="searchType" />
 +
  <label for="i1"> Search intranet </label><br>
 +
  <input aria-required="true" id="i1a" type="radio" name="searchType" />
 +
  <label for="i1a"> Search Internet </label><br>
 +
  <input aria-required="true" id="i1b" type="radio" name="searchType" />
 +
  <label for="i1b"> Search both </label><br>
 +
</fieldset>
 +
</form>
 +
</body>
 +
</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>
 +
 +
    <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>
 
</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?