Line chart
Chart showing points connected by line segments, used to represent how a number changes over time.
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 not only color principle (internal only).
Keyboard controls
| Key | Behavior |
|---|---|
| Enter | Enter the chart area/drill down a level on the chart area or a line. |
| Shift+Enter | Drill up a level on a line or a point. |
| Tab | Exit the chart at any time. |
| ←→ | Move among sibling lines or points on a line or point. |
| ↑↓ | Move among points across lines on a line or point. |
| 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)
- Content Resizing, Styling, & Reflow (VIS-1)
- Color Usage (VIS-2)
- Text Alternatives (VIS-3-1)
- No Images of Text (VIS-3-2)