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

From Level Access Web Labs
Jump to navigation Jump to search
 
(73 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;
 +
}
 +
div {
 +
  clear:both;
 
  }
 
  }
 
</style>
 
</style>
 
</head>
 
</head>
 +
<body>
 
<form>
 
<form>
     <div style="background-color:purple;">
+
  <fieldset style="width:40%;" id="f1">
       <label>jon</label>
+
    <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>
 +
    <div>
 +
      <label class="left" for="t2">Email:</label><input class="left" id="t2" type="text">
 +
    </div>
 +
</fieldset>
 +
</form>
 +
</body>
 +
</html>
  
   <fieldset style="width:40%;">
+
==Fieldset with Legend and Inputs wrapping their associated Labels==
     <legend>Shipping Address:</legend>
+
<html>
     <div style="background-color:purple;">
+
<body>
      <label for="t1">Name:</label> <input id="t1" type="text" >
+
<form>
 +
   <fieldset style="width:40%;" id="f11">
 +
     <legend >Meal Selection:</legend>
 +
     <div>
 +
      <input id="cb1" type="checkbox" ><label for="cb1">Fish</label>  
 
     </div>
 
     </div>
     <div style="background-color:green">
+
     <div>
      <label for="t3">Address:</label> <input id="t3" type="text">
+
      <input id="cb2" type="checkbox"><label for="cb2">Chicken</label>
 
     </div>
 
     </div>
     <div style="background-color:red;">
+
     <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>
 +
<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>
 +
 +
<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>
 +
 
[[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?