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
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.
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.
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.
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.
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.
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
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.
- 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.
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)
- {name_of_application} / {title_of_the_page}
- {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 data...at 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.