Accessible Design Using the U.S. Web Design System (USWDS)

<!DOCTYPE html> <html lang="en"> <head>  <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="robots" content="index, follow">  <meta name="HandheldFriendly" content="True"> <meta name="MobileOptimized" content="320"> <meta name="viewport" content="width=device-width, initial-scale=1.0">  <title>Accessible Design Using the U.S. Web Design System (USWDS) | Section508.gov</title> <meta property="og:title" content="Section508.gov"> <meta name="description" content="Information about the Section508.gov website, GSA鈥檚 Government-wide IT Accessibility Team, and guidance to Federal agencies on accessible information and communication technology (ICT)."> <meta property="og:description" content="Information about the Section508.gov website, GSA鈥檚 Government-wide IT Accessibility Team, and guidance to Federal agencies on accessible information and communication technology (ICT)."> <meta property="og:image" content="https://assets.section508.gov/files/images/social-media-og-image.jpg"> <meta name="twitter:image" content="https://assets.section508.gov/files/images/social-media-og-image.jpg" />  <meta name="twitter:card" content="summary" /> <meta name="twitter:site" content="@" /> <meta name="twitter:title" content="Section508.gov" /> <meta name="twitter:description" content="Information about the Section508.gov website, GSA鈥檚 Government-wide IT Accessibility Team, and guidance to Federal agencies on accessible information and communication technology (ICT)." /> <meta property="og:type" content="article"> <link rel="canonical" href="https://www.section508.gov/develop/accessible-design-using-uswds/" /> <meta property="og:url" content="https://www.section508.gov/develop/accessible-design-using-uswds/" />   <link rel="shortcut icon" type="image/ico" href="/assets/images/favicon.ico" /> <link rel="icon" type="image/png" href="/assets/images/favicon.ico" /> <link rel="icon" type="image/png" sizes="192x192" href="/assets/images/android-chrome-192x192.png" /> <link rel="apple-touch-icon" sizes="180x180" href="/assets/images/apple-touch-icon.png" /> <link rel="icon" type="image/png" sizes="32x32" href="/assets/images/favicon-32x32.png" /> <link rel="icon" type="image/png" sizes="16x16" href="/assets/images/favicon-16x16.png" /> <link rel="manifest" href="/assets/images/site.webmanifest" />  <link rel="stylesheet" type="text/css" href="/assets/css/index.css?1732224641581990839"> <script src="https://code.jquery.com/jquery-3.6.0.js" integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin="anonymous"></script> <script src="/assets/js/uswds-init.min.js?1732224641581990839"></script>  <meta name="topic" content="Development (dev)"> <meta name="sub-topic" content="Websites"> <meta name="audience" content="Developers and Testers (dev-test), Designer (design), Content Creators (creator)"> <meta name="resource-type" content="Blog article (blog)"> <meta name="format" content="HTML (html)"> </head> <body> <section aria-label="Official Government Site Banner" class="page-landing-page layout-demo "> <a class="usa-skipnav" href="#main-content">Skip to secondary navigation</a> <a class="usa-skipnav" href="#content-section">Skip to main content</a> <div class="usa-banner" aria-label="Official website of the United States government" > <div class="usa-accordion"> <header class="usa-banner__header"> <div class="usa-banner__inner"> <div class="grid-col-auto"> <img aria-hidden="true" class="usa-banner__header-flag" src="/assets/img/us_flag_small.png" alt="U.S. flag" /> </div> <div class="grid-col-fill tablet:grid-col-auto" aria-hidden="true"> <p class="usa-banner__header-text"> An official website of the United States government </p> <p class="usa-banner__header-action">Here鈥檚 how you know</p> </div> <button type="button" class="usa-accordion__button usa-banner__button" aria-expanded="false" aria-controls="gov-banner-default" > <span class="usa-banner__button-text">Here鈥檚 how you know</span> </button> </div> </header> <div class="usa-banner__content usa-accordion__content" id="gov-banner-default" hidden="" > <div class="grid-row grid-gap-lg"> <div class="usa-banner__guidance tablet:grid-col-6"> <img class="usa-banner__icon usa-media-block__img" src="/assets/img/icon-dot-gov.svg" role="img" alt="Dot gov" aria-hidden="true" /> <div class="usa-media-block__body"> <p> <strong>Official websites use .gov</strong><br />A <strong>.gov</strong> website belongs to an official government organization in the United States. </p> </div> </div> <div class="usa-banner__guidance tablet:grid-col-6"> <img class="usa-banner__icon usa-media-block__img" src="/assets/img/icon-https.svg" role="img" alt="Https" aria-hidden="true" /> <div class="usa-media-block__body"> <p> <strong>Secure .gov websites use HTTPS</strong><br />A <strong>lock</strong> ( <span class="icon-lock" ><svg xmlns="http://www.w3.org/2000/svg" width="52" height="64" viewBox="0 0 52 64" class="usa-banner__lock-image" role="img" aria-labelledby="banner-lock-description-default" focusable="false" > <title id="banner-lock-title-default">Lock</title> <desc id="banner-lock-description-default">Locked padlock icon</desc> <path fill="#000000" fill-rule="evenodd" d="M26 0c10.493 0 19 8.507 19 19v9h3a4 4 0 0 1 4 4v28a4 4 0 0 1-4 4H4a4 4 0 0 1-4-4V32a4 4 0 0 1 4-4h3v-9C7 8.507 15.507 0 26 0zm0 8c-5.979 0-10.843 4.77-10.996 10.712L15 19v9h22v-9c0-6.075-4.925-11-11-11z" /> </svg> </span >) or <strong>https://</strong> means you鈥檝e safely connected to the .gov website. Share sensitive information only on official, secure websites. </p> </div> </div> </div> </div> </div> </div> <button id="backtotop" title="Go to top" style="display: none">藙 Top</button> <div class="usa-overlay"></div> </section> <header class="usa-header usa-header--extended" role="banner"> <div class="usa-navbar"> <div class="usa-logo" id="extended-logo"> <span><a href="/" onclick="return navigate(this)"> <img src="/assets/images/508-logo-cropped-web-altgreen.png" alt="Section508.gov Home; GSA logo with text: Section508.gov Buy. Build. Be Accessible." class="logo" /> </a></span> </div> <button class="usa-menu-btn">Menu</button> </div> <nav id="site-nav" role="navigation" class="usa-nav" aria-label="Primary Site Navigation"> <div class="usa-nav__inner"> <button class="usa-nav__close"><img alt="close" src="/assets/img/close.svg"></button> <ul class="usa-nav__primary usa-accordion"> <li class="usa-nav__primary-item"> <a aria-label="Policy & Management primary navigation" class="usa-nav__link" onclick="return navigate(this)" href="/manage/"><span>Policy & Management</span></a> </li> <li class="usa-nav__primary-item"> <a aria-label="Acquisition primary navigation" class="usa-nav__link" onclick="return navigate(this)" href="/buy-sell/"><span>Acquisition</span></a> </li> <li class="usa-nav__primary-item"> <a aria-label="Content Creation primary navigation" class="usa-nav__link" onclick="return navigate(this)" href="/create/"><span>Content Creation</span></a> </li> <li class="usa-nav__primary-item"> <a aria-label="Design & Develop primary navigation" class="usa-nav__link usa-current" onclick="return navigate(this)" href="/develop/"><span>Design & Develop</span></a> </li> <li class="usa-nav__primary-item"> <a aria-label="Testing primary navigation" class="usa-nav__link" onclick="return navigate(this)" href="/test/"><span>Testing</span></a> </li> <li class="usa-nav__primary-item"> <a aria-label="Training, Tools & Events primary navigation" class="usa-nav__link" onclick="return navigate(this)" href="/training/"><span>Training, Tools & Events</span></a> </li> </ul> <div class="usa-nav__secondary"> <ul class="usa-nav__secondary-links"> <li class="usa-nav__secondary-item"> <a href="/blog/" class="external-link" onclick="return navigate(this)">Blogs & Updates</a> </li> <li class="usa-nav__secondary-item"> <a href="/tools/program-manager-listing/" class="external-link" onclick="return navigate(this)">My Agency鈥檚 508 PM</a> </li> <li class="usa-nav__secondary-item"> <a href="/content/about-us/" class="external-link" onclick="return navigate(this)">About Us</a> </li> </ul> <form id="search_form" class="usa-search usa-search--small" action="https://search.usa.gov/search" accept-charset="UTF-8" method="get"> <input name="utf8" type="hidden" value="✓" /> <input name="affiliate" type="hidden" value="gsa-section508-accessibility" /> <div role="search"> <label class="usa-sr-only" for="extended-search-field-small">Search</label> <input class="usa-input usagov-search-autocomplete" id="extended-search-field-small" type="search" name="query" autocomplete="off"> <button class="usa-button primary-background-color" type="submit"><img src="/assets/img/usa-icons-bg/search--white.svg" class="usa-search__submit-icon" alt="Search" /></button> </div> </form> </div> </div> </nav> </header> <section aria-label="Page Banner" class="usa-graphic-list usa-section sml-margin bg-gradient landing-page-banner"> <div class="grid-container"> <div class="grid-row grid-gap"> <div class="tablet: grid-col"> <span class="banner-title-color font-sans-lg margin-bottom-0"> Design & Develop </span> <br /> <h1 class="text-white font-sans-xl margin-top-0 margin-bottom-0"> Accessible Design Using the U.S. Web Design System (USWDS) </h1> </div> </div> </div> </section> <div id="main-content" class="usa-layout-docs usa-section"> <div class="grid-container"> <div class="grid-row grid-gap"> <aside class="usa-layout-docs__sidenav desktop:grid-col-3 padding-bottom-4"> <nav id="sec-nav" aria-label="Secondary Navigation"> <ul class="usa-sidenav menu"><li class="usa-sidenav__item"> <a href="/develop/" >Design & Develop</a> </li><li class="usa-sidenav__item list "> <a href="javascript:void(0);" class="header-menu-text" aria-label="Design - Submenu" aria-expanded="false">Design</a> <ul class="usa-sidenav__sublist items"><li class="usa-sidenav__item "> <a href="/develop/universal-design/">Universal Design</a> </li><li class="usa-sidenav__item "> <a href="/develop/universal-design-video-series/">Video Training</a> </li><li class="usa-sidenav__item "> <a href="/develop/fonts-typography/">Accessible Fonts and Typography</a> </li><li class="usa-sidenav__item active usa-current "> <a href="/develop/accessible-design-using-uswds/">Accessible Design Using the USWDS</a> </li><li class="usa-sidenav__item "> <a href="/design/digital-content-users-with-cognitive-disabilities/">Designing Digital Content For Users With Cognitive Disabilities</a> </li></ul> </li><li class="usa-sidenav__item list "> <a href="javascript:void(0);" class="header-menu-text" aria-label="Develop - Submenu" aria-expanded="false">Develop</a> <ul class="usa-sidenav__sublist items"><li class="usa-sidenav__item "> <a href="/develop/software-websites/">Develop Software and Websites</a> </li><li class="usa-sidenav__item "> <a href="/develop/applicability-conformance/">Applicability and Conformance Requirements for Developers</a> </li><li class="usa-sidenav__item list "> <a href="javascript:void(0);" aria-label="Web Content - Submenu" aria-expanded="false">Web Content</a> <ul class="usa-sidenav__sublist items"><li class="usa-sidenav__item "> <a href="/develop/web-content/">Developing Accessible Web Content</a> </li><li class="usa-sidenav__item "> <a href="/develop/publish-to-web/">Publishing to the Web</a> </li></ul> </li><li class="usa-sidenav__item "> <a href="/develop/incorporating-accessibility-conformance/">Incorporating Accessibility Conformance Validation within Development</a> </li><li class="usa-sidenav__item "> <a href="/develop/avoid-bias-in-emerging-technologies/">How to Avoid Bias in Emerging Technologies</a> </li></ul> </li></ul> </nav> </aside> <main class="usa-layout-docs__main desktop:grid-col-9" id="content-section"> <div class="usa-graphic-list"> <p>The U.S. Web Design System (USWDS) is a toolkit of principles, guidance, and code that makes it easier to build accessible, mobile-friendly government websites. USWDS uses human-centered design to support human-centered design teams.</p> <p>There are many ways to build a website or service. The design team created USWDS to deliver unique benefits to government teams. Below are several benefits of using USWDS to help create your content.</p> <h2 id="benefits-of-the-uswds">Benefits of the USWDS</h2> <h3 id="universal-design-compliance-from-the-start">Universal Design: Compliance from the start</h3> <p>The <a href="https://digital.gov/resources/checklist-of-requirements-for-federal-digital-services/">requirements for federal websites and digital services</a> can seem confusing. That鈥檚 where the U.S. Web Design System can help. USWDS principles, guidance, and code meet these requirements from the start. It includes accessible, mobile-friendly components out of the box. The <a href="https://designsystem.digital.gov/">USWDS site</a> provides tools and solutions that make compliance simpler.</p> <p>The design system is built by government, for government, with government in mind. The system focuses on what government teams need to help them do their best work. The core characteristics of the system are accessibility and mobile-friendliness. The design team is always striving to stay up-to-date with the latest requirements and standards.</p> <h3 id="proven-design-solutions-users-expect">Proven design solutions users expect</h3> <p>Designers and developers don鈥檛 have to reinvent the wheel when it comes to buttons, forms, and other common elements when designing and building a site. USWDS can help users provide a more seamless experience.</p> <p>The design system helps users know what to expect when they visit federal websites. The system helps designers and developers provide consistent usability, accessibility, editorial style, and look-and-feel across their websites and digital services. This consistency delivers a more seamless, user-friendly experience (a key requirement of <a href="https://digital.gov/resources/21st-century-integrated-digital-experience-act/">21st Century Integrated Digital Experience Act (21st Century IDEA)</a> and also increases trust in government.</p> <h3 id="team-alignment-and-common-goals">Team alignment and common goals</h3> <p>Effective, high-performing teams typically have team agreements. You can strengthen your team鈥檚 agreement to common principles and human-centered design right from the start. The USWDS design principles are an important first step for any team agreement:</p> <ul> <li>Start with real user needs.</li> <li>Earn trust.</li> <li>Embrace accessibility.</li> <li>Promote continuity.</li> <li>Listen.</li> </ul> <p>You can use these principles to align teams across the federal government around common goals. They support and reflect requirements for federal websites and digital services, codified in the <a href="https://digital.gov/resources/21st-century-integrated-digital-experience-act/">21st Century IDEA</a>.</p> <h3 id="mission-focus">Mission focus</h3> <p><strong><em>Focus on your mission, not your markup.</em></strong> Designers and developers using USWDS will spend less time building from scratch and more time building solutions. The system speeds up the development process by adapting to your brand鈥檚 look-and-feel, editorial style guidelines, user needs, and overall digital strategy. This streamlined process gives teams more time to concentrate on higher-level goals.</p> <p><strong><em>Get off the redesign treadmill.</em></strong> When the design system improves, so does your project. By using the design system, your service benefits from the system鈥檚 continuous improvement. The system fixes bugs, improves accessibility, and reduces technical debt at scale. Each improvement to the design system improves all design system sites.</p> <h3 id="a-cross-functional-design-system-community">A cross-functional design system community</h3> <p>As more and more agencies adopt and adapt the design system, the community of content managers, designers, and developers who use it grows. The USWDS design team chats, asks questions, and shares solutions in a public Slack open to design system users (sign up to <a href="https://designsystem.digital.gov/about/community/">join the USWDS community</a> and also through <a href="https://github.com/uswds">the USWDS GitHub organization</a>. User contributions to the community, which can range from simple questions to new components, help colleagues with their own questions and implementations.</p> <h3 id="effective-stewardship-of-public-resources">Effective stewardship of public resources</h3> <p>USWDS exists to share service expertise across the federal government so all teams can benefit from any team鈥檚 improvements. When you build with USWDS, you benefit from the experience of teams and individuals from your agency and others. What you build helps improve the design system for the next teams that use it.</p> <p>This process helps get the most from the teams that use the design system. It builds the institutional memory available to new teams. It promotes user-centered, data-driven decision making and governance. It results in faster, more effective service delivery over time. Everything we as a community invest in the design system is shared, multiplied, and compounded to the greatest extent possible. USWDS uses the scale of the federal government to help individual teams perform at their peak.</p> <h2 id="key-uswds-concepts-and-tools">Key USWDS Concepts and Tools</h2> <p>USWDS includes over 40 accessible, mobile-friendly components out of the box, ensuring consistency and saving teams the need to build everything from scratch for their web-design and redesign projects.</p> <p>USWDS also provides tools and solutions, including a <a href="https://designsystem.digital.gov/design-tokens/color/overview/#color-and-accessibility">simple way to pick accessible colors</a> or a <a href="https://designsystem.digital.gov/components/identifier/">component that displays required links</a>, that make it easy to comply with legal requirements, such as the 21st Century Integrated Digital Experience Act and Section 508 of the Rehabilitation Act.</p> <p>Users don鈥檛 need to understand the following concepts and tools to install the design system, but you will need to know them to build with it:</p> <ul> <li><a href="https://designsystem.digital.gov/design-tokens/">Design tokens:</a> Design tokens are predefined units of color, spacing, typography, opacity, and more that form the building blocks of the design system.</li> <li><a href="https://designsystem.digital.gov/components/overview/">Components:</a> Components are simple and consistent solutions to common user interface needs, like form fields, buttons, and icons. If tokens are the building blocks of the design system, components are the building blocks of a site or service.</li> <li><a href="https://designsystem.digital.gov/utilities/">Utilities:</a> Utilities are single-purpose classes mapped to USWDS tokens. Utilities allow developers to prototype with design system utilities without writing Sass or CSS.</li> <li><a href="https://designsystem.digital.gov/documentation/implementations/">Implementations:</a> Implementations are how teams use USWDS in their projects, like in Drupal, as well as other platforms and frameworks. We鈥檒l link to projects and community supported implementations.</li> </ul> <p><strong>Note: The information above was derived from introductory materials on the USWDS site. Explore <a href="https://designsystem.digital.gov/">the USWDS site</a> for more information on how to get started and effectively employ this great design system.</strong></p> <p><strong>Reviewed/Updated:</strong> June 2024</p> </div> </main> </div> </div> </div> <footer class="usa-footer__primary-section"> <div class="grid-container"> <div class="grid-row grid-gap padding-bottom-4"> <div class="desktop:grid-col-4"> <p class="text-bold">Government-wide Initiatives</p> <ul class="add-list-reset line-height-sans-6"> <li> <a href="https://www.gsa.gov/technology/government-it-initiatives/digital-strategy" target="_blank" onclick="return navigate(this)">Digital Strategy</a></li> <li> <a href="https://www.plainlanguage.gov/" target="_blank" onclick="return navigate(this)">Plain Language </a></li> <li> <a href="https://designsystem.digital.gov/" target="_blank" onclick="return navigate(this)"> U.S. Web Design System </a></li> <li> <a href="https://www.cio.gov/about/members-and-leadership/accessibility-cop/" target="_blank" onclick="return navigate(this)"> CIO Council Accessibility Community of Practice (ACOP)</a></li> </ul> </div> <div class="desktop:grid-col-2"> <p class="text-bold">Organization</p> <ul class="add-list-reset line-height-sans-6"> <li> <a href="/about-us/" aria-label="About Us in Organization" onclick="return navigate(this)"> About Us</a></li> <li> <a aria-label="Contact Us details" href="/contact-us/" onclick="return navigate(this)"> Contact Us</a></li> <li><a href="/contributors/" aria-label="Section508.gov site Contributors" onclick="return navigate(this)"> Contributors</a></li> </ul> </div> <div class="desktop:grid-col-3"> <p class="text-bold">Tools</p> <ul class="add-list-reset line-height-sans-6"> <li> <a href="/art/" aria-label="Accessibility Requirements Tool" onclick="return navigate(this)"> ART</a></li> <li> <a href="/buy/solicitation-review-tool" aria-label="Solicitation Review Tool" onclick="return navigate(this)"> SRT</a></li> <li> <a href="/content/guide-accessible-web-design-development" onclick="return navigate(this)"> Developer Guide</a></li> <li> <a href="https://digitaldashboard.gov/" target="_blank" onclick="return navigate(this)"> DigitalDashboard.gov</a></li> <li> <a href="https://analytics.usa.gov/" target="_blank" onclick="return navigate(this)"> Analytics.usa.gov</a></li> </ul> </div> <div class="desktop:grid-col-3"> <p class="text-bold">Resources</p> <ul class="add-list-reset line-height-sans-6"> <li> <a href="/content/glossary" aria-label="Glossary for Section508" onclick="return navigate(this)"> Glossary</a></li> <li> <a href="/website-policies" onclick="return navigate(this)"> Website Policies</a></li> <li> <a href="/tools/program-manager-listing/" onclick="return navigate(this)"> Find Your Section 508 Program Manager</a></li> <li><a href="/manage/join-the-508-community/" onclick="return navigate(this)">Join the Community(Listserv)</a></li> </ul> </div> </div> </div> </footer> <div class="usa-identifier"> <section class="usa-identifier__section usa-identifier__section--masthead" aria-label="Agency identifier," > <div class="usa-identifier__container"> <div class="usa-identifier__logos"> <a href="https://gsa.gov" class="usa-identifier__logo" onclick="return navigate(this)"> <img class="usa-identifier__logo-img" alt="General Services Administration Logo" src="/assets/images/logos/gsa-logo.png"> </a> </div> <div class="usa-identifier__identity"> <p class="usa-identifier__identity-domain">Section508.gov</p> <p class="usa-identifier__identity-disclaimer"> An official website of the <a href="https://www.gsa.gov/" onclick="return navigate(this)">General Services Administration</a> </p> </div> </div> </section> <nav class="usa-identifier__section usa-identifier__section--required-links" aria-label="Important links,," > <div class="usa-identifier__container"> <ul class="usa-identifier__required-links-list"> <li class="usa-identifier__required-links-item"> <a href="https://www.gsa.gov/about-us" class="usa-identifier__required-link usa-link" onclick="return navigate(this)">About GSA</a> </li> <li class="usa-identifier__required-links-item"> <a href="https://www.gsa.gov/website-information/accessibility-aids" class="usa-identifier__required-link usa-link" onclick="return navigate(this)">Accessibility statement</a> </li> <li class="usa-identifier__required-links-item"> <a href="https://www.gsa.gov/reference/freedom-of-information-act-foia" class="usa-identifier__required-link usa-link" onclick="return navigate(this)">FOIA requests</a> </li> <li class="usa-identifier__required-links-item"> <a href="https://www.gsa.gov/reference/civil-rights-programs/notification-and-federal-employee-antidiscrimination-and-retaliation-act-of-2002" class="usa-identifier__required-link usa-link" onclick="return navigate(this)">No FEAR Act data</a> </li> <li class="usa-identifier__required-links-item"> <a href="https://www.gsaig.gov/" class="usa-identifier__required-link usa-link" onclick="return navigate(this)">Office of the Inspector General</a> </li> <li class="usa-identifier__required-links-item"> <a href="https://www.gsa.gov/reference/reports/budget-performance" class="usa-identifier__required-link usa-link" onclick="return navigate(this)">Performance reports</a> </li> <li class="usa-identifier__required-links-item"> <a href="https://www.gsa.gov/website-information/website-policies" class="usa-identifier__required-link usa-link" onclick="return navigate(this)">Privacy policy</a> </li> <li class="usa-identifier__required-links-item"> <a href="/website-policies/#reuse-and-copyright" class="usa-identifier__required-link usa-link" onclick="return navigate(this)">Reuse and Copyright</a> </li> </ul> </div> </nav> <section class="usa-identifier__section usa-identifier__section--usagov" aria-label="U.S. government information and services,," > <div class="usa-identifier__container"> <div class="usa-identifier__usagov-description"> Looking for U.S. government information and services? </div> <a href="https://www.usa.gov/" class="usa-link" onclick="return navigate(this)">Visit USA.gov</a> </div> </section> </div>  <script id="_fed_an_ua_tag" src="https://dap.digitalgov.gov/Universal-Federated-Analytics-Min.js?agency=GSA"></script> <script src="/assets/js/uswds.min.js?1732224641581990839"></script> <script src="/assets/js/app.js?1732224641581990839"></script> <script> $(document).ready(function(){ // Check if the user already dismissed alert banner if (window.localStorage.getItem('dismiss_alert')) { $('#alert_banner').hide(); } $("#dismiss_alert").click(function(){ // Save on LocalStorage window.localStorage.setItem('dismiss_alert', true); $('#alert_banner').hide(); }); }); </script> </body> </html>

CINXE.COM

Accessible Design Using the U.S. Web Design System (USWDS) | Section508.gov