Questionnaire

CSS file

Questionnaire pages

A questionnaire page will have the following items:

• Breadcrumbs
• Page title
• Lead text
• Questions, see below (one or multiple)
• Actions
  • Primary (ex: Save and continue)
  • Secondary (ex: Cancel, Go back)
  • Tertiary (ex: Skip)

Questions

A question is a set of components wrapped in a sba-c-question-container.

• Question
  • Badges

    Use the badges to add flags to questions. NOTE: This concept is still under consideration. This is a placeholder for now.

  • Question primary text

    The question is the primary ask of the user. There must be a direct relationship between the question and the response solicited from the user. Questions should be focused and direct, and should not include text such as "for example."

  • Question support text

    This provides additional context about the nature of a question. Support text can include sample responses, in-depth descriptions, supplemental instructions, definitions, lists, etc., or any important information that the user needs know before providing a response. Quesiton support text will include HTML support for:

    • <p>
    • <ul>
    • <ol>
    • Links, bold text, italicized text
• Response

  The response is where the user provides a response to the question being asked. The response options must relate directly to the question being asked. The response will support a broad range of inputs, including:

  • Radio buttons
  • Check boxes
  • Text input
    • Text
    • Text area
    • Date
    • Date Range
    • Certify components:
      • Document prompt
      • Table
      • Inputs with ornaments
• Follow-ups

  Follow-ups remain hidden and disabled on the page and only appear when the user makes a specific response that triggers it to appear. The follow-up may be text or another question or set of questions. Question follow-ups use the same model as primary questions.

• Question footnotes

  Think of these as a footer, or "details" section for a question. It may include links to the CFR and other information that might be useful to the user, but not the type of information that the user needs to know before determining a response.

<div class="sba-c-question-container">
  <div class="sba-c-question" id="q1" aria-details="q1_footnote">
    <h3 class="sba-c-question__primary-text">Are you the highest paid owner at your firm?</h3>
    <div class="sba-c-question__support-text">
      <p>For example, you can be one of the following:</p>
      <ul>
        <li>An owner</li>
        <li>Something else</li>
      </ul>
    </div>
  </div>
  <div class="sba-c-response">
    <fieldset class="sba-c-fieldset">
      <legend class="sba-c-legend sba-u-visibility--screen-reader">Select your answer</legend>
      <ul class="sba-c-input-list">
        <li>
          <input id="q1_a1" type="radio" name="q1_answers" value="Yes" aria-describedby="q1">
          <label for="q1_a1">Yes</label>
        </li>
        <li>
          <input id="q1_a2" type="radio" name="q1_answers" value="No" aria-describedby="q1" data-follow-up="q1_a2_followup" aria-controls="q1_a2_followup" aria-expanded="false">
          <label for="q1_a2">No</label>
          <p class="sba-c-response__option-details">You will be asked some follow-up questions</p>
        </li>
      </ul>
    </fieldset>
    <div class="sba-c-follow-up" id="q1_a2_followup" hidden>
      <div class="sba-c-document-prompt">
        <p class="sba-c-document-prompt__header">Please add the following document(s):</p>
        <ul>
          <li><strong>Passport</strong></li>
        </ul>
        <button class="sba-c-button">
          <svg aria-hidden="true" class="sba-c-icon sba-u-margin-right--1">
            <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/certify-design-system-documentation/assets/svg-sprite/sprite.svg#file"></use>
          </svg>Add document(s)
        </button>
        <em>Optional</em>
      </div>
    </div>
  </div>
  <div class="sba-c-question-footnote" id="q1_footnote">
    <h4 class="sba-c-question-footnote__heading">More information</h4>
    <p>Examples of non-8(a) work include:</p>
    <ul>
      <li>Non-government/commercial contracts and subcontracts</li>
      <li>Government work outside of an 8(a) award</li>
      <li>Multiple award schedule contracts not offered through the 8(a) program</li>
    </ul>
  </div>
</div>

Accessibility

It is important to create a meaning relationships between each component of the questionnaire. This can be done in the following ways.

• If there is a footnote, reference its id with aria-details on the sba-c-question so that the primary text of the question and the supporting text reference the details.
• For each input in a sba-c-response, use aria-details to reference the id of it’s sba-c-question.
• Every fieldset must include a legend. If the legend does not need to appear visually, apply the class name of sba-u-visibility--screen-reader to hide it, but make available to screen readers.
• If a question has a follow-up that is triggered by a response, for example, selecting a specific radio button, include a reference to the follow-up's id with aria-controls and use aria-expanded to indicate whether or not the follow-up is visible.