Accessibility: Visual Data, Charts, & Graphs

How to create accessible visual data, charts, and graphs

Making charts, graphs, and visual data accessible ensures that all users—including individuals using screen readers, people with low vision, color blindness, or cognitive disabilities—can extract the same insights and values as sighted readers. Data visualizations often present dense information through visual styling like color palettes, spatial layouts, and legend keys, requiring intentional structural and text-based alternatives.

Preliminary considerations for accessible visual data

Before you begin designing or publishing charts and graphs, keep these foundational rules in mind to streamline your workflow and prevent accessibility barriers:

  • Do Not Rely on Graphics Alone: Screen readers cannot parse the visual content inside flattened image files (PNG, JPG, SVG). Always provide an equivalent text summary, data table, or structured transcript alongside complex visualizations.
  • Never Rely Exclusively on Color to Convey Data: Relying solely on color hue differences to distinguish data series or status states creates severe barriers for colorblind users. Always combine color with patterns, shapes, text labels, or distinct line styles.
  • Provide Accessible Data Source Tables: Complex charts with dozens of data points can be overwhelming to describe in alternative text alone. Always provide a native HTML data table directly below or linked adjacent to the visual chart.
  • Maintain Visual Clarity and High Contrast: Ensure all visual markers, trend lines, bar graphics, axis labels, and legend entries meet high contrast requirements against their background and adjacent elements.

Visual data accessibility guidelines

In this page:

  1. Provide Alternative Text & Executive Summaries
  2. Provide Data Tables for Complex Data
  3. Color Contrast & Color Independence
  4. Use Patterns, Labels, & Visual Markers
  5. Axis Labels, Legends, & Typography
  6. Accessible SVG & Interactive Charts

1. Provide Alternative Text & Executive Summaries

Alternative text for visual data must convey the overall takeaway, key trends, and context rather than just a generic title.

  • Summarize key findings in Alt Text: Provide alt text that explains the chart’s purpose and key trend rather than just “Bar chart of sales” (e.g., alt="Bar chart showing HCU enrollment growth from 2020 to 2026, increasing from 3,000 to 4,200 students").
  • Include an Executive Summary for complex charts: For multifaceted dashboards or complex scatter plots, provide a brief paragraph directly preceding or following the chart that outlines the core conclusions and takeaways.
  • Mark decorative background graphics as decorative: If a visual element is purely decorative (e.g., a stylized background grid or decorative bar accent), set alt="" so screen readers ignore it.

2. Provide Data Tables for Complex Data

For charts containing multiple series or dense numeric data, providing an accompanying data table allows assistive technologies to systematically read each data point.

  • Pair graphics with accessible HTML tables: Place a structured <table> immediately beneath the chart or offer a clear jump link (e.g., “View data as a table”).
  • Use proper table markup: Ensure table headers use <th> elements with explicit scope="col" or scope="row" attributes so screen reader users maintain context while navigating cells.
  • Keep table formatting simple: Avoid merged or split cells in your data table, which break grid navigation for screen readers.

3. Color Contrast & Color Independence

Charts must remain fully readable for users with visual impairments or color vision deficiencies (such as red-green or blue-yellow colorblindness).

  • Ensure high contrast for data elements: Bars, pie segments, line graphs, and text labels must meet a minimum contrast ratio of 4.5:1 against the background.
  • Do not rely on color alone to differentiate data: Never distinguish bar chart series or pie slices using color differences alone. Use distinct visual treatments alongside color.
  • Adhere to HCU brand standards: Utilize high-contrast palettes from the official HCU Brand guidelines.

4. Use Patterns, Labels, & Visual Markers

Adding non-color visual indicators makes data series immediately distinguishable to all users regardless of color perception.

  • Apply textures and patterns: Use cross-hatching, stripes, dots, or distinct textures inside pie slices and bar charts.
  • Use unique line styles and point markers: For line charts, vary line styles (dashed, solid, dotted) and use distinct shape markers (circles, squares, triangles) at data points.
  • Use direct labeling: Place text labels directly on or next to data series, lines, or pie slices rather than relying exclusively on a separate color-coded legend key.

5. Axis Labels, Legends, & Typography

Clear typography and positioning ensure that labels, keys, and values are effortless to scan and read.

  • Keep text orientation horizontal: Avoid vertical or rotated text for axis labels or data values, which causes severe reading difficulty for users with low vision or cognitive impairments.
  • Define scale and units explicitly: Clearly state measurement units (e.g., “In thousands,” “Percentages (%)”) on axis titles and legends.
  • Maintain legible font sizes: Ensure all label, legend, and axis text is at least 12px–14px and written in a clean sans-serif font like Arial or Verdana.

6. Accessible SVG & Interactive Charts

When using dynamic, web-based charting libraries (such as Highcharts, D3.js, or inline SVG graphics), interactive elements must support screen readers and keyboard navigation.

  • Add role and accessibility titles to SVGs: Set role="img" on SVG elements, and include a <title> and <desc> tag mapped with aria-labelledby.
  • Ensure keyboard focusability for interactive points: If chart elements are clickable (e.g., tooltips on hover/focus), ensure data points can be focused via Tab and activated with Enter/Space.
  • Expose tooltips programmatically: Tooltips that show values on hover must also be announced to screen readers using ARIA live regions (aria-live="polite") or accessible popups.

Learn more about creating accessible content

Guidelines for Documents, Multimedia, Email, Canvas, Charts & Graphs, and Forms.