UI Pattern Library for 14(c) Application

Note: The Pattern Library is best viewed in Chrome or Firefox.

Link

This is a link.
CODE SNIPPET: Link 

<a href="http://www.dol.gov">This is a link.</a>

Buttons

Button Colors:

Form Footer Buttons:

CODE SNIPPET: Buttons 

<!-- Button Color Examples -->
<button>Primary</button>
<button class="grey-button">Secondary</button>
<button class="green-button">Action</button>
<button class="red-button">Delete</button>

<!-- Form Footer Buttons -->
<div class="form-footer-controls">
  <div class="button-group">
    <button class="back-button">Back</button>
    <div class="pull-right">
      <button class="next-button">Next</button>
    </div>
  </div>
</div>

Help Callout

Need Help? Email us: help-14c@dol.gov
CODE SNIPPET: 

<div class="dol-help-callout">
  Need Help? Email us: <a href="mailto:help-14c@dol.gov">help-14c@dol.gov</a>
</div>

Form Subsection Heading

Application Type
[FORM FIELDS GO HERE]
CODE SNIPPET: Form Subsection Heading 

<fieldset class="dol-form-sub-section">
  <legend><h3>Application Type</h3></legend>
  <hr>
  [FORM FIELDS GO HERE]
</fieldset>
NOTES: Form Subsection Heading

Each form subsection should be enclosed in a <fieldset>. The <h3> heading is inside the <legend> of the fieldset.

Form Subsection Heading with Help Text

Application Contact Person
This should be a person who can best answer questions concerning information contained on this application.
[FORM FIELDS GO HERE]
CODE SNIPPET: Form Subsection Heading with Help Text 

<fieldset class="dol-form-sub-section">
  <legend class="hide">
    <span id="thisHeadingLabel">Application Contact Person</span>
  </legend>
  <div class="dol-legend-h3-help">
    <h3 aria-hidden="true">Application Contact Person</span></h3>
    <helplink aria-controls="thisHeadingHelp" aria-describedby="thisHeadingLabel"></helplink>
  </div>
  <helptext id="thisHeadingHelp">This should be a person who can best answer questions concerning information contained on this application.</helptext>
  <hr />
  [FORM FIELDS GO HERE]
</fieldset>
NOTES: Form Subsection Heading with Help Text

Each form subsection should be enclosed in a <fieldset>.

The <legend> <span id> value should match the <helplink aria-describedby> value. The <helplink aria-controls> value should match the <helptext id> value.

Further explanation of the complexity of this pattern:

  • The visual design dictates that the help link (?) icon should flow inline with the Heading text.
  • Screen reader accessibility dictates that the Heading text should be the <legend> for the fieldset. However, <legend> and <h3> are inherently block elements, therefore cannot flow inline with the help link.
  • Screen reader accessibility dictates that the help link may not be inside the <legend> tag, because if it is inside <legend>, the screen reader will add the words "Learn More" every time it reads the <h3> text (such as when identifying the group elements below). The words "Learn More" should be associated with the help link only, since the help link provides the action for learning more.
  • The solution is to have the <legend> be hidden from visual users (screen reader only), to preserve the semantics and accessiblity. A duplicated version of this text is shown to visual users, inline with the help link, to satisfy the visual design requirements. The visual text is hidden from screen readers with aria-hidden="true".

Main Form Question - Text Input

CODE SNIPPET: Main Form Question - Text Input 

<div class="dol-form-question-block">
<label for="thisInput" class="dol-form-question-text">Employer's Trade Name</label>
<span class="usa-input-error-message" role="alert" tabindex="0"></span>
<input id="thisInput" name="thisInput" type="text">
</div>
NOTES: Main Form Question - Text Input

The <label for> value should match the <input id> and <input name> values.

Main Form Question - Text Input with Help Text

Provide the full legal name of the employer. SWEPs should enter the identifying information for the school that is applying for the certificate.
CODE SNIPPET: Main Form Question - Text Input with Help Text 

<div class="dol-form-question-block">
<div class="dol-form-question-help">
  <label for="thisInput" class="dol-form-question-text" id="thisInputLabel">Legal Name of Employer</label>
  <helplink aria-controls="thisInputHelp" aria-describedby="thisInputLabel"></helplink>
</div>
<helptext id="thisInputHelp">[HELP TEXT GOES HERE]</helptext>
<span class="usa-input-error-message" role="alert" tabindex="0"></span>
<input id="thisInput" name="thisInput" type="text">
</div>
NOTES: Secondary Form Field - Text Input with Help Text

The <label id> value should match the <helplink aria-describedby> value. The <helplink aria-controls> value should match the <helptext id> value.

Secondary Form Field - Text Input

CODE SNIPPET: Secondary Form Field - Text Input 

<label for="thisInput">Name of Job or Contract</label>
<input id="thisInput" name="thisInput" type="text">
NOTES: Secondary Form Field - Text Input

The <label for> value should match the <input id> and <input name> values.

Secondary Form Field - Text Input with Help Text

For example, “Hand assembly of cardboard shipping boxes.”
CODE SNIPPET: Main Form Question - Text Input with Help Text 

<div class="dol-plain-label-help">
  <label for="thisInput" id="thisInputLabel">Brief Description of Job/Task</label>
  <helplink aria-controls="thisInputHelp" aria-describedby="thisInputLabel"></helplink>
</div>
<helptext id="thisInputHelp">[HELP TEXT GOES HERE]</helptext>
<span class="usa-input-error-message" role="alert" tabindex="0"></span>
<input id="thisInput" name="thisInput" type="text">
NOTES: Secondary Form Field - Text Input with Help Text

The <label id> value should match the <helplink aria-describedby> value. The <helplink aria-controls> value should match the <helptext id> value.

Main Form Question - Radio Buttons

Is Service Contract Act (SCA)-covered work performed at this establishment / work site?
CODE SNIPPET: Main Form Question - Radio Buttons 

<div class="dol-form-question-block" class="form-question-block">
  <fieldset class="usa-fieldset-inputs usa-sans">
    <legend class="dol-form-question-text">Is Service Contract Act (SCA)-covered work performed at this establishment / work site?</legend>
    <span class="usa-input-error-message" role="alert" tabindex="0"></span>
    <ul class="usa-unstyled-list">
      <li>
        <input id="thisInputYes" type="radio" name="thisInput">
        <label for="thisInputYes">Yes</label>
      </li>
      <li>
        <input id="thisInputNo" type="radio" name="thisInput">
        <label for="thisInputNo">No</label>
      </li>
    </ul>
  </fieldset>
</div>
NOTES: Main Form Question - Radio Buttons

The form question itself is the <legend> of the fieldset. Each radio <input> has an associated <label>.

Main Form Question - Radio Buttons with Single Help Text

Does the Employer have a Trade Name?
Provide the trade name of the employer, if applicable.
CODE SNIPPET: Main Form Question - Radio Buttons with Single Help Text 

<div class="dol-form-question-block">
  <fieldset class="usa-fieldset-inputs">
    <legend class="hide"><span id="thisInputLabel">Does the Employer have a Trade Name?</span></legend>
    <div class="dol-legend-help">
      <span class="dol-form-question-text" aria-hidden="true">Does the Employer have a Trade Name?</span>
      <helplink aria-controls="thisInputHelp" aria-describedby="thisInputLabel"></helplink>
    </div>
    <helptext id="thisInputHelp">Provide the trade name of the employer, if applicable.</helptext>
    <span class="usa-input-error-message" role="alert" tabindex="0"></span>
    <ul class="usa-unstyled-list">
      <li>
        <input id="thisInputYes" type="radio" name="thisInput">
        <label for="thisInputYes">Yes</label>
      </li>
      <li>
        <input id="thisInputNo" type="radio" name="thisInput">
        <label for="thisInputNo">No</label>
      </li>
    </ul>
  </fieldset>
</div>
NOTES: Main Form Question - Radio Buttons with Single Help Text

The form question itself is the <legend> of the fieldset. Each radio <input> has an associated <label>.

The <legend> <span id> value should match the <helplink aria-describedby> value. The <helplink aria-controls> value should match the <helptext id> value.

Further explanation of the complexity of this pattern:

  • The visual design dictates that the help link (?) icon should flow inline with the Form Question text.
  • Screen reader accessibility dictates that the Form Question text should be the <legend> for the fieldset. The <legend> is inherently a block element, therefore cannot flow inline with the help link.
  • Screen reader accessibility dictates that the help link may not be inside the <legend> tag, because if it is inside <legend>, the screen reader will add the words "Learn More" every time it reads the <legend> text (such as when identifying the group title for the radio buttons). The words "Learn More" should be associated with the help link only, since the help link provides the action for learning more.
  • The solution is to have the <legend> be hidden from visual users (screen reader only), to preserve the semantics and accessiblity. A duplicated version of this text is shown to visual users, inline with the help link, to satisfy the visual design requirements. The visual text is hidden from screen readers with aria-hidden="true".

Main Form Question - Radio Buttons with Individual Help Text

What type of establishment is this?
  • The primary location of the employer that files this application on behalf of all its associated work sites. (There can only be one main establishment.)
  • A branch establishment is a physically separate work site that is part of the same organization as the main establishment.
CODE SNIPPET: Main Form Question - Radio Buttons with Individual Help Text 

<div class="dol-form-question-block">
  <fieldset class="usa-fieldset-inputs usa-sans">
    <legend class="dol-form-question-text">What type of establishment is this?</legend>
    <span class="usa-input-error-message" role="alert" tabindex="0"></span>
      <ul class="usa-unstyled-list dol-list-help">
        <li ng-repeat="">
          <input id="thisInput" type="radio" name="thisInput" ng-value="" ng-model="">
          <label id="thisInputLabel" for="thisInput">[LABEL GOES HERE]</label>
          <helplink aria-controls="thisInputHelp" aria-describedby="thisInputLabel"></helplink>
          <helptext id="thisInputHelp">
              [HELP TEXT GOES HERE]
          </helptext>
        </li>
      </ul>
  </fieldset>
</div>
NOTES: Main Form Question - Radio Buttons with Individual Help Text

The form question itself is the <legend> of the fieldset. Each radio <input> has an associated <label>.

For each radio button, the <label id> value should match the <helplink aria-describedby> value. The <helplink aria-controls> value should match the <helptext id> value.

Secondary Form Field - Radio Buttons with Single Help Text

Does worker perform work for this employer at any other work site?
Answer “yes” if the employee also performed work at another work site included with this application. The worker should be listed at each work site where they performed subminimum wage work.
CODE SNIPPET: Secondary Form Field - Radio Buttons with Single Help Text 

  <div class="dol-form-question-block">
    <fieldset class="dol-legend-plain usa-fieldset-inputs usa-sans">
      <legend class="hide"><span id="thisInputLabel">Does worker perform work for this employer at any other work site?</span></legend>
      <div class="dol-legend-help">
        <span aria-hidden="true">Does worker perform work for this employer at any other work site?</span>
        <helplink aria-controls="thisInputHelp" aria-describedby="thisInputLabel"></helplink>
      </div>
      <helptext id="thisInputHelp">
          [HELP TEXT GOES HERE]
      </helptext>
      <div>
        <span class="usa-input-error-message" role="alert" tabindex="0"></span>
        <ul class="usa-unstyled-list">
          <li>
            <input id="thisInputYes" type="radio" name="thisInput" ng-value="true">
            <label for="thisInputYes">Yes</label>
          </li>
          <li>
            <input id="thisInputNo" type="radio" name="thisInput" ng-value="false">
            <label for="thisInputNo">No</label>
          </li>
        </ul>
      </div>
    </fieldset>
  </div>
NOTES: Secondary Form Field - Radio Buttons with Single Help Text

Use <fieldset class="dol-legend-plain"> for Secondary fieldsets.

The form question itself is the <legend> of the fieldset. Each radio <input> has an associated <label>.

The <legend> <span id> value should match the <helplink aria-describedby> value. The <helplink aria-controls> value should match the <helptext id> value.

Further explanation of the complexity of this pattern:

  • The visual design dictates that the help link (?) icon should flow inline with the Form Question text.
  • Screen reader accessibility dictates that the Form Question text should be the <legend> for the fieldset. The <legend> is inherently a block element, therefore cannot flow inline with the help link.
  • Screen reader accessibility dictates that the help link may not be inside the <legend> tag, because if it is inside <legend>, the screen reader will add the words "Learn More" every time it reads the <legend> text (such as when identifying the group title for the radio buttons). The words "Learn More" should be associated with the help link only, since the help link provides the action for learning more.
  • The solution is to have the <legend> be hidden from visual users (screen reader only), to preserve the semantics and accessiblity. A duplicated version of this text is shown to visual users, inline with the help link, to satisfy the visual design requirements. The visual text is hidden from screen readers with aria-hidden="true".

Main Form Question - Text Input with Example

Example: 12-34567-H-890
CODE SNIPPET: Main Form Question - Text Input with Example 

<div class="dol-form-question-block">
  <label for="thisInput" class="dol-form-question-text">What is the most recently held certificate number for the main establishment?</label>
  <span class="usa-input-error-message" role="alert" tabindex="0"></span>
  <input id="thisInput" name="thisInput" type="text" aria-describedby="thisInputExample" class="dol-side-example">
  <span id="thisInputExample" class="dol-example-text">Example: 12-34567-H-890</span>
</div>
NOTES: Main Form Question - Text Input with Example

The <input aria-describedby> value should match the example text <span id> value.

Main Form Question - Date Fieldset with Help Text

When did the Employer’s most recently completed fiscal quarter end?
Provide the ending date of the employer’s most recently completed three-month fiscal quarter. For example, if the fiscal year begins on January 1, provide the date of the most recently completed quarter (March 31, June 30, September 30, or December 31).
Example: 04 30 2016
CODE SNIPPET: Main Form Question - Date Fieldset with Help Text 

<div class="dol-form-question-block">
  <fieldset>
    <legend class="hide"><span id="thisInputLabel">When did the Employer’s most recently completed fiscal quarter end?</span></legend>
    <div class="dol-legend-help">
      <span class="dol-form-question-text" aria-hidden="true">When did the Employer’s most recently completed fiscal quarter end?</span>
      <helplink aria-controls="thisInputHelp" aria-describedby="thisInputLabel"></helplink>
    </div>
    <helptext id="thisInputHelp">[HELP TEXT GOES HERE]</helptext>
    <span class="usa-input-error-message" role="alert" tabindex="0"></span>
    <date-field date-val=""></date-field>
  </fieldset>
</div>
NOTES: Main Form Question - Date Fieldset with Help Text

The form question itself is the <legend> of the fieldset. Each radio <input> has an associated <label>.

The <legend> <span id> value should match the <helplink aria-describedby> value. The <helplink aria-controls> value should match the <helptext id> value.

Further explanation of the complexity of this pattern:

  • The visual design dictates that the help link (?) icon should flow inline with the Form Question text.
  • Screen reader accessibility dictates that the Form Question text should be the <legend> for the fieldset. The <legend> is inherently a block element, therefore cannot flow inline with the help link.
  • Screen reader accessibility dictates that the help link may not be inside the <legend> tag, because if it is inside <legend>, the screen reader will add the words "Learn More" every time it reads the <legend> text (such as when identifying the group title for the radio buttons). The words "Learn More" should be associated with the help link only, since the help link provides the action for learning more.
  • The solution is to have the <legend> be hidden from visual users (screen reader only), to preserve the semantics and accessiblity. A duplicated version of this text is shown to visual users, inline with the help link, to satisfy the visual design requirements. The visual text is hidden from screen readers with aria-hidden="true".

Secondary Form Field - Date Fieldset

Date of Contact
Example: 04 30 2016
CODE SNIPPET: Secondary Form Field - Date Fieldset 

<fieldset class="dol-legend-plain">
  <legend>Date of Contact</legend>
  <span class="usa-input-error-message" role="alert" tabindex="0"></span>
  <date-field date-val=""></date-field>
</fieldset>
NOTES: Secondary Form Field - Date Fieldset

Use <fieldset class="dol-legend-plain"> for Secondary fieldsets.

Address Fieldset

Address of Establishment / Work Site
CODE SNIPPET: Address Fieldset 

<div class="dol-form-question-block">
  <fieldset>
    <legend class="dol-form-question-text no-margin">Address of Establishment / Work Site</legend>
    <div class="usa-form-large">
      <div ng-class="">
        <label for="thisInputAddress1">Street address</label>
        <span class="usa-input-error-message" role="alert" tabindex="0"></span>
        <input id="thisInputAddress1" name="thisInputAddress1" type="text">
      </div>
      <div class="clearer" ng-class="">
        <div class="usa-input-grid usa-input-grid-medium">
          <label for="thisInputCity">City</label>
          <span class="usa-input-error-message" role="alert" tabindex="0"></span>
          <input id="thisInputCity" name="thisInputCity" type="text">
        </div>
        <div class="usa-input-grid usa-input-grid-small">
          <label for="thisInputState">State</label>
          <span class="usa-input-error-message" role="alert" tabindex="0"></span>
          <state-field name="thisInputState" selected-state=""></state-field>
        </div>
      </div>
      <div ng-class="">
        <label for="thisInputZip">Zip Code</label>
        <span class="usa-input-error-message" role="alert" tabindex="0"></span>
        <input class="usa-input-medium" id="thisInputZip" name="thisInputZip" type="text" mask="99999" pattern=""
          data-grouplength="5" data-delimiter="" data-politespace>
      </div>
    </div>
  </fieldset>
</div>
NOTES: Address Fieldset

Use <legend class="dol-form-question-text no-margin"> for proper styling.

The form question itself is the <legend> of the fieldset. Each <input> has an associated <label>.

File Upload

File types accepted: PDF

CODE SNIPPET: File Upload 

<div class="dol-form-question-block" ng-class="">
  <label for="thisFileUpload">Attach copies of all current SCA Wage Determinations for those contracts on which workers with disabilities are employed and earning subminimum wage.</label>
  <span class="usa-input-error-message" role="alert"></span>
  <attachment-field input-id="thisFileUpload" model-prefix="formDataModel" attachments="[]" />
</div>
NOTES: File Upload

The <label for> value should match the <attachment-field input-id> value.

Tabs

Please see /section/wage-data or /section/work-sites for working tab examples.

CODE SNIPPET: Tabs 

<div id="" class="form-tabbed-section" ng-show="">
  <a href class="form-tab active" ng-click="" aria-selected="true" ng-keyup="">
    <div class="circle">1</div> Tab 1 Name
  </a>
  <a href class="form-tab" ng-click="" aria-selected="false" ng-keyup="">
    <div class="circle">2</div> Tab 2 Name
  </a>
</div>
NOTES: Tabs

Angular code is required for the tabs to function. Please see /section/wage-data or /section/work-sites for working tab examples.

Review and Submit

Assurances

Looks good!
Review Assurances

Application Info

Needs Review
Review Application Info
CODE SNIPPET: Review and Submit 

<div class="section-results">
  <h3>Assurances</h3>
  <reviewbar errorstate=""></reviewbar>
  <div ng-hide="">
    <a href="" ng-click="">Review Assurances</a>
  </div>
  <button ng-click="" ng-show="">Edit Responses<span class="hide"> for Assurances</span></button>
</div>
NOTES: Review and Submit

Each "Edit Responses" button includes additional identifying text for screen readers only.