Digital Standards

<!DOCTYPE html> <html lang="en" dir="ltr" prefix="og: https://ogp.me/ns#"> <head> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta charset="utf-8" /> <script>window.CDEConfig = { "exitDisclaimerHref":{ "en":"\/policies\/linking", "es":"\/espanol\/politicas\/enlaces" }, "showFloatingDelighters":true, "environmentConfig":{ }, "glossaryConfig":{ "apiServer":"https:\/\/webapis.cancer.gov\/glossary\/v1\/" }, "drugDictionaryConfig":{ "apiServer":"https:\/\/webapis.cancer.gov\/drugdictionary\/v1\/" }, "ctsConfig":{ "apiServer":"https:\/\/clinicaltrialsapi.cancer.gov\/api\/v2", "printApiBase":"https:\/\/www.cancer.gov\/CTS.Print", "zipConversionEndpoint":"\/cts_api\/zip_code_lookup" }, "r4rConfig":{ "apiServer":"https:\/\/webapis.cancer.gov\/r4r\/v1" }, "general":{ "apiServer":"https:\/\/webapis.cancer.gov", "mediaServer":"https:\/\/nci-media.cancer.gov" }, "sitewideSearchConfig":{ "bestBetsApiServer":"https:\/\/webapis.cancer.gov\/bestbets\/v1\/", "searchApiServer":"https:\/\/webapis.cancer.gov\/sitewidesearch\/v1\/" }, "chartData": { "factBook": { "baseUrl": "\/about-nci\/budget\/fact-book", "dataType": "json" } } };</script> <script id="ncids-nav-info">window.ncidsNavInfo = { nav: { id: "309", menu_type: "mobile-nav"}, item_id: 309};</script> <meta name="description" content="NCI digital standards provide content managers and developers guidance on content standards, visual design and branding, and policies and procedures in effect for NCI digital media." /> <link rel="canonical" href="https://www.cancer.gov/digital-standards" /> <meta http-equiv="content-language" content="en" /> <meta name="robots" content="index" /> <meta property="og:type" content="Website" /> <meta property="og:url" content="https://www.cancer.gov/digital-standards" /> <meta property="og:title" content="Digital Standards" /> <meta property="og:description" content="NCI digital standards provide content managers and developers guidance on content standards, visual design and branding, and policies and procedures in effect for NCI digital media." /> <meta name="cgdp.domain" content="cgov" /> <meta name="cgdp.template" content="default" /> <meta name="dcterms.subject" content="NCI Homepage" /> <meta name="dcterms.type" content="cgvArticle" /> <meta name="dcterms.coverage" content="nciglobal,ncienterprise" /> <meta name="dcterms.isPartOf" content="NCI Homepage" /> <meta name="dcterms.isReferencedBy" content="event1" /> <meta name="dcterms.issued" content="05/14/2015 - 08:00" /> <meta name="twitter:card" content="summary" /> <link rel="icon" href="https://www.cancer.gov/profiles/custom/cgov_site/themes/custom/cgov/static/images/design-elements/icons/favicons/favicon.ico" sizes="32x32"/> <link rel="icon" href="https://www.cancer.gov/profiles/custom/cgov_site/themes/custom/cgov/static/images/design-elements/icons/favicons/favicon.svg" type="image/svg+xml"/> <link rel="apple-touch-icon" href="https://www.cancer.gov/profiles/custom/cgov_site/themes/custom/cgov/static/images/design-elements/icons/favicons/apple-touch-icon.png"/> <link rel="manifest" href="https://www.cancer.gov/profiles/custom/cgov_site/themes/custom/cgov/static/images/design-elements/icons/favicons/site.webmanifest"/> <meta name="x-no-op" content="none" /> <meta name="Generator" content="Drupal 10 (https://www.drupal.org)" /> <meta name="MobileOptimized" content="width" /> <meta name="HandheldFriendly" content="true" /> <meta name="viewport" content="width=device-width, user-scalable=yes, initial-scale=1, minimum-scale=1" /> <script id="cgov-adobe-url" type="text/javascript" src="//assets.adobedtm.com/6a4249cd0a2c/949e98979342/launch-5f2a5357bf66.min.js" async="async"></script> <script type="application/ld+json">{ "@context": "https://schema.org", "@graph": [ { "@type": "WebSite", "name": "National Cancer Institute (.gov)", "url": "https://www.cancer.gov" } ] }</script> <link rel="alternate" hreflang="en" href="https://www.cancer.gov/digital-standards" /> <title>Digital Standards - NCI</title> <link rel="preconnect" href="https://static.cancer.gov" /> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,600;0,700;1,300;1,400;1,600;1,700&family=Poppins:ital,wght@0,300;0,400;0,500;0,600;1,300;1,400;1,500;1,600&family=Roboto+Mono:ital,wght@0,300;0,400;0,700;1,300;1,400;1,700&display=swap" rel="stylesheet"> <meta name="apple-mobile-web-app-title" content="Cancer.gov" /> <meta name="application-name" content="Cancer.gov" /> <link rel="stylesheet" media="all" href="/sites/g/files/xnrzdm211/files/css/css_2MGzP4wXbQkUEoIIdFZZMVDesqPLoVgfQ4Jd23xDS6k.css?delta=0&language=en&theme=ncids_trans&include=eJxFyEEKwCAMBMAPiT6prCbUgJWQjYf-vsfOcfgy9Wkd1OII3AGfbBLHseo_9Ww_fRmnStnDhFcGNhsibSz9AA2iHHs" /> <link rel="stylesheet" media="all" href="/profiles/custom/cgov_site/themes/custom/ncids_trans/dist/css/ncids-common.css?smm34w" /> <link rel="stylesheet" media="all" href="/profiles/custom/cgov_site/themes/custom/ncids_trans/dist/css/article.css?smm34w" /> </head> <body class="has-translated-content"> <a href="#main-content" class="usa-skipnav"> Skip to main content </a> <div class="dialog-off-canvas-main-canvas" data-off-canvas-main-canvas> <section id="usa-banner" class="usa-banner" aria-label="Official government website"> <header class="usa-banner__header"> <div class="usa-banner__inner"> <div class="usa-banner__header-text"> An official website of the United States government </div> </div> </header> </section> <header id="nci-header" class="nci-header nci-header--megamenu" data-base-path="/"> <div class="nci-header__navbar"> <div class="nci-logo" id="extended-mega-logo"> <a href="/" aria-label="National Cancer Institute Home Page"> <picture><source media="(min-width: 1024px)" srcset="/sites/g/files/xnrzdm211/files/ncids_header/logos/Logo_NCI.svg" /> <img src="/sites/g/files/xnrzdm211/files/ncids_header/logos/Logo_NCI_Mobile.svg" alt="" /> </picture> </a> </div> <div class="nci-header-nav__secondary"> <button class="usa-button nci-header-mobilenav__open-btn">Menu</button> <form class="nci-header-search" method="get" action="/search/results" role="search"> <label class="usa-sr-only" for="nci-header-search__field"> Search </label> <input class="usa-input" id="nci-header-search__field" type="search" name="swKeyword" data-autosuggest-collection="cgov"/> <button class="usa-button nci-header-search__search-button" type="submit" aria-label="Search"> <span class="nci-header-search__label" aria-hidden="true">Search</span> <svg class="usa-icon" xmlns="http://www.w3.org/2000/svg" role="img" viewbox="0 0 24 24" aria-hidden="true"> <path d="M0 0h24v24H0z" fill="none"/> <path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"/> </svg> </button> </form> </div> </div> <nav aria-label="Primary navigation" class="nci-header-nav"> <div class="nci-header-nav__inner"> <ul class="nci-header-nav__primary"> <li class="nci-header-nav__primary-item"> <a href="/about-cancer" class="nci-header-nav__primary-link" data-menu-id="829"> <span>About Cancer</span> </a> </li> <li class="nci-header-nav__primary-item"> <a href="/types" class="nci-header-nav__primary-link" data-menu-id="11868"> <span>Cancer Types</span> </a> </li> <li class="nci-header-nav__primary-item"> <a href="/research" class="nci-header-nav__primary-link" data-menu-id="12732"> <span>Research</span> </a> </li> <li class="nci-header-nav__primary-item"> <a href="/grants-training" class="nci-header-nav__primary-link" data-menu-id="914792"> <span>Grants & Training</span> </a> </li> <li class="nci-header-nav__primary-item"> <a href="/news-events" class="nci-header-nav__primary-link" data-menu-id="12664"> <span>News & Events</span> </a> </li> <li class="nci-header-nav__primary-item"> <a href="/about-nci" class="nci-header-nav__primary-link" data-menu-id="10952"> <span>About NCI</span> </a> </li> </ul> </div> </nav> </header> <div class="grid-container"> <div class="grid-row flex-no-wrap"> <div class="grid-col-10"> <nav class="usa-breadcrumb usa-breadcrumb--wrap" aria-label="Breadcrumbs"> <ol class="usa-breadcrumb__list"> <li class="usa-breadcrumb__list-item"> <a href="/" class="usa-breadcrumb__link"> <span>Home</span> </a> </li> <li class="usa-breadcrumb__list-item usa-current" aria-current="page"> <span>Digital Standards for NCI Websites and Social Media</span> </li> </ol> </nav> </div> <section class="cgdp-page-options cgdp-page-options--top" aria-label="Page options top"> <button class="usa-button usa-button--unstyled" onclick="window.print()"> <svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24" class="usa-icon" role="img" aria-hidden="true" focusable="false"> <path d="M0 0h24v24H0z" fill="none"/> <path d="M19 8H5c-1.66 0-3 1.34-3 3v6h4v4h12v-4h4v-6c0-1.66-1.34-3-3-3zm-3 11H8v-5h8v5zm3-7c-.55 0-1-.45-1-1s.45-1 1-1 1 .45 1 1-.45 1-1 1zm-1-9H6v4h12V3z"/> </svg> <span class="usa-sr-only"> Print </span> </button> <a class="usa-button usa-button--unstyled" href="mailto:?subject=Information from the National Cancer Institute Web Site &body=I found this information on www.cancer.gov and I'd like to share it with you: https://www.cancer.gov/digital-standards %0D%0A%0D%0A NCI's Web site, www.cancer.gov, provides accurate, up-to-date, comprehensive cancer information from the U.S. government's principal agency for cancer research. If you have questions or need additional information, we invite you to contact NCI's LiveHelp instant messaging service at https://livehelp.cancer.gov, or call the NCI's Contact Center 1-800-4-CANCER (1-800-422-6237) (toll-free from the United States)."> <svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24" class="usa-icon" role="img" aria-hidden="true" focusable="false"> <path d="M0 0h24v24H0z" fill="none"/> <path d="M20 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 14H4V8l8 5 8-5v10zm-8-7L4 6h16l-8 5z"/> </svg> <span class="usa-sr-only"> Email </span> </a> </section> </div> </div> <div id="page" class="grid-container"> <div class="grid-row grid-gap">  <div class="desktop:grid-col-3 nci-no-print"> <nav aria-label="Secondary navigation"> <ul class="usa-sidenav"> <li class="usa-sidenav__item"> <a href="/digital-standards" data-menu-id="280109" class="usa-current" aria-current="page">Digital Standards</a> </li> </ul> </nav> </div> <div class="cgdpl desktop:grid-col-9"> <div id="content" class=""> <main class="contentzone has-section-nav" id="main-content"> <div data-drupal-messages-fallback class="hidden"></div>  <article> <div class="resize-content"> <h1> Digital Standards for NCI Websites and Social Media </h1> <div id="cgvBody"> <div class="blog-intro-text"> <p>The Digital Standards for NCI Websites and Social Media provide guidance to content managers and developers concerning the visual and content standards, policies, and procedures in effect for NCI digital media, including traditional and mobile websites as well as social and new media channels. Policies include federal accessibility requirements and best practices in web design as well as NCI’s own visual and content standards.</p> <p>These policies apply to all digital communication channels from NCI Divisions, Offices, and Centers. If you have questions about these guidelines, send an email to <a href="mailto:ncidigital@nih.gov?subject=Request for Digital Design Standards">ncidigital@nih.gov</a>.</p></div> <div class="accordion"> <nav class="on-this-page hide-otp-on-collapse" role="navigation"> <span class="on-this-page__header">On This Page</span> <ul> <li> <a href="#federal-best-practices"> <p>Federal Best Practices</p> </a> </li> <li> <a href="#domain-name-standards-and-registration-policy"> <p>Domain Name Standards and Registration Policy</p> </a> </li> <li> <a href="#required-website-footer-links"> <p>Required Website Footer Links</p> </a> </li> <li> <a href="#accessibility-policy-section-508-compliance"> <p>Accessibility Policy (Section 508 Compliance)</p> </a> </li> <li> <a href="#plain-language-standards"> <p>Plain Language Standards</p> </a> </li> <li> <a href="#visual-standards-and-branding"> <p>Visual Standards and Branding</p> </a> </li> <li> <a href="#content-standards"> <p>Content Standards</p> </a> </li> <li> <a href="#social-media-standards"> <p>Social Media Standards</p> </a> </li> <li> <a href="#mobile-website-and-application-standards"> <p>Mobile Website and Application Standards</p> </a> </li> <li> <a href="#html-standards"> <p>HTML Standards</p> </a> </li> </ul> </nav> <section> <h2 id="federal-best-practices"> <p>Federal Best Practices</p> </h2> <p>The American people expect to interact with government through digital channels such as websites, email, and mobile applications. The <a href="https://www.hhs.gov/web/governance/digital-strategy/index.html">Digital Government Strategy</a> was developed to meet the public’s need for high-quality, effective digital services. Other guidance includes:</p> <ul> <li><a href="https://playbook.cio.gov/#plays_index_anchor">Digital Service Playbook</a></li> <li><a href="https://www.whitehouse.gov/omb/information-regulatory-affairs/privacy/" rel="noopener noreferrer" target="_blank">Policies for Federal Agency Public Website and Digital Services</a></li> </ul> <p>Some additional helpful resources include:</p> <ul> <li><a href="http://www.digitalgov.gov/resources/">DigitalGov Resources</a> which includes a <a href="https://www.digitalgov.gov/resources/checklist-of-requirements-for-federal-digital-services/">Checklist of Requirements for Federal Digital Services</a></li> <li><a href="https://www.hhs.gov/web/section-508/accessibility-checklists/index.html">HHS Section 508 Accessibility Checklists</a></li> <li><a href="http://www.usability.gov/">Usability Best Practices from Usability.gov</a></li> </ul> </section> <section> <h2 id="domain-name-standards-and-registration-policy"> <p>Domain Name Standards and Registration Policy</p> </h2> <p>NCI’s Center for Bioinformatics and Information Technology (CBIIT) and Office of Communications and Public Liaison (OCPL) are developing standards for new NCI domain names. Requests for new NCI domain names must be reviewed by OCPL and CBIIT. NCI Divisions, Offices and Centers and their staff should notify their OCPL Communications Lead to request a new domain name.</p> <p>NCI’s domain name standards will comply with the HHS Internet Domain Names Policy, which regulates the usage, approval, acquisition, and registration of HHS Internet domain names.</p> </section> <section> <h2 id="required-website-footer-links"> <p>Required Website Footer Links</p> </h2> <p>The U.S. Office of Management and Budget requires federal agencies to post or link to certain information on their principal website and on major entry points to their sites. To satisfy this requirement, NCI websites must include the following four links in their footers:</p> <ul type="disc"> <li>Disclaimer Policy (linking to <a data-entity-substitution="canonical" data-entity-type="node" data-entity-uuid="4d6d296a-8ed8-413d-af48-9a86a1a8ebb4" href="/policies/disclaimer">https://www.cancer.gov/policies/disclaimer</a>)</li> <li>Accessibility (linking to <a data-entity-substitution="canonical" data-entity-type="node" data-entity-uuid="79f07e28-2b8c-4702-841b-f692a5a97fb6" href="/policies/accessibility">https://www.cancer.gov/policies/accessibility</a>)</li> <li>FOIA (linking to <a data-entity-substitution="canonical" data-entity-type="node" data-entity-uuid="5b28f2e8-04d4-409f-a425-bc1e2c0cddb2" href="/policies/foia">https://www.cancer.gov/policies/foia</a><a data-entity-substitution="canonical" data-entity-type="node" data-entity-uuid="5b28f2e8-04d4-409f-a425-bc1e2c0cddb2" href="/policies/foia">)</a></li> <li>HHS Vulnerability Disclosure (linking to <a href="https://www.hhs.gov/vulnerability-disclosure-policy" rel="nofollow noopener" target="_blank">https://www.hhs.gov/vulnerability-disclosure-policy</a>) </li> </ul> <p>The footer must also include cross-agency links listed in the order below. NCI's footer standard is to spell out agency names instead of using logos.</p> <ul type="disc"> <li>U.S. Department of Health and Human Services (linking to <a href="http://www.hhs.gov">http://www.hhs.gov</a>)</li> <li>National Institutes of Health (linking to <a href="http://www.nih.gov">http://www.nih.gov</a>)</li> <li>National Cancer Institute (linking to <a data-entity-substitution="canonical" data-entity-type="node" data-entity-uuid="8b45edc5-d932-4f0f-a630-6f9b47b6a332" href="/">https://www.cancer.gov</a>)</li> <li>USA.gov (linking to <a href="http://www.usa.gov">http://www.usa.gov</a>)</li> </ul> </section> <section> <h2 id="accessibility-policy-section-508-compliance"> <p>Accessibility Policy (Section 508 Compliance)</p> </h2> <p>All NCI websites must be accessible to users, as described in Section 508 of the Rehabilitation Act, and compatible with screen readers and other assistive technologies. Section 508 requires federal agencies to make their electronic and information technologies, including websites, conform to certain accessibility standards.</p> <p>Everyone working on or providing content for NCI websites should be familiar with these resources:</p> <ul> <li><a href="http://www.section508.gov/">Section 508 Standards</a></li> <li><a href="https://www.hhs.gov/web/section-508/accessibility-checklists/index.html">HHS Section 508 Accessibility Conformance Checklists</a></li> <li><a href="https://www.access-board.gov/ict/">U. S. Access Board's Section 508 Standards</a></li> </ul> <p>All NCI websites must include a link named "Accessibility" from any web page that may contain known accessibility barriers or that links to information inside your site that may present accessibility problems for users with disabilities. The link must go to the NCI Accessibility Policy (<a data-entity-substitution="canonical" data-entity-type="node" data-entity-uuid="79f07e28-2b8c-4702-841b-f692a5a97fb6" href="/policies/accessibility">https://www.cancer.gov/policies/accessibility</a>). The "Accessibility" link is not an alternative to making your site accessible. It is to be used in addition to your best efforts to make it accessible.</p> <p>NCI staff can access more information about Accessibility on the <a href="https://mynci.cancer.gov/topics/web-accessibility-section-508-compliance">NCI Intranet</a> (NCI Staff Only). For information about NCI's continuing efforts to make its web-based products accessible to all users or to report an accessibility problem on any NCI site, please e-mail us at <a href="mailto:nci508@mail.nih.gov">nci508@mail.nih.gov</a>.</p> </section> <section> <h2 id="plain-language-standards"> <p>Plain Language Standards</p> </h2> <p><a href="https://www.congress.gov/bill/111th-congress/house-bill/946">The Plain Writing Act of 2010</a> requires federal agencies to write "clear Government communication that the public can understand and use."</p> <p>NCI is committed to writing new documents in plain language using the <a href="http://www.plainlanguage.gov/howto/guidelines/FederalPLGuidelines/TOC.cfm">Federal Plain Language Guidelines</a>. For more guidance, go to <a href="http://www.plainlanguage.gov">www.plainlanguage.gov</a>.</p> </section> <section> <h2 id="visual-standards-and-branding"> <p>Visual Standards and Branding</p> </h2> <p>All websites and social media created by NCI Divisions, Offices and Centers must use the NCI branding that follows the NIH standard. All graphical elements created by NCI Divisions, Offices and Centers that will be posted on www.cancer.gov must follow our visual design standards.</p> <p>For additional information about NCI's identity standards or to obtain a complete set of visual design standards for this website, please send an email to: <a href="mailto:ncidigital@nih.gov?subject=Request for Digital Design Standards">ncidigital@nih.gov</a>..</p> </section> <section> <h2 id="content-standards"> <p>Content Standards</p> </h2> <p>Uniformity in content style across NCI websites helps visitors to better understand and interact with information on the site. These guidelines are intended to be a quick reference for NCI web content owners to create new content or edit existing content. The term "content" encompasses both within-page content (the words readers see on your page) and meta content (the metadata that help locate and describe your pages within the content management system and that help search engines find and display your pages). NCI follows the<a href="http://www.chicagomanualofstyle.org/home.html"> Chicago Manual of Style</a> and the AMA Manual of Style for biomedical terms.</p> <p>For more information about NCI's content standards, please send an email to: <a href="mailto:ncidigital@nih.gov?subject=Request for Digital Design Standards">ncidigital@nih.gov</a>.</p> </section> <section> <h2 id="social-media-standards"> <p>Social Media Standards</p> </h2> <p>NCI's Office of Communications and Public Liaison (OCPL), in cooperation with the Center for Bioinformatics and Information Technology (CBIIT), has developed a set of NCI Communications Guidelines that include minimum requirements and key recommendations for all NCI social/new media activities—specifically blogs, Facebook, X, and video/YouTube.</p> <p>The guidelines are in accord with any that may be in effect for NIH and HHS, and should guide the work of anyone managing an NCI social or new media channel. The <a href="https://oma.od.nih.gov/DMS/Pages/Privacy-Program-Social-Media-and-Web-Management.aspx">NIH Social and New Media Policy</a> (NIH Staff Only) forms the basis for NCI’s social and new media guidelines and includes appendices that provide guidance for use of social media for recruitment of subjects to clinical trials as well as a social and new media checklist.</p> <p><a href="https://mynci.cancer.gov/topics/nci-communications-guidelines-social-media">NCI Communications Guidelines for Social Media</a> (NCI Staff Only)</p> </section> <section> <h2 id="mobile-website-and-application-standards"> <p>Mobile Website and Application Standards</p> </h2> <p>Developing a responsive site is our standard but if a stand-alone mobile website is needed or if you are building a mobile application, please email <a href="mailto:ncidigital@nih.gov?subject=Request for Digital Design Standards">ncidigital@nih.gov</a> for information on our standards.</p> </section> <section> <h2 id="html-standards"> <p>HTML Standards</p> </h2> <h3>NCI Design System (NCIDS)</h3> <p>All federal government websites should use the <a href="https://designsystem.digital.gov/">U.S. Web Design System (USWDS)</a>. OCPL created the <a href="https://designsystem.cancer.gov/">NCI Design System (NCIDS)</a>, an adaptation of USWDS, to support NCI informational websites and web applications in enhancing their user experience, increasing accessibility, and offering opportunities for efficiencies and consistency. NCIDS fulfills requirements specified in the <a href="https://digital.gov/resources/delivering-digital-first-public-experience/">21st Century Integrated Digital Experience Act</a> and Office of Management and Budget <a href="https://digital.gov/resources/delivering-digital-first-public-experience/">memo M-23-22 “Delivering a Digital-First Public Experience.”</a> All NCI informational websites and web applications should use NCIDS.</p> <p>NCIDS provides standardized design and user interface elements and patterns that follow usability best practices, speeding up the development process and helping teams focus on creating compelling digital content.</p> <p>The <a href="https://designsystem.cancer.gov/">NCIDS documentation site</a> provides an inventory of components; usable code; and guidance for the design, content, and accessibility of each component.</p> <h3>Responsive Design</h3> <p>Cancer.gov is a responsive site. This means that all content on Cancer.gov's desktop website can flow to any device (smartphone, tablet, printer) and the content's display will adjust to fit the size of the screen or output. This was achieved by using media queries in CSS to set rules based on screen width or device type, also known as "breakpoints." To speed development, we used the <a href="http://foundation.zurb.com/">Zurb Foundation</a> framework which provided predefined classes for controlling the layout of columns in a responsive environment. To get media queries to work in IE8 we use a JavaScript solution called <a href="https://github.com/scottjehl/Respond">respond.js</a>.</p> <p>Developers should separate document structure (HTML), styling (CSS), and functionality (JavaScript). By modularizing these three main components of front-end code, websites are more easily maintained and interaction behaviors are enforced across the site.</p> <p>We recommend using HTML5, which allows the use of more semantic page structuring through the introduction of new elements; article, header, footer, nav, aside, figure, and section. These elements give more meaning to the content contained inside them, particularly for people using assistive technologies. To get these new elements to work in IE8, we used a JavaScript solution called <a href="http://modernizr.com/">Modernizr</a>.</p> <h3>Accessibility</h3> <p>In addition to Section 508 standards, Cancer.gov follows <a href="http://www.w3.org/TR/WCAG20/">WCAG</a> (Web Content Accessibility Guidelines) 2.0 AA standards and WCAG 2.0 AAA standards for color contrast. Additionally, Cancer.gov implemented Accessible Rich Internet Applications (<a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA">ARIA</a>). ARIA is a set of accessibility attributes which can be added to HTML markup to provide more cues for people using assistive technology on websites with more advanced user interface controls. For instance, as a volume bar is moved on a video or audio file, ARIA markup allows assistive technology to read the volume level.</p> </section> </div> </div> </div> <footer class="article-footer"> <div class="document-dates horizontal"> <ul class="clearfix"> <li> <strong>Updated:</strong> <time datetime="2024-11-19T12:00:00Z">November 19, 2024</time> </li> </ul> </div> </footer> </article> </main> </div> </div> <div class="desktop:grid-col-9 desktop:grid-offset-3"> <section class="cgdp-page-options cgdp-page-options--bottom" aria-label="Page options bottom"> <button class="usa-button usa-button--unstyled" onclick="window.print()"> <svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24" class="usa-icon" role="img" aria-hidden="true" focusable="false"> <path d="M0 0h24v24H0z" fill="none"/> <path d="M19 8H5c-1.66 0-3 1.34-3 3v6h4v4h12v-4h4v-6c0-1.66-1.34-3-3-3zm-3 11H8v-5h8v5zm3-7c-.55 0-1-.45-1-1s.45-1 1-1 1 .45 1 1-.45 1-1 1zm-1-9H6v4h12V3z"/> </svg> <span class="usa-sr-only"> Print </span> </button> <a class="usa-button usa-button--unstyled" href="mailto:?subject=Information from the National Cancer Institute Web Site &body=I found this information on www.cancer.gov and I'd like to share it with you: https://www.cancer.gov/digital-standards %0D%0A%0D%0A NCI's Web site, www.cancer.gov, provides accurate, up-to-date, comprehensive cancer information from the U.S. government's principal agency for cancer research. If you have questions or need additional information, we invite you to contact NCI's LiveHelp instant messaging service at https://livehelp.cancer.gov, or call the NCI's Contact Center 1-800-4-CANCER (1-800-422-6237) (toll-free from the United States)."> <svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24" class="usa-icon" role="img" aria-hidden="true" focusable="false"> <path d="M0 0h24v24H0z" fill="none"/> <path d="M20 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 14H4V8l8 5 8-5v10zm-8-7L4 6h16l-8 5z"/> </svg> <span class="usa-sr-only"> Email </span> </a> </section> </div> </div> </div> <div id="block-ncidsfooterenglish"> <footer class="usa-footer usa-footer--nci-big" id="nci-footer" aria-label="Footer" > <div class="grid-container usa-footer__return-to-top"> <a href="#top" aria-label="Back To Top"><span>Back To Top</span></a> </div> <div class="usa-footer__primary-section"> <div class="grid-container"> <div class="grid-row grid-gap"> <div class="tablet:grid-col-8"> <nav class="usa-footer__nav" aria-label="Footer navigation"> <div class="grid-row grid-gap-4"> <div class="mobile-lg:grid-col-6 desktop:grid-col-4"> <section class="usa-footer__primary-content usa-footer__primary-content--collapsible" > <div class="usa-footer__primary-link">About</div> <ul class="usa-list usa-list--unstyled"> <li class="usa-footer__secondary-link"> <a href="/about-website">About This Website</a> </li> <li class="usa-footer__secondary-link"> <a href="/espanol">en Español</a> </li> <li class="usa-footer__secondary-link"> <a href="/policies/copyright-reuse">Reuse & Copyright</a> </li> <li class="usa-footer__secondary-link"> <a href="/social-media">Social Media</a> </li> </ul> </section> </div> <div class="mobile-lg:grid-col-6 desktop:grid-col-4"> <section class="usa-footer__primary-content usa-footer__primary-content--collapsible" > <div class="usa-footer__primary-link">Resources</div> <ul class="usa-list usa-list--unstyled"> <li class="usa-footer__secondary-link"> <a href="/contact">Contact Us</a> </li> <li class="usa-footer__secondary-link"> <a href="/publications">Publications</a> </li> <li class="usa-footer__secondary-link"> <a href="/publications/dictionaries/cancer-terms" >Dictionary of Cancer Terms</a > </li> <li class="usa-footer__secondary-link"> <a href="/research/participate/clinical-trials-search" >Find a Clinical Trial</a > </li> </ul> </section> </div> <div class="mobile-lg:grid-col-6 desktop:grid-col-4"> <section class="usa-footer__primary-content usa-footer__primary-content--collapsible" > <div class="usa-footer__primary-link">Policies</div> <ul class="usa-list usa-list--unstyled"> <li class="usa-footer__secondary-link"> <a href="/policies/accessibility">Accessibility</a> </li> <li class="usa-footer__secondary-link"> <a href="/policies/foia">FOIA</a> </li> <li class="usa-footer__secondary-link"> <a href="/policies/privacy-security" >Privacy & Security</a > </li> <li class="usa-footer__secondary-link"> <a href="/policies/disclaimer">Disclaimers</a> </li> <li class="usa-footer__secondary-link"> <a href="https://www.hhs.gov/vulnerability-disclosure-policy/index.html" >Vulnerability Disclosure</a > </li> </ul> </section> </div> </div> </nav> </div> <div class="tablet:grid-col-4"> <div class="usa-sign-up"> <div class="usa-sign-up__heading">Sign up for email updates</div> <form action="https://public.govdelivery.com/accounts/USNIHNCI/subscribers/qualify" aria-label="Footer subscribe" class="usa-form" accept-charset="UTF-8" method="post" novalidate target="_blank" id="signup" > <input type="hidden" name="category_id" id="category_id" value="" /> <div class="usa-form-group"> <label class="usa-label" for="email"> Enter your email address </label> <input class="usa-input width-full" id="email" name="email" type="email" value="" /> </div> <button class="usa-button usa-button--accent-warm" type="submit"> Sign up </button> </form> </div> </div> </div> </div> </div> <div class="usa-footer__secondary-section"> <div class="grid-container"> <div class="grid-row grid-gap"> <div class="usa-footer__logo grid-row desktop:grid-col-5"> <div class="mobile-lg:grid-col-auto desktop:margin-bottom-3"> <p class="usa-footer__logo-heading"> <span class="logo__agency-name">National Cancer Institute </span> <span class="logo__parent-organization" >at the National Institutes of Health</span > </p> </div> </div> <div class="usa-footer__contact-links mobile-lg:grid-col-7"> <div class="usa-footer__contact-heading">Contact Us</div> <div class="usa-footer__address"> <div class="usa-footer__contact-info grid-row grid-gap"> <div class="tablet:grid-col-auto"> <a href="https://livehelp.cancer.gov/">Live Chat</a> </div> <div class="tablet:grid-col-auto"> <a href="tel:1-800-4-CANCER">1-800-4-CANCER</a> </div> <div class="tablet:grid-col-auto"> <a href="mailto:NCIinfo@nih.gov">NCIinfo@nih.gov</a> </div> <div class="tablet:grid-col-auto"> <a class="no-exit-notification" href="https://nci.az1.qualtrics.com/jfe/form/SV_aeLLobt6ZeGVn5I" target="_blank" >Site Feedback</a > </div> </div> </div> </div> </div> <div class="grid-row grid-gap"> <div class="usa-footer__social-links desktop:grid-col-5"> <div class="usa-footer__social-heading">Follow us</div> <div class="grid-row grid-gap-1 nci-big__social"> <div class="grid-col-auto"> <a class="usa-social-link no-exit-notification" href="https://www.facebook.com/cancer.gov" > <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" class="usa-icon" role="img" aria-labelledby="facebook-title" > <title id="facebook-title">Facebook</title> <rect fill="none" height="24" width="24" /> <path d="M22,12c0-5.52-4.48-10-10-10S2,6.48,2,12c0,4.84,3.44,8.87,8,9.8V15H8v-3h2V9.5C10,7.57,11.57,6,13.5,6H16v3h-2 c-0.55,0-1,0.45-1,1v2h3v3h-3v6.95C18.05,21.45,22,17.19,22,12z" /> </svg> </a> </div> <div class="grid-col-auto"> <a class="usa-social-link no-exit-notification" href="https://twitter.com/thenci" > <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="usa-icon" role="img" aria-labelledby="x-title" > <title id="x-title">Follow on X</title> <path d="M12 22c5.5 0 10-4.5 10-10S17.5 2 12 2 2 6.5 2 12s4.5 10 10 10zm5.2-15.6L13.3 11l4.3 6.2h-3.1L11.6 13 8 17.2h-.9l4.1-4.8-4.1-6h3.1l2.7 3.9 3.4-3.9h.9zm-5.6 5.4.4.6 2.8 4h1.4l-3.5-5-.4-.6-2.6-3.7H8.3l3.3 4.7z" /> </svg> </a> </div> <div class="grid-col-auto"> <a class="usa-social-link no-exit-notification" href="https://www.instagram.com/nationalcancerinstitute/" > <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="usa-icon" role="img" aria-labelledby="instagram-title" > <title id="instagram-title">Instagram</title> <g id="Instagram"> <path d="M12,10a2,2,0,1,0,2,2A2,2,0,0,0,12,10Z" /> <path d="M12,2A10,10,0,1,0,22,12,10,10,0,0,0,12,2Zm6,12.69A3.32,3.32,0,0,1,14.69,18H9.31A3.32,3.32,0,0,1,6,14.69V9.31A3.32,3.32,0,0,1,9.31,6h5.38A3.32,3.32,0,0,1,18,9.31Z" /> <path d="M16.94,9.31a2.25,2.25,0,0,0-2.25-2.25H9.31A2.25,2.25,0,0,0,7.06,9.31v5.38a2.25,2.25,0,0,0,2.25,2.25h5.38a2.25,2.25,0,0,0,2.25-2.25h0ZM12,15.09A3.09,3.09,0,1,1,15.09,12,3.09,3.09,0,0,1,12,15.09Zm3.77-5.75a.79.79,0,0,1-.55.23.83.83,0,0,1-.55-.23.78.78,0,0,1,0-1.11A.82.82,0,0,1,15.22,8a.78.78,0,0,1,.55,1.33Z" /> </g> </svg> </a> </div> <div class="grid-col-auto"> <a class="usa-social-link no-exit-notification" href="https://www.youtube.com/NCIgov" > <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="usa-icon" role="img" aria-labelledby="youtube-title" > <title id="youtube-title">Youtube</title> <g id="YouTube"> <path d="M12,2A10,10,0,1,0,22,12,10,10,0,0,0,12,2Zm5.75,12.91A1.49,1.49,0,0,1,16.69,16a34.65,34.65,0,0,1-4.69.26A34.65,34.65,0,0,1,7.31,16a1.49,1.49,0,0,1-1.06-1.06A15.88,15.88,0,0,1,6,12a15.88,15.88,0,0,1,.25-2.91A1.49,1.49,0,0,1,7.31,8,34.65,34.65,0,0,1,12,7.77,34.65,34.65,0,0,1,16.69,8a1.49,1.49,0,0,1,1.06,1.06A15.88,15.88,0,0,1,18,12,15.88,15.88,0,0,1,17.75,14.91Z" /> <polygon points="10.77 13.78 13.91 12 10.77 10.22 10.77 13.78" /> </g> </svg> </a> </div> <div class="grid-col-auto"> <a class="usa-social-link no-exit-notification" href="https://www.linkedin.com/company/nationalcancerinstitute/" > <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="usa-icon" role="img" aria-labelledby="linkedin-title" > <title id="linkedin-title">Linkedin</title> <g id="final"> <path d="M12,2C6.48,2,2,6.48,2,12s4.48,10,10,10s10-4.48,10-10S17.52,2,12,2z M8.912001,17.584H6.584v-7.472h2.328001V17.584z M7.744,9.104C6.992,9.104,6.4,8.488,6.4,7.76c0-0.752,0.592-1.344,1.344-1.344c0.728,0,1.343999,0.592,1.343999,1.344 C9.087999,8.488,8.472,9.104,7.744,9.104z M17.6,17.584h-2.328v-3.64c0-0.856-0.024001-1.967999-1.216001-1.967999 s-1.392,0.927999-1.392,1.912v3.696H10.36v-7.472h2.224v1.008h0.024c0.464-0.752,1.296-1.216001,2.199999-1.192 c2.352001,0,2.792,1.552001,2.792,3.544001C17.6,13.472,17.6,17.584,17.6,17.584z" /> </g> </svg> </a> </div> </div> </div> <div class="usa-footer__contact-links desktop:grid-col-7"> <div class="usa-footer__address height-full"> <div class="usa-footer__contact-info grid-row grid-gap height-full"> <address> <a href="https://www.hhs.gov/" >U.S. Department of Health and Human Services </a> <a href="https://www.nih.gov/" >National Institutes of Health </a> <a href="https://www.cancer.gov/">National Cancer Institute </a> <a href="https://usa.gov/">USA.gov</a> </address> </div> </div> </div> </div> </div> </div> </footer> </div> </div> <script src="/sites/g/files/xnrzdm211/files/js/js_qW3TLjdEty3QtOepUCSY4uh6BQEGkRIL3qUMnp3WXG4.js?scope=footer&delta=0&language=en&theme=ncids_trans&include=eJxFyEEKwCAMBMAPiT6prCbUgJWQjYf-vsfOcfgy9Wkd1OII3AGfbBLHseo_9Ww_fRmnStnDhFcGNhsibSz9AA2iHHs"></script> <script src="/profiles/custom/cgov_site/themes/custom/ncids_trans/dist/js/ncids-common.js?smm34w"></script> <script src="/profiles/custom/cgov_site/themes/custom/ncids_trans/dist/js/article.js?smm34w"></script> </body> </html>

CINXE.COM

Digital Standards - NCI