Links

Many kinds of links may be used in CDC digital communications, such as CDC.gov. Most links should point to other CDC managed pages within the same website or other CDC websites. Some may also direct users to non-HTML files such as PDFs or non-CDC content on other federal or external websites. The text, styles, and behaviors for links on CDC.gov will vary depending on the type of link, where the link is placed, HHS/CDC Web Standards, and usability best practices.

Link Text

For any kind of link, the link text should clearly describe the action or the content of the target page. Links to content should use keywords that help guide users to the content they need. Avoid using non-descriptive or repetitive words such as “more” or “click here” in buttons or paragraphs or text. This approach is especially important for users requiring assistive technologies, such as screens readers, to access the content. Screen readers read the text aloud and generally precede the text of a link by saying “link” or “visited link.” Be aware tha screen readers may allow users to extract the links into an alphabetically-organized list, using a keyboard shortcut within their screen reader software for that purpose. This is especially useful if they have an idea of first letter of the link for which they are looking.

Standard Links

Standard Links point to other CDC HTML content and may be displayed on their own or embedded in text. Standard Links are underlined by default so they are more easily distinguished from regular text, especially when embedded within sentences or paragraphs.

Standard Links

Standard Link

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Optio magnam nam possimus, This is a Standard Link embedded in a paragraph quidem aut esse cupiditate. Vel quis rem amet vitae. Iure numquam nam facilis, velit dignissimos labore tempora! Maiores?

Exercitationem quisquam fugiat ex magnam eum autem, Standard Links may be longer depending on content impedit voluptate esse debitis repellendus voluptatem corporis, ratione nam? Repudiandae quos odio voluptate! Aliquid quam distinctio eligendi. Quo doloribus deserunt esse quia voluptatibus.

  • This is a list item with a Standard Link embedded in the text.
  • This is a second list item with a Standard Link embedded in the text.
  • A Standard Link can be embedded within list items like this.
  • This is a list item with a Standard Link embedded in the text.
  • This is a second list item with a Standard Link embedded in the text.
  • A Standard Link can be embedded within list items like this.

Standard Link Specifications

  • Color: blue-primary
  • Underline: blue-primary, underline by default, no underline on hover
  • Behavior:open in same browser window/tab by default, may open new windows as a result of users’ selected browser settings and OS

Exception to Standard Link Behavior

Some links may open content that is secondary or supplemental to users’ main tasks. In these instances, the links may be set to override the default link behavior and open in a new window to prevent users from inadvertently closing the entire site.

  • Link to large stand-alone images that may need more time to download
  • Links to printable versions of page content (applies more to web applications)
  • Links to Help content (applies more to web applications)

List Links

When all items in a list are links, the default underlining style for links may cause more difficultyfor users reading the text. In these situations, a special class can be applied to hide the normal link underlining.

Exception to Standard Link Style

To improve the readability of links displayed in Lists in which every item is a link, a special class can be applied at the parent (Container or List Level) and at the Link Level to hide the link underlines by default (display underline on hover). This is only recommended for Lists of Links in which every item is a link.

Non-HTML File Links

Non-HTML files include PDFs, Word documents, and PowerPoint presentations – anything that is not a “standard” web page and may require users to have additional plug-ins to access the content in the file. The use of non-HTML files to provide CDC content should be avoided. In most instances, the content contained within these files could and should be integrated into the WCMS to be managed and displayed as “standard” web content. This approach best supports accessibility, Search Engine Optimization (SEO), and usability as well as consistent web management practices.

WCMS: When these links are used, the display of the Non-HTML File Icons and the FIle Details are automated from the WCMS.


Non-HTML File Link Specifications

  • File Detail: Open Sans, Normal, #000, displayed within brackets [ ] as shown [PDF - 123 KB], File Details are linked or displayed as a link
  • File Icon: icons and icons sizes vary by file link type, see deatils about File Icons above
  • File Link Underline: see Specifications for Standard Links and List Links, File Details are linked or displayed as a link
  • Wrapping: allow wrapping within the text and between the file icon and detail so that these are always displayed together
  • Link and Icon Behavior: clicking or tapping the file link or icon opens the associated content in a new browser window to help prevent users from inadvertently closing the entire CDC site when they are finished using a document

Exception to Non-HTML Link Style

In some instances, an image may be associated with a link (both targeting the same item). If the image is set to a non-HTML file link, the File Icon and File Details would be redundant and may interfere with the layout of the image and its associated content. To address the potential layout issues in these cases, a WCMS setting can be used to override the standard Non-HTML link style and hide the File Icons and File Details. This setting can be applied at the parent (Container or List Level) and at the Link Level.

WCMS: Allow users to hide Non-HTML Link icons and File Details at the parent (Container or List Level) and at the Link Level.

Guidance for Non-HTML File Links

Avoid

  • Using Non-HTML links Sliders or navigational elements

Non-HTML Link File Icons

CDC standardizes the display of icons to represent the file type so that users have an additional cue they are opening a file. Non-HTML links should allow wrapping within the text and between the file icon and detail so that these are always displayed together.

Icon Icon Width File Extensions File Type Abbreviation
file_pdf
16px .pdf PDF
file_ppt
16px .pptx
.ppt
.ppsx
PPT
file_word
16px .docx
.doc
DOC
file_excel
16px .xlsx
.xls
.csv
XLS
file_media
16px .mp3
.mp4
.wmv
.webm
.wav
.ogg
.wma
.mov
.rm
.mpeg
.ram
.ogv
.avi
.qt
.mpg
AUDIO or VIDEO
file_text
16px .txt
.rtf
TXT
file_zip
16px .zip ZIP
file_epub
16px .epub EPUB

Non-HTML File Link File Details

If links to non-HTML Files are used, they must comply with the HHS Web Standard: Provide File Type and Size with Downloadable Files. This standard says that all links to files such as PDFs must have an indicator of the file type and one file detail such as file size, number of pages, or number of minutes. When these links are used, the display of the external icons are automated from the WCMS.

Detail Example Best For
File Size 150 KB
16 MB
3 GB
PDF
PowerPoint Files (PPT)
Excel Files (XLS)
Audio/Video Files
Word Documents (DOC)
Zip Files (ZIP)
Number of Pages 25 pages PDF
Word Documents (DOC)
Number of Minutes 5 minutes

6:45 minutes
(when seconds are shown)

90 minutes

87:13 minutes
(when seconds are shown)

125 minutes
Audio/Video Files

External Links

Links to external content must comply with the HHS Web Standard: External Link Icon & Disclaimer. This standard says that all links to non-CDC external content must provide an “exit notification” indicated by a standard external link icon to the right of the external link. Users tend to assume that links will take them to another page within the same site and trust content provided by CDC. This indicator helps differentiate non-CDC content and avoid user confusion about its source.

Visit an Google.com - external link (non .gov)External Link
Visit an HHS.gov - external linkExternal Link

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Numquam iusto suscipit qui minima. Quo maiores, repellat odio molestiae qui eos, beatae asperiores inventore quis, laudantium commodi sunt mollitia est blanditiis.

External Link Icons

External Link Icon Specifications

  • External Icon: alt text for the external link icon should be: “External Web Site Icon,” and must be included with every usage of the icon graphic
  • External Icon Color: blue-primary
  • Wrapping: do not allow the icon to wrap to the next line on its own (at least previous word from the associated link with it)
  • Link Behavior: clicking or tapping the external link opens the associated content in the same browser window (default browser behavior) to allow users to choose how they want to interact with the site, reduce confusion for novice web users and users with visual impairments, and best support accessibility software
  • External Icon Behavior: clicking or tapping the external link icon opens the CDC Web Site Disclaimers page in the same browser window because CDC must disclaim all non-governmental links (e.g. .com, .org, .edu) using standard disclaimer text

Exception to External Link Style

External Icons are automatically hidden for links to the following Social Media sites.

  • https://www.facebook.com/
  • https://twitter.com/
  • https://www.linkedin.com/
  • https://www.pinterest.com/
  • http://www.youtube.com/
  • https://plus.google.com/
  • http://instagram.com/
  • http://www.flickr.com/
  • https://www.tumblr.com/

In some instances, an image may be associated with a link (both targeting the same item). If the image is set to a an External Link, the External Icon would be redundant and may interfere with the layout of the image and its associated content. In these instances, a WCMS setting can be used to override the default External Link link style and hide the external icons. This setting can be applied at the parent (Container or List Level) and at the Link Level.

External Icons are not displayed for links in the Footer that are outside of CDC.gov.

Icon Icon Height File Extentions File Type Abbreviation
file_externalExternal Link 16px .pdf PDF

External Non-HTML File Links


External Non-HTML Files are files on other web sites that are not sponsored, hosted, or managed by CDC. This includes files on all nongovernmental web sites, .net, .edu, .org, and .com sites, state, local and other non‐federal .gov sites, and any extranet which includes non‐federal participants. Links to External non-HTML files should be avoided. If used, these links must comply with the HHS Web Standards and specification described in the sections above.

Lorem ipsum, dolor sit amet consectetur adipisicing elit. Eaque external non-html file link[PDF 100KB]External Link veniam ducimus esse est facere quo delectus debitis. Id beatae porro similique, nihil eaque et officia accusantium repellendus quas architecto assumenda?


  • Link and File Icon Behavior: clicking or tapping the file link or icon opens the associated content in a new browser window to help prevent users from inadvertently closing the entire CDC site when they are finished using a document
View Page In: PDF [150k] DOC [150k]
Page last reviewed: