OMB M-23-22 requires federal agencies to use USWDS components — not just tokens — to create the consistent, trustworthy experience the public expects from .gov sites. Custom or third-party component libraries (Bootstrap, Material UI, shadcn) introduce component patterns that differ from the established federal design language, forcing citizens to re-learn interaction patterns when moving between agency sites. More critically, third-party components often fail USWDS accessibility validation: USWDS button, input, and alert components are built to Section 508 and WCAG 2.1 AA specifications that custom implementations routinely miss.
Low because using non-USWDS UI components violates OMB M-23-22's design system adoption requirement and frequently introduces accessibility regressions in buttons, form inputs, and alerts that USWDS components are specifically engineered to prevent, but the impact is incremental rather than blocking.
Replace custom UI elements with USWDS equivalents. Start with the highest-traffic components: buttons, form inputs, and alerts. Target at least 50% usa-* class coverage across all UI component files.
// Before: custom button
<button className="btn-primary">Apply Now</button>
// After: USWDS button
<button className="usa-button">Apply Now</button>
// Before: custom text input
<input className="form-field" type="text" />
// After: USWDS input
<input className="usa-input" type="text" />
For the navigation and footer — the most visible agency-identity components — adopt usa-nav and usa-footer directly. Reference the USWDS component library at designsystem.digital.gov for markup patterns, and run the USWDS Compliance Checker to measure usa-* class coverage.
ID: gov-web-standards.uswds-alignment.uswds-components
Severity: low
What to look for: Enumerate all UI component files in the codebase (buttons, forms, alerts, cards, navigation, headers, footers, modals). For each component file, check for usa-* CSS classes or imported USWDS React components. Count every usa- class usage found.
Pass criteria: At least 50% of UI components use USWDS elements or classes (e.g., usa-button for buttons, usa-input for form inputs, usa-alert for alerts). Navigation and footer use USWDS patterns.
Fail criteria: Fewer than 50% of UI components use USWDS elements; site relies on custom or third-party component libraries instead.
Skip (N/A) when: The project has an exemption from USWDS component adoption (some agencies maintain custom design systems).
Detail on fail: "USWDS is installed but no usa-* classes found in components. Buttons use custom styling instead of usa-button" or "Navigation uses a custom component instead of USWDS usa-nav"
Remediation: Replace custom UI components with USWDS equivalents. Example:
// Before: Custom button
<button className="my-button">Click Me</button>
// After: USWDS button
<button className="usa-button">Click Me</button>
Use USWDS components for:
usa-buttonusa-input, usa-select, usa-textareausa-alertusa-cardusa-navusa-footer