/Library/WebServer/Documents/lab/design-system/_site/button-bar/index.html heading|issue|element|id|class|line|column|description NOTICE|WCAG2AA.Principle2.Guideline2_4.2_4_2.H25.2|USAJOBS Design System || Button bar|18|1|Check that the title element describes the document. WARNING|WCAG2AA.Principle1.Guideline1_4.1_4_3.G18.BgImage|Skip to main content||usa-skipnav|95|3|This element's text is placed on a background image. Ensure the contrast ratio between the text and all covered parts of the image are at least 4.5:1. NOTICE|WCAG2AA.Principle2.Guideline2_4.2_4_4.H77,H78,H79,H80,H81|Skip to main content||usa-skipnav|95|3|Check that the link text combined with programmatically determined link context identifies the purpose of the link. NOTICE|WCAG2AA.Principle1.Guideline1_1.1_1_1.G94.Image|U.S. flag|||101|6|Ensure that the img element's alt text serves the same purpose and presents the same information as the image. NOTICE|WCAG2AA.Principle1.Guideline1_1.1_1_1.G73,G74|U.S. flag|||101|6|If this image cannot be fully described in a short text alternative, ensure a long text alternative is also available, such as in the body text or through a link. WARNING|WCAG2AA.Principle1.Guideline1_4.1_4_3.G18.BgImage|

An official website of the United States government

|||102|6|This element's text is placed on a background image. Ensure the contrast ratio between the text and all covered parts of the image are at least 4.5:1. NOTICE|WCAG2AA.Principle3.Guideline3_2.3_2_1.G107|||usa-accordion-button usa-banner-button|1|0|Check that a change of context does not occur when this input field receives focus. WARNING|WCAG2AA.Principle1.Guideline1_4.1_4_3.G18.BgImage|Here's how you know||usa-banner-button-text|105|8|This element's text is placed on a background image. Ensure the contrast ratio between the text and all covered parts of the image are at least 4.5:1. NOTICE|WCAG2AA.Principle1.Guideline1_1.1_1_1.G94.Image|Dot gov||usa-banner-icon usa-media_block-img|111|8|Ensure that the img element's alt text serves the same purpose and presents the same information as the image. NOTICE|WCAG2AA.Principle1.Guideline1_1.1_1_1.G73,G74|Dot gov||usa-banner-icon usa-media_block-img|111|8|If this image cannot be fully described in a short text alternative, ensure a long text alternative is also available, such as in the body text or through a link. WARNING|WCAG2AA.Principle1.Guideline1_4.1_4_3.G18.BgImage|

The .gov means it’s official.
Federal government websites often end in .gov or .mil. Before sharing sensitive information, make sure you’re on a federal government site.

There are some exceptions to this rule. During the USAJOBS application process, you may be sent to an agency specific application system that DOES NOT contain a .mil or .gov. Rest assured, if you apply to any job through USAJOBS.gov your information is safe and secure.

|||113|10|This element's text is placed on a background image. Ensure the contrast ratio between the text and all covered parts of the image are at least 4.5:1. WARNING|WCAG2AA.Principle1.Guideline1_4.1_4_3.G18.BgImage|The .gov means it’s official.|||114|12|This element's text is placed on a background image. Ensure the contrast ratio between the text and all covered parts of the image are at least 4.5:1. NOTICE|WCAG2AA.Principle1.Guideline1_1.1_1_1.G94.Image|SSL||usa-banner-icon usa-media_block-img|124|8|Ensure that the img element's alt text serves the same purpose and presents the same information as the image. NOTICE|WCAG2AA.Principle1.Guideline1_1.1_1_1.G73,G74|SSL||usa-banner-icon usa-media_block-img|124|8|If this image cannot be fully described in a short text alternative, ensure a long text alternative is also available, such as in the body text or through a link. WARNING|WCAG2AA.Principle1.Guideline1_4.1_4_3.G18.BgImage|

The site is secure.
The https:// ensures that you are connecting to the official website and that any information you provide is encrypted and transmitted securely.

|||126|10|This element's text is placed on a background image. Ensure the contrast ratio between the text and all covered parts of the image are at least 4.5:1. WARNING|WCAG2AA.Principle1.Guideline1_4.1_4_3.G18.BgImage|The site is secure.|||127|12|This element's text is placed on a background image. Ensure the contrast ratio between the text and all covered parts of the image are at least 4.5:1. WARNING|WCAG2AA.Principle1.Guideline1_4.1_4_3.G18.BgImage|https://|||129|16|This element's text is placed on a background image. Ensure the contrast ratio between the text and all covered parts of the image are at least 4.5:1. WARNING|WCAG2AA.Principle1.Guideline1_4.1_4_3.G18.BgImage| Design System ||usajobs-documentation-header__dslink|1|0|This element's text is placed on a background image. Ensure the contrast ratio between the text and all covered parts of the image are at least 4.5:1. NOTICE|WCAG2AA.Principle2.Guideline2_4.2_4_4.H77,H78,H79,H80,H81,H33| Design System ||usajobs-documentation-header__dslink|1|0|Check that the link text combined with programmatically determined link context, or its title attribute, identifies the purpose of the link. WARNING|WCAG2AA.Principle1.Guideline1_4.1_4_3.G18.BgImage|||usa-menu-btn|207|4|This element's text is placed on a background image. Ensure the contrast ratio between the text and all covered parts of the image are at least 4.5:1. NOTICE|WCAG2AA.Principle3.Guideline3_2.3_2_1.G107|||usa-menu-btn|207|4|Check that a change of context does not occur when this input field receives focus. NOTICE|WCAG2AA.Principle3.Guideline3_2.3_2_1.G107|||usa-nav-close|212|6|Check that a change of context does not occur when this input field receives focus. NOTICE|WCAG2AA.Principle3.Guideline3_2.3_2_1.G107|||usa-accordion-button usa-nav-link|217|10|Check that a change of context does not occur when this input field receives focus. WARNING|WCAG2AA.Principle1.Guideline1_4.1_4_3.G18.BgImage|Base elements|||218|12|This element's text is placed on a background image. Ensure the contrast ratio between the text and all covered parts of the image are at least 4.5:1. NOTICE|WCAG2AA.Principle3.Guideline3_2.3_2_1.G107|||usa-accordion-button usa-nav-link|273|10|Check that a change of context does not occur when this input field receives focus. WARNING|WCAG2AA.Principle1.Guideline1_4.1_4_3.G18.BgImage|Components|||274|12|This element's text is placed on a background image. Ensure the contrast ratio between the text and all covered parts of the image are at least 4.5:1. NOTICE|WCAG2AA.Principle3.Guideline3_2.3_2_1.G107|||usa-accordion-button usa-nav-link|360|10|Check that a change of context does not occur when this input field receives focus. WARNING|WCAG2AA.Principle1.Guideline1_4.1_4_3.G18.BgImage|Layouts|||361|12|This element's text is placed on a background image. Ensure the contrast ratio between the text and all covered parts of the image are at least 4.5:1. WARNING|WCAG2AA.Principle1.Guideline1_4.1_4_3.G18.BgImage| GitHub |||442|12|This element's text is placed on a background image. Ensure the contrast ratio between the text and all covered parts of the image are at least 4.5:1. NOTICE|WCAG2AA.Principle2.Guideline2_4.2_4_4.H77,H78,H79,H80,H81| GitHub |||442|12|Check that the link text combined with programmatically determined link context identifies the purpose of the link. WARNING|WCAG2AA.Principle1.Guideline1_4.1_4_3.G18.BgImage|usajobs.gov|||447|12|This element's text is placed on a background image. Ensure the contrast ratio between the text and all covered parts of the image are at least 4.5:1. NOTICE|WCAG2AA.Principle2.Guideline2_4.2_4_4.H77,H78,H79,H80,H81|usajobs.gov|||447|12|Check that the link text combined with programmatically determined link context identifies the purpose of the link. WARNING|WCAG2AA.Principle1.Guideline1_4.1_4_3.G18.BgImage|

component

||site-subheading|458|8|This element's text is placed on a background image. Ensure the contrast ratio between the text and all covered parts of the image are at least 4.5:1. WARNING|WCAG2AA.Principle1.Guideline1_4.1_4_3.G18.BgImage|

Button bar

|button-bar||459|8|This element's text is placed on a background image. Ensure the contrast ratio between the text and all covered parts of the image are at least 4.5:1. WARNING|WCAG2AA.Principle1.Guideline1_4.1_4_3.G18.BgImage|

A container for buttons, links, and calls-to-action.

||usa-font-lead|460|8|This element's text is placed on a background image. Ensure the contrast ratio between the text and all covered parts of the image are at least 4.5:1. WARNING|WCAG2AA.Principle1.Guideline1_4.1_4_3.G18.BgImage| Design Complete ||usa-label maturity design_complete|461|11|This element's text is placed on a background image. Ensure the contrast ratio between the text and all covered parts of the image are at least 4.5:1. NOTICE|WCAG2AA.Principle2.Guideline2_4.2_4_4.H77,H78,H79,H80,H81| Design Complete ||usa-label maturity design_complete|461|11|Check that the link text combined with programmatically determined link context identifies the purpose of the link. WARNING|WCAG2AA.Principle1.Guideline1_3.1_3_1_A.G141|
Default
||usa-heading-alt|466|2|The heading structure is not logically nested. This h6 element should be an h2 to be properly nested. WARNING|WCAG2AA.Principle1.Guideline1_4.1_4_3.G18.BgImage|
Default
||usa-heading-alt|466|2|This element's text is placed on a background image. Ensure the contrast ratio between the text and all covered parts of the image are at least 4.5:1. WARNING|WCAG2AA.Principle1.Guideline1_4.1_4_3.G18.BgImage||save_and_continue|usa-button usajobs-button_bar__save|469|7|This element's text is placed on a background image. Ensure the contrast ratio between the text and all covered parts of the image are at least 4.5:1. NOTICE|WCAG2AA.Principle3.Guideline3_2.3_2_1.G107||save_and_continue|usa-button usajobs-button_bar__save|469|7|Check that a change of context does not occur when this input field receives focus. WARNING|WCAG2AA.Principle1.Guideline1_4.1_4_3.G18.BgImage||previous|usa-button usa-button-gray|472|6|This element's text is placed on a background image. Ensure the contrast ratio between the text and all covered parts of the image are at least 4.5:1. NOTICE|WCAG2AA.Principle3.Guideline3_2.3_2_1.G107||previous|usa-button usa-button-gray|472|6|Check that a change of context does not occur when this input field receives focus. WARNING|WCAG2AA.Principle1.Guideline1_4.1_4_3.G18.BgImage|
Slim
||usa-heading-alt|478|2|This element's text is placed on a background image. Ensure the contrast ratio between the text and all covered parts of the image are at least 4.5:1. WARNING|WCAG2AA.Principle1.Guideline1_4.1_4_3.G18.BgImage| Save ||usa-button-big usa-button-primary usajobs-button_bar__save|481|6|This element's text is placed on a background image. Ensure the contrast ratio between the text and all covered parts of the image are at least 4.5:1. ERROR|WCAG2AA.Principle2.Guideline2_4.2_4_1.G1,G123,G124.NoSuchID| Save ||usa-button-big usa-button-primary usajobs-button_bar__save|481|6|This link points to a named anchor "success" within the document, but no anchor exists with that name. NOTICE|WCAG2AA.Principle2.Guideline2_4.2_4_4.H77,H78,H79,H80,H81| Save ||usa-button-big usa-button-primary usajobs-button_bar__save|481|6|Check that the link text combined with programmatically determined link context identifies the purpose of the link. WARNING|WCAG2AA.Principle1.Guideline1_4.1_4_3.G18.BgImage|
Slim, left aligned
||usa-heading-alt|487|2|This element's text is placed on a background image. Ensure the contrast ratio between the text and all covered parts of the image are at least 4.5:1. WARNING|WCAG2AA.Principle1.Guideline1_4.1_4_3.G18.BgImage| Save ||usa-button-big usa-button-primary usajobs-button_bar__save|481|6|This element's text is placed on a background image. Ensure the contrast ratio between the text and all covered parts of the image are at least 4.5:1. ERROR|WCAG2AA.Principle2.Guideline2_4.2_4_1.G1,G123,G124.NoSuchID| Save ||usa-button-big usa-button-primary usajobs-button_bar__save|481|6|This link points to a named anchor "success" within the document, but no anchor exists with that name. NOTICE|WCAG2AA.Principle2.Guideline2_4.2_4_4.H77,H78,H79,H80,H81| Save ||usa-button-big usa-button-primary usajobs-button_bar__save|481|6|Check that the link text combined with programmatically determined link context identifies the purpose of the link. WARNING|WCAG2AA.Principle1.Guideline1_4.1_4_3.G18.BgImage|
Split
||usa-heading-alt|496|2|This element's text is placed on a background image. Ensure the contrast ratio between the text and all covered parts of the image are at least 4.5:1. WARNING|WCAG2AA.Principle1.Guideline1_4.1_4_3.G18.BgImage| Cancel and return to Profile ||usa-button usa-button-secondary|499|6|This element's text is placed on a background image. Ensure the contrast ratio between the text and all covered parts of the image are at least 4.5:1. ERROR|WCAG2AA.Principle2.Guideline2_4.2_4_1.G1,G123,G124.NoSuchID| Cancel and return to Profile ||usa-button usa-button-secondary|499|6|This link points to a named anchor "profile" within the document, but no anchor exists with that name. NOTICE|WCAG2AA.Principle2.Guideline2_4.2_4_4.H77,H78,H79,H80,H81| Cancel and return to Profile ||usa-button usa-button-secondary|499|6|Check that the link text combined with programmatically determined link context identifies the purpose of the link. WARNING|WCAG2AA.Principle1.Guideline1_4.1_4_3.G18.BgImage|||usa-button usajobs-button-bar__save|502|6|This element's text is placed on a background image. Ensure the contrast ratio between the text and all covered parts of the image are at least 4.5:1. NOTICE|WCAG2AA.Principle3.Guideline3_2.3_2_1.G107|||usa-button usajobs-button-bar__save|502|6|Check that a change of context does not occur when this input field receives focus. WARNING|WCAG2AA.Principle1.Guideline1_4.1_4_3.G18.BgImage|||usa-button-unstyled usa-accordion-button|508|2|This element's text is placed on a background image. Ensure the contrast ratio between the text and all covered parts of the image are at least 4.5:1. NOTICE|WCAG2AA.Principle3.Guideline3_2.3_2_1.G107|||usa-button-unstyled usa-accordion-button|508|2|Check that a change of context does not occur when this input field receives focus. WARNING|WCAG2AA.Principle1.Guideline1_4.1_4_3.G18.BgImage|

Usability

||usa-heading|512|4|This element's text is placed on a background image. Ensure the contrast ratio between the text and all covered parts of the image are at least 4.5:1. WARNING|WCAG2AA.Principle1.Guideline1_4.1_4_3.G18.BgImage|
When to use
|||513|4|This element's text is placed on a background image. Ensure the contrast ratio between the text and all covered parts of the image are at least 4.5:1. WARNING|WCAG2AA.Principle1.Guideline1_4.1_4_3.G18.BgImage|
  • Use at the bottom of forms to demarcate the end of the form and highlight the call to action (save, update, next, etc.).
  • |||515|6|This element's text is placed on a background image. Ensure the contrast ratio between the text and all covered parts of the image are at least 4.5:1. WARNING|WCAG2AA.Principle1.Guideline1_4.1_4_3.G18.BgImage|
  • Use the default variation to associate two buttons together (previous/next, save/cancel, etc.).
  • |||518|6|This element's text is placed on a background image. Ensure the contrast ratio between the text and all covered parts of the image are at least 4.5:1. WARNING|WCAG2AA.Principle1.Guideline1_4.1_4_3.G18.BgImage|
  • Use the slim variation when there is only one button.
  • |||521|6|This element's text is placed on a background image. Ensure the contrast ratio between the text and all covered parts of the image are at least 4.5:1. WARNING|WCAG2AA.Principle1.Guideline1_4.1_4_3.G18.BgImage|
  • Use the slim, left-aligned variation in edge cases when there is only one button and content is weighted towards the left. The button bar doesn't always adhere to the input max-width and thus can float far to the right, potentially creating issues for users pointing to the right-aligned button (See Fitts's Law).

    Do not use this variation if using the other button-bar variations within a flow. Using this variation is allowed at the start or end of a flow, however don't switch variations mid-stream.

  • |||524|6|This element's text is placed on a background image. Ensure the contrast ratio between the text and all covered parts of the image are at least 4.5:1. WARNING|WCAG2AA.Principle1.Guideline1_4.1_4_3.G18.BgImage|Fitts's Law|||525|308|This element's text is placed on a background image. Ensure the contrast ratio between the text and all covered parts of the image are at least 4.5:1. NOTICE|WCAG2AA.Principle2.Guideline2_4.2_4_4.H77,H78,H79,H80,H81,H33|Fitts's Law|||525|308|Check that the link text combined with programmatically determined link context, or its title attribute, identifies the purpose of the link. WARNING|WCAG2AA.Principle1.Guideline1_4.1_4_3.G18.BgImage|

    Do not use this variation if using the other button-bar variations within a flow. Using this variation is allowed at the start or end of a flow, however don't switch variations mid-stream.

    |||526|8|This element's text is placed on a background image. Ensure the contrast ratio between the text and all covered parts of the image are at least 4.5:1. WARNING|WCAG2AA.Principle1.Guideline1_4.1_4_3.G18.BgImage|

    Feedback? Create an issue on the GitHub repository.

    |||537|4|This element's text is placed on a background image. Ensure the contrast ratio between the text and all covered parts of the image are at least 4.5:1. WARNING|WCAG2AA.Principle1.Guideline1_4.1_4_3.G18.BgImage|GitHub repository|||537|40|This element's text is placed on a background image. Ensure the contrast ratio between the text and all covered parts of the image are at least 4.5:1. NOTICE|WCAG2AA.Principle2.Guideline2_4.2_4_4.H77,H78,H79,H80,H81|GitHub repository|||537|40|Check that the link text combined with programmatically determined link context identifies the purpose of the link. WARNING|WCAG2AA.Principle1.Guideline1_4.1_4_3.G18.BgImage|

    This project is maintained by USAJOBS. The source code is available at github.com/USAJOBS/design-system

    |||540|4|This element's text is placed on a background image. Ensure the contrast ratio between the text and all covered parts of the image are at least 4.5:1. WARNING|WCAG2AA.Principle1.Guideline1_3.1_3_1.H48|

    This project is maintained by USAJOBS. The source code is available at github.com/USAJOBS/design-system

    |||540|4|If this element contains a navigation section, it is recommended that it be marked up as a list. WARNING|WCAG2AA.Principle1.Guideline1_4.1_4_3.G18.BgImage|USAJOBS|||541|36|This element's text is placed on a background image. Ensure the contrast ratio between the text and all covered parts of the image are at least 4.5:1. NOTICE|WCAG2AA.Principle2.Guideline2_4.2_4_4.H77,H78,H79,H80,H81|USAJOBS|||541|36|Check that the link text combined with programmatically determined link context identifies the purpose of the link. WARNING|WCAG2AA.Principle1.Guideline1_4.1_4_3.G18.BgImage|github.com/USAJOBS/design-system|||542|38|This element's text is placed on a background image. Ensure the contrast ratio between the text and all covered parts of the image are at least 4.5:1. NOTICE|WCAG2AA.Principle2.Guideline2_4.2_4_4.H77,H78,H79,H80,H81|github.com/USAJOBS/design-system|||542|38|Check that the link text combined with programmatically determined link context identifies the purpose of the link. WARNING|WCAG2AA.Principle1.Guideline1_4.1_4_3.G18.BgImage|

    As a work of the United States Government, this project is in the public domain within the United States.

    |||544|4|This element's text is placed on a background image. Ensure the contrast ratio between the text and all covered parts of the image are at least 4.5:1. WARNING|WCAG2AA.Principle1.Guideline1_4.1_4_3.G18.BgImage|in the public domain|||544|66|This element's text is placed on a background image. Ensure the contrast ratio between the text and all covered parts of the image are at least 4.5:1. NOTICE|WCAG2AA.Principle2.Guideline2_4.2_4_4.H77,H78,H79,H80,H81|in the public domain|||544|66|Check that the link text combined with programmatically determined link context identifies the purpose of the link.