Our work at Nielsen is to count and include everyone. For this reason, all of our GDS foundations, components, and patterns meet WCAG 2.2 AA standards for accessibility on the web. By adhering to this standard, we are raising the bar for Nielsen products and including as many users as possible. For more information about WCAG 2.2 AA, you can read their guidance and requirements here.

This isn’t an exhaustive list of all the accessibility standards in Nielsen. These are high level standards we’ve set for our applications. Please take time to read the WCAG 2.2 AA standards so you can incorporate its principles into our products.

UI States

We've engineered all GDS components to have appropriate states of interaction. Each state has important guidance that applies to web accessibility.

Hover: the pointer is above an element

Only informative interactions should occur only on hover. Hovering is most often used for giving subtle feedback to the user about clickable elements.

Learn more about hovering guidance

Clicked: the state which the pointer is actively clicked

The clicked state (also known as a down-event) cannot be used to execute any part of a function. A function must be completed on the pointer's up-event.

Learn more about clicked/pointer guidance

Disabled: an element is inactive to user interaction

There is no contrast requirement for inactive components. For this reason, we use a 32% opacity to denote inactive elements. Disabled objects don’t have any functionality. You can’t click, select, drag, etc. them in this state.

Learn more about disabled guidance

Drag: an interaction to move content that happens during the pointer's clicked state

Any functionality that happens via drag must also be able to be achieved with a pointer click as well. No interaction should solely be achieved by a drag.

Learn more about dragging guidance

Keyboard Focus: visual affordance to show an element can receive user interaction

Focus states are only shown during keyboard navigation (like tabbing and arrowing) or when using an assistive technology.

Learn more about focus guidance

Color Contrast

Color contrast measures the relative difference between two hues of color. Higher contrast ratios are easier to read and perceive. All GDS components have been checked to ensure proper contrast ratios. Do not make changes without good reason. Always check to be sure you've provided proper contrast for text and UI elements.

There are several contrast checker Figma plugins. We recommend Stark. Download the Stark plugin.

All text must meet or exceed a 4.5:1 contrast ratio. Large text (size-600 and greater) must have a 3:1 contrast ratio or greater. User Interface and graphics must have at least a 3:1 contrast ratio to their backgrounds.

What this means in GDS
  • In light mode, text must be gray-600 or darker (depending on background)
  • In dark mode, text must be gray-500 or lighter (depending on background)
  • For display icons with backgrounds, the default foreground icon color is -600, but may need to be updated for a 3:1 ratio.
Learn more about WCAG Color Contrast Guidance

Titles and Headings

Properly labeling a space grounds a user. It helps them easily understand the content they’re viewing and what tasks are available to them. They’re especially important for users of screen readers who will have this data read aloud to them. Omitting it makes it difficult for users to orient where they are in an application.

Every Page Should Have

  • A web page title (in the <title> tag) that includes the application name and page title. This is what shows in the browser tab.
  • The application’s name in the global navigation. (This is not the page’s H1)
  • A page title (wrapped in an <h1> tag) that names the space. (More information about this in our Writing Guidelines page.)
  • Section headings, wherever applicable (wrapped in <h2> and descending tags)
There are two main options for how to structure the web page title:
  1. {name_of_application} / {title_of_the_page}
  2. {name_of_application} / {name_of_the_data_or_space_viewed}

Titles do not need to exactly match a page’s breadcrumbs. It’s more important they give the application name and the page they’re viewing.

Proper Web Page Title Examples

  • Nielsen One Ads / Campaigns List
  • Digital Ad Ratings / Hooli - 2021 Quad Triple Edge Measurement
  • Nielsen Outcomes Dashboard / Demo Mix Final Results

Further Reading

  • Success Criterion 2.4.2 Page Titled: Web pages have titles that describe topic or purpose.
  • Success Criterion 2.4.6 Headings and Labels: Headings and labels describe topic or purpose.

Input Assistance

These are some key areas of input accessibility that are important to Nielsen applications.

  • Success Criterion 3.3.4 Error Prevention: For Web pages that…modify or delete user-controllable least one of the following is true. Submissions must either be:
    • Reversible
    • Checked
    • Confirmed
  • Success Criterion 2.5.8 Minimum Target Size: Targets have an area of at least 24 by 24 CSS pixels.
  • Success Criterion 2.5.7 Dragging Movements: All functionality that uses a dragging movement for operation can be achieved by a single pointer without dragging.

Assistive Technologies (Coming Soon)

All components are tested to operate well with assistive technologies. We test keyboard navigation, usage on screen readers, and functionality on operating system accessibility features. We’ll have more information about our process coming soon.