Heatmap
Chart where each cell represents the value of the category pairing to show most and least common combinations of values within a matrix.
Best practices
Follow general best practice guidance to create accessible data experiences for users of all abilities.
- Provide informative, concise, and clear alternative text so that screen readers can describe the chart to users who may not be able to visually perceive the chart.
- Ensure that all information in the chart is made available to all users. This includes providing access to all chart data, annotations, tooltips, trends, and narrative elements to screen readers.
- Ensure color palette and all other chart elements that communicate information meet the VGAR requirements for color contrast ratio (internal only) as well as use of color alone principle (internal only).
Keyboard navigation
| 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 cell. |
| Tab | Exit the chart at any time. |
| ←→ | Move among sibling rows or cells on a row or cell. |
| ↑↓ | Move among cells across rows on a row or cell. |
| Esc | Dismiss the tooltip at any time. |
| Control+Shift | Press and hold when using the arrow keys for the best navigation experience on a Mac (Voiceover). |
VGAR (internal only)
Find links to the Visa Global Accessibility Requirements (VGAR) for this component.- Keyboard Support (NAV-1-1)
- Mouse Hover and Keyboard Focus are Equivalent (NAV-1-2)
- No Keyboard Trap (NAV-1-3)
- Support Screen Readers (GEN-3-1)
- Content on Hover or Focus (NAV-1-4)
- Single Character Keyboard Shortcuts (NAV-1-7)
- Visible Keyboard Focus (NAV-2-1)
- Default Tab Order (NAV-2-3)
- Use Headings (TXT-1-1)
- Sequential Headings (TXT-1-4)
- Target Size (INT-5-6)
- Name, Role, Value (INT-5-7)
- Content Resizing, Styling, & Reflow (VIS-1)
- Color Usage (VIS-2)
- Text Alternatives (VIS-3-1)
- No Images of Text (VIS-3-2)