Dumbbell plot
Chart comparing the difference between two related variables across multiple categories or date periods.
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
| Enter | Enter the chart area/drill down a level on the chart area or a group. |
| Shift+Enter | Drill up a level on a group or dumbbell. |
| ←→ | Move among sibling groups or dumbbells on a group or dumbbell. |
| 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. |
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)