Heatmap
Chart where each cell represents the value of the category pairing to show most and least common combinations of values within a matrix.
This chart component has built-in accessibility features to support creating accessible charts from the start. These include descriptive tag properties, keyboard navigation controls, and tools to ensure sufficient color contrast. Find accessibility guidance below.
Best practices
Ensure the following best practices are met when implementing this component to create accessible data experiences for everyone, everywhere.
Make thoughtful color choices
Ensure users of all abilities can understand the meaning of colors in your data visualization. Choose color combinations that provide sufficient contrast and add textures to support color-blind and low vision users.
Use accessible color palettes
Our data visualization color palettes are designed to ensure that data distinctions remain clear for users with various types of color vision deficiencies. Use this functionality to ensure sufficient contrast between colors and avoid relying only on color to differentiate categories or values.For example, the Visa red to green divergent color palette ensures that all shades are seen as different values, even under different color-blindness simulators. Meanwhile, a default red to green color palette doesn’t make the shades distinct enough across the full range of the palette.
Do Use color pairings that distinguish between colors to support different forms of color blindness.
Don't Use color combinations known to cause issues for users with color-blindness, like certain reds and greens.
Outline light objects
Our chart components automatically add darker outlines to light-colored chart elements to ensure contrast and visibility against backgrounds and adjacent marks. Overriding this default behavior can make elements harder to distinguish from the chart background and reduce readability.
Do Ensure that light-colored objects on a light background have an outline that meets contrast requirements.
Don't Use light-colored objects against a light background or remove the default outline, as this makes it harder to view.
Write clear alternative text
Use the chart components’ descriptive tag properties to provide concise and informative alternative text for screen readers.
| Accessibility property | Guidance | Example |
|---|---|---|
Summarize what the chart shows and the type of data. | “This bar chart shows monthly payment volume for this year compared to last year.” | |
Clearly state the takeaway and highlight key statistical insights and trends. | “Sales numbers increased every month except June and July.” | |
Explain which controls or filters affect the chart. | “The values in this chart are based on the filter selections applied to the dashboard.” | Note special visual features not covered elsewhere, such as sorting or color grouping. | “Sorting is applied to show highest values first. Bars that are above average are highlighted in dark blue and all other bars are gray.” |
Add descriptive labels for data
Use the chart components’ custom labeling options to provide clear and descriptive names for displayed data. Labels like “num_transactions” may work during analysis, but “Number of transactions” is easier for users to understand and interpret.
Data labels
Data labels are the textual representations of data values in charts or tables. Use descriptive labels when presenting data to end users to provide clarity and avoid technical jargon or shorthand that may confuse non-technical audiences.Tooltips
Tooltips add contextual information about data points when users hover or focus on chart elements. Clear and descriptive labels in tooltips help users understand the meaning of the data without requiring knowledge of internal naming conventions.Keyboard controls
| Enter | Enter the chart area/drill down a level on the chart area or a row. |
|---|---|
| Shift+Enter | Drill up a level on a row or a cell. |
| ←→ | Move among cells across rows when focusing on a row or a cell. |
| ↑↓ | Move among cells across rows when focusing on a row or a cell. |
| Control+Shift | Press and hold when using the arrow keys for the best navigation experience on a Mac (VoiceOver). |
| Esc | Dismiss the tooltip at any time. |
| Tab | Exit the chart at any time. |