/Library/WebServer/Documents/lab/design-system/_site/shell/index.html heading|issue|element|id|class|line|column|description NOTICE|WCAG2AA.Principle2.Guideline2_4.2_4_2.H25.2|USAJOBS Design System || Shell|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|97|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.Principle2.Guideline2_4.2_4_4.H77,H78,H79,H80,H81|Skip to main content||usa-skipnav|97|7|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|||105|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|||105|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

|||106|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|109|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|115|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|115|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.

|||117|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.|||118|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|128|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|128|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.

|||130|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.|||131|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://|||133|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| USAJOBS Design System ||logo-link|144|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.Principle2.Guideline2_4.2_4_4.H77,H78,H79,H80,H81,H33| USAJOBS Design System ||logo-link|144|6|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| View on GitHub ||usa-button usa-button-outline|150|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.Principle2.Guideline2_4.2_4_4.H77,H78,H79,H80,H81| View on GitHub ||usa-button usa-button-outline|150|8|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|

Shell

|shell||163|14|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 outer container of the grid along with common page layouts.

||usa-font-lead|164|14|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|171|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.Principle2.Guideline2_4.2_4_4.H77,H78,H79,H80,H81|Design Complete||usa-label maturity design_complete|171|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|

1 main content well with 1 right rail

||usa-heading|178|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|

Navigation

|||185|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|

Main content well

|||190|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|

Content well continued Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

|||191|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|Content well continued|||192|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|

Right Rail

|||201|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|Right Rail list|||203|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|
  • A list
    • |||204|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|
  • of stuff
    • |||205|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|
  • over here
    • |||206|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|
  • in the right rail.
    • |||207|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|||usa-button-unstyled usa-accordion-button|216|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-unstyled usa-accordion-button|216|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|

    Implementation

    ||usa-heading|220|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|
  • The .usajobs-shell element is a container that acts as the shell of the page, locking the page content at 1600px/160rem wide. We are transitioning across products to a shell width of 1600px from 1200px wide.
    • |||222|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|.usajobs-shell|||222|18|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 page gutter size is 1.5rem/15px below the ML breakpoint (768px) and grows to 3rem(30px from that breakpoint on. Note however that it is set on the .usajobs-grid and not the .usajobs-shell class to make it easier to include full-bleed components.
    • |||223|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|.usajobs-grid|||223|165|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|.usajobs-shell|||222|18|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 .usajobs-grid should be used within the page shell and can be used to wrap content that is not in a component or page-specific layout.
    • |||224|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|.usajobs-grid|||223|165|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.

    |||235|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|||235|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|||235|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

    |||238|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

    |||238|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|||239|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|||239|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|||240|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|||240|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.

    |||242|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|||242|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|||242|66|Check that the link text combined with programmatically determined link context identifies the purpose of the link.