forms-accessibility.md

http://web-accessibility.carnegiemuseums.org/code/forms/

Example with fieldset:

<form class="form-example" method="post">
  <fieldset>
    <legend>Personal Information</legend>

    <label for="full-name">
      Full Name
      <span class="required">
        (required)
      </span>

      <span class="error-message">
          You must input a real name.
      </span>

      <input id="full-name" name="full-name" required="" type="text">

    </label>

    <label for="email">
      Email
      <span class="required">
        (required)
      </span>

      <span class="error-message">
        The email address you entered is not valid.
      </span>

      <input id="email" name="email" required="" type="email">

    </label>

  </fieldset>

  <fieldset>
    <legend>Credit Card Information</legend>

    <label for="cc">
      Credit Card Number
      <span class="required">
        (required)
      </span>

      <span class="error-message">
          Your credit card number should be all numbers.
      </span>

      <input id="cc" name="cc" required="" type="text" minlength='13' maxlength='20' pattern='\s*[0-9]+-?\s*[0-9]+-?\s*[0-9]+-?\s*[0-9]+-?\s*'>

    </label>
  </fieldset>

  <fieldset>
    <label for='text-comments'>
      Please leave your comments or questions here
      <span class="required">
        (required)
      </span>

      <span class="error-message">
        Please give us a little more information about your inquiry.
      </span>

      <textarea id='text-comments' required=''></textarea>
    </label>
  </fieldset>

  <fieldset>
    <legend id='legend-1'>Can we add you to our email mailing list? <span class="required">(required)</span></legend>

    <ul aria-labelledby='legend-1' role='radiogroup'>
      <li>
        <label for="yes">
          <span class="error-message">
            Please select yes or no.
          </span>

          <input id="yes" required="" type="radio" name="answers" value="yes">

          Yes
        </label>
      </li>
      <li>
        <label for="no">
          <input id="no" type="radio" name="answers" value="no">

          No
        </label>
      </li>
    </ul>
  </fieldset>

  <fieldset>
    <legend id='legend-2'>Which topics interest you? <span class="required">(required)</span></legend>

    <ul aria-labelledby='legend-2' role='group'>
      <li>
        <label for="science">
          <span class="error-message">
            Please select at least one category.
          </span>

          <input id="science" required="" type="checkbox" name="categories" value="science">

          Science
        </label>
      </li>
      <li>
        <label for="children-programs">
          <input id="children-programs" required="" type="checkbox" name="categories" value="children-programs">

          Programs for Children
        </label>
      </li>
      <li>
        <label for="new-events">
          <input id="new-events" required="" type="checkbox" name="categories" value="new-events">

          New Events
        </label>
      </li>
    </ul>
  </fieldset>

  <fieldset>
    <label for="options">Choose from the following:
      <span class="required">
        (required)
      </span>

      <span class="error-message">
        Please choose one of the following options.
      </span>
      <select name="options" id="options" required=''>
        <option value=''> Select </option>
        <option value="value1">Option A</option>
        <option value="value2">Option B</option>
        <option value="value3">Option C</option>
      </select>
    </label>
  </fieldset>

  <button class='form-example-submit' type="submit">Submit Form</button>
</form>