Test 25 - Some Form Controls Violate Rules

Test Start

Test End

Rule References

Rule	Pass IDs	Fail IDs
Rule 73	id1	id6 id8
Rule 75	id2 id3 id4 id5 id7 id11 id12	id9 id10
Rule 76	none	id13
Rule 83	id2 id3 id4 id5 id9 id10 id11 id12 id13	id7

Calculations

No calculations for test 25

Test Description

This test contains a simple form.
* Some form controls are not properly labeled.
* The form contains nested FIELDSET elements, some of which do not have a LEGEND element.
* Some form controls do not have unique html ids.
* The submit button is input[type=image]; however it does not have an alt or title attribute.
* Some labels have child nodes; however, this should not result in a failure condition.

Test Markup

HTML4: [id]
HTML4: button
HTML4: fieldset
HTML4: input[title]
HTML4: input[type="button"]
HTML4: input[type="password"]
HTML4: input[type="radio"]
HTML4: input[type="text"]
HTML4: label
HTML4: select
HTML4: textarea

User Agent Implementation

No user agent implementation information.

HTML Source Code

<div class="wrapper">
   <form action="#" method="post">
   <fieldset id="id1">
      <legend class="formHeading">Profile Settings</legend>
      <p>
      <label for="id2" class="left"><span>First</span> Name</label>
         <input id="id2" type="text">
      </p>
      <p>
      <label for="id3" class="left"><span>Last</span> Name</label>
         <input id="id3" type="text">
      </p>
      <p>
         <label for="id4" class="left">User Name</label>
         <input id="id4" type="text">
      </p>
      <p>
         <label for="id5" class="left">Password</label>
         <input id="id5" type="password" >
      </p>
      <p>
      <fieldset id="id6" class="inset">
      <h3 class="formSubheading">Gender:</h3>
       <p>
         <input id="id7" type="radio" name="sex" value="male">
         <label for="id7">Male</label>
      </p>
      <p>
         <input id="id7" type="radio" name="sex" value="female">
         <label for="id7">Female</label>
      </p>
      </fieldset>
      <fieldset id="id8" class="inset">
      <h3 class="formSubheading">Message Options:</h3>
       <p>
         <input id="id9" type="checkbox" value="getPM">
         Receive private messages from other users
      </p>
      <p>
         <input id="id10" type="checkbox" value="visible">
         Allow others to see when you are online.
      </p>
      </fieldset>
      <p>
      <label for="id11" class="formSubheading">Post Signature:</label><br>
         <textarea rows="5" id="id11" style="width: 25em;"></textarea>
      </p>
      <label for="id12" class="formSubheading">Theme Options:</label>
      <p>
      <select id="id12">
         <option value="default">Default Theme</option>
         <option value="dark">Dark Theme</option>
         <option value="blue">Blue Theme</option>
      </select>
      </p>
      <p>
      <input id="id13" class="submitButton" onclick="return false;" type="image" src="http://www.oaa-acessibility.org/media/testsuite/images/submit_button.png" />
      </p>
   </fieldset>
   </form>
</div>

CSS Code

div.wrapper {
  margin: 20px;
  padding: 10px;
  overflow: visible;
  background-color: #faf7f0;
  border: 1px solid #880000;
  -webkit-border-radius: 10px; /* Safari and Chrome rounded corners */
  -moz-border-radius: 10px; /* Firefox rounded corners */
  border-radius: 10px; /* Opera rounded corners */
}

fieldset {
margin: 10px 20px;
width: 40em;
}
fieldset.inset {
   margin: 10px 0;
   width: 21em;
}
.formHeading {
  font-weight: bold;
  font-size: 1.4em;
  padding-bottom: 10px;
}
.formSubheading {
  font-weight: bold;
  font-size: 1em;
  margin: 0;
  padding-bottom: 0;
}
label.left {
   width: 6em;
   float: left;
}
button.submitButton {
   margin: 0;
   padding: 0;
   height: 25px;
   width: 150px;
   border: none;
   background-color: transparent;
}
.focus {
  border: 3px solid #5ea3f1 !important;
}

Javascript Source Code

$(document).ready(function() {

  $('input, textarea, select').focus(function () {
    $(this).addClass('focus');
  }); // end focus handler

  $('input, textarea, select').blur(function () {
    $(this).removeClass('focus');
  }); // end blur handler

}); // end ready

OpenAjax Links