Accessible chart design

Try the data alternative. Focus View chart data above and press Enter or Space. The table repeats both months with row and column headings; the visible labels also keep the comparison readable when colors are difficult to distinguish.

<DumbbellChart
  aria-label="Survey response coverage by team in June and July 2026"
  heading="Every comparison has a name."
  description="Responses per 100 invited · June → July 2026"
  summary="Design increased from 62 to 88 responses per 100 invited. Support decreased from 81 to 74."
  data={[
    { id: 'design', label: 'Design', reference: 62, value: 88 },
    { id: 'support', label: 'Support', reference: 81, value: 74 }
  ]}
  domain={{ min: 0, max: 100 }}
  referenceLabel="June"
  valueLabel="July"
  showTable
/>

<DumbbellChart
  aria-label="Survey response coverage by team in June and July 2026"
  heading="Every comparison has a name."
  description="Responses per 100 invited · June → July 2026"
  summary="Design increased from 62 to 88 responses per 100 invited. Support decreased from 81 to 74."
  data={[
    { id: 'design', label: 'Design', reference: 62, value: 88 },
    { id: 'support', label: 'Support', reference: 81, value: 74 }
  ]}
  domain={{ min: 0, max: 100 }}
  referenceLabel="June"
  valueLabel="July"
  showTable
/>

• Name the comparison. Supply an aria-label, a visible heading, and a description with the unit and period. Add a factual summary when readers need a written takeaway.
• Keep exact values reachable. Leave showTable enabled. The data disclosure opens with Enter or Space. Only hide it when an equivalent accessible data view is already provided nearby.
• Localize the whole experience. Use labels for messages and data-table headings, and valueLabel, referenceLabel, or targetLabel for the measure names. Elements uses label attributes such as not-available-label and view-data-label.
• Use color deliberately. Categorical tones such as series-1 work across themes. Reserve success, warning, and danger for meaningful status. Pair color with labels or mark shape.
• Match interaction to the chart. Interactive LineChart supports pointer, touch, arrow keys, Home, End, and Escape. Lollipop, dumbbell, and bullet charts expose values directly and through the disclosure; they do not use the line-chart cursor.
• Test the context. Check narrow cards, long labels, dark mode, keyboard navigation, enlarged text, missing measurements, and your largest realistic dataset. Split dense comparisons into focused groups instead of shrinking labels.

Use presentation="bare" when a surrounding Lumen Card already owns the surface. Keep the chart’s name and context available, and let the parent layout own spacing.