Accessibility Features

Make your charts accessible to all users, including those using assistive technologies

Accessibility Features

Highcharts includes comprehensive accessibility features to ensure your charts can be understood and navigated by users with disabilities, including those using screen readers, keyboard navigation, and other assistive technologies.

Overview

The Accessibility module (from ts/Accessibility/Accessibility.ts:84-96) provides:

• Screen reader support
• Keyboard navigation
• High contrast mode
• Sonification (audio representation)
• WCAG 2.1 compliance features

Setup

The accessibility module is included by default in Highcharts. No additional imports are needed:

Highcharts.chart('container', {
  accessibility: {
    enabled: true  // Enabled by default
  },
  // Chart configuration
});

Screen Reader Support

Basic Configuration

From the accessibility sample (samples/highcharts/accessibility/accessible-bar/demo.js:1-52):

Highcharts.chart('container', {
  chart: {
    type: 'bar'
  },
  title: {
    text: 'Desktop screen readers'
  },
  caption: {
    text: 'Basic bar chart demo'
  },
  xAxis: {
    type: 'category'
  },
  series: [{
    name: 'Percentage usage',
    data: [
      {
        name: 'JAWS',
        y: 30.2,
        accessibility: {
          description: 'This is the most used desktop screen reader'
        }
      },
      {
        name: 'NVDA',
        y: 14.6
      },
      {
        name: 'VoiceOver',
        y: 7.6
      }
    ]
  }]
});

Chart Description

Provide context for screen reader users:

{
  accessibility: {
    description: 'A detailed chart showing quarterly sales data for 2024, ' +
                 'with significant growth in Q3 reaching $2.5 million.',
    
    screenReaderSection: {
      beforeChartFormat: '<div>Chart showing {chartTitle}</div>',
      afterChartFormat: '<div>End of interactive chart. {/div}',
      beforeRegionLabel: 'Chart region',
      afterRegionLabel: ''
    }
  }
}

Point Descriptions

Add detailed descriptions to individual data points:

{
  series: [{
    data: [
      {
        y: 100,
        name: 'Q1',
        accessibility: {
          description: 'First quarter showed strong performance with ' +
                       '15% growth over previous year'
        }
      },
      {
        y: 150,
        name: 'Q2',
        accessibility: {
          description: 'Second quarter exceeded expectations'
        }
      }
    ]
  }]
}

Series Descriptions

{
  series: [
    {
      name: 'Revenue',
      accessibility: {
        description: 'Total revenue across all product lines',
        exposeAsGroupOnly: false,
        keyboardNavigation: {
          enabled: true
        }
      },
      data: [29.9, 71.5, 106.4]
    },
    {
      name: 'Costs',
      accessibility: {
        description: 'Operating costs including overhead'
      },
      data: [20, 45, 70]
    }
  ]
}

Keyboard Navigation

Enable and Configure

1. Basic Keyboard Navigation

   Enable keyboard navigation:

   {
     accessibility: {
       keyboardNavigation: {
         enabled: true,
         focusBorder: {
           enabled: true,
           hideBrowserFocusOutline: true,
           style: {
             color: '#335cad',
             lineWidth: 2,
             borderRadius: 3
           },
           margin: 2
         }
       }
     }
   }
   
2. Navigation Order

   Control the order of keyboard navigation:

   {
     accessibility: {
       keyboardNavigation: {
         order: [
           'series',
           'zoom',
           'rangeSelector',
           'legend',
           'chartMenu'
         ],
         wrapAround: true  // Wrap to start after reaching end
       }
     }
   }
   
3. Series Navigation

   Configure how users navigate between series:

   {
     accessibility: {
       keyboardNavigation: {
         seriesNavigation: {
           mode: 'normal',  // or 'serialize', 'smart'
           skipNullPoints: true,
           pointNavigationEnabledThreshold: 500
         }
       }
     }
   }
   

Keyboard Shortcuts

Default keyboard navigation:

• Tab: Navigate between chart elements
• Arrow keys: Navigate between data points
• Enter/Space: Activate drilldown or click events
• Esc: Reset zoom or exit drilldown
• Page Up/Down: Navigate between series

High Contrast Mode

Automatic High Contrast Detection

Highcharts automatically detects Windows High Contrast Mode:

{
  accessibility: {
    highContrastMode: 'auto'  // or true, false
  }
}

High Contrast Theme

Apply a pre-built high contrast theme:

import HighContrastLight from 'highcharts/themes/high-contrast-light';
import HighContrastDark from 'highcharts/themes/high-contrast-dark';

// Apply theme
HighContrastLight(Highcharts);

Highcharts.chart('container', {
  // Chart configuration
});

Announcements for Dynamic Updates

Live Region Announcements

{
  accessibility: {
    announceNewData: {
      enabled: true,
      minAnnounceInterval: 1000,
      interruptUser: false,
      announcementFormatter: function (allSeries, newSeries, newPoint) {
        if (newPoint) {
          return 'New data point: ' + newPoint.category + ', ' + newPoint.y;
        }
        if (newSeries) {
          return 'New series added: ' + newSeries.name + ' with ' +
                 newSeries.points.length + ' data points.';
        }
        return 'Chart updated.';
      }
    }
  }
}

Accessibility Language Options

Customize Screen Reader Text

{
  lang: {
    accessibility: {
      chartContainerLabel: 'Interactive chart. {title}',
      chartTypes: {
        barSingle: 'Bar chart with {numPoints} bar',
        barMultiple: 'Bar chart with {numSeries} series',
        lineSingle: 'Line chart with {numPoints} data points',
        lineMultiple: 'Line chart with {numSeries} lines'
      },
      axis: {
        xAxisDescriptionSingular: 'The chart has 1 X axis displaying {names}.',
        yAxisDescriptionSingular: 'The chart has 1 Y axis displaying {names}.',
        timeRangeDays: '{range} days',
        timeRangeHours: '{range} hours'
      },
      series: {
        summary: {
          'default': '{name}, series {ix} of {numSeries} with {numPoints} data points.',
          'line': '{name}, line {ix} of {numSeries} with {numPoints} data points.',
          'pie': '{name}, pie {ix} of {numSeries} with {numPoints} slices.'
        }
      },
      drillUpButton: '{buttonText}',
      legend: {
        legendLabel: 'Chart legend: {legendTitle}',
        legendItem: 'Show {itemName}'
      }
    }
  }
}

Linked Descriptions

Link to external descriptions:

<div id="chart-description">
  <h3>Chart Summary</h3>
  <p>This chart shows revenue trends over the past year...</p>
</div>

<div id="container"></div>

{
  accessibility: {
    linkedDescription: '*[data-description]',
    // Or use element ID
    // linkedDescription: '#chart-description'
  }
}

Components

The accessibility module includes several components (from ts/Accessibility/Accessibility.ts:166-193):

{
  accessibility: {
    // Container component
    landmarkVerbosity: 'all',  // or 'one', 'disabled'
    
    // Series component
    point: {
      descriptionFormatter: function (point) {
        return point.name + ': ' + point.y;
      },
      valueDecimals: 2,
      valuePrefix: '$',
      valueSuffix: ' USD'
    },
    
    // Zoom component
    rangeDescription: 'Range: {range}',
    
    // Legend component  
    legend: {
      enabled: true
    }
  }
}

ARIA Attributes

Highcharts automatically adds appropriate ARIA attributes:

{
  accessibility: {
    // SVG element gets role="img"
    typeDescription: 'Interactive chart',
    
    // Custom ARIA labels
    point: {
      descriptionFormatter: function (point) {
        return point.name + ', ' + point.y + ' units';
      }
    }
  }
}

Testing Accessibility

Screen Reader Testing

Recommended Screen Readers

• Windows: NVDA (free), JAWS
• macOS: VoiceOver (built-in)
• Linux: Orca
• Mobile: TalkBack (Android), VoiceOver (iOS)

Keyboard Testing

// Test keyboard navigation
{
  accessibility: {
    keyboardNavigation: {
      enabled: true
    }
  }
}

Test checklist:

• Can you reach all interactive elements with Tab?
• Can you navigate data points with arrow keys?
• Can you activate drilldown with Enter/Space?
• Does Esc reset zoom or exit drilldown?

Compliance

WCAG 2.1 Level AA

Highcharts aims for WCAG 2.1 Level AA compliance:

{
  accessibility: {
    enabled: true,
    
    // Keyboard accessible
    keyboardNavigation: {
      enabled: true
    },
    
    // Perceivable
    description: 'Detailed chart description',
    
    // Sufficient color contrast
    highContrastMode: 'auto'
  },
  
  // Color contrast for text
  chart: {
    style: {
      color: '#333',  // Ensure 4.5:1 contrast ratio
      fontSize: '16px'  // Minimum readable size
    }
  }
}

Best Practices

Accessibility Guidelines

• Always provide meaningful chart titles and descriptions
• Use descriptive axis labels
• Ensure sufficient color contrast (4.5:1 minimum)
• Don’t rely solely on color to convey information
• Add point descriptions for complex data
• Test with actual screen readers
• Enable keyboard navigation
• Consider sonification for data trends
• Provide data tables as alternative format

Common Pitfalls

• Missing or vague chart descriptions
• Insufficient color contrast
• Disabled keyboard navigation
• Too many data points without grouping
• Complex charts without additional context
• Interactive features not keyboard accessible
• No alternative text for images in tooltips

Complete Accessible Chart Example

Highcharts.chart('container', {
  accessibility: {
    enabled: true,
    description: 'Bar chart showing desktop screen reader usage, ' +
                 'with JAWS being the most popular at 30.2%',
    keyboardNavigation: {
      enabled: true,
      focusBorder: {
        enabled: true,
        style: {
          color: '#335cad',
          lineWidth: 2
        }
      }
    },
    announceNewData: {
      enabled: true
    },
    point: {
      valueDecimals: 1,
      valueSuffix: '%'
    },
    landmarkVerbosity: 'all'
  },
  chart: {
    type: 'bar'
  },
  title: {
    text: 'Desktop Screen Reader Usage',
    style: {
      fontSize: '18px',
      color: '#333'
    }
  },
  caption: {
    text: 'Source: WebAIM Screen Reader Survey'
  },
  xAxis: {
    type: 'category',
    title: {
      text: 'Screen Reader'
    }
  },
  yAxis: {
    title: {
      text: 'Percentage of Users'
    }
  },
  series: [{
    name: 'Percentage usage',
    colorByPoint: true,
    accessibility: {
      description: 'Percentage of users for each screen reader'
    },
    data: [
      {
        name: 'JAWS',
        y: 30.2,
        accessibility: {
          description: 'JAWS: 30.2%, most widely used'
        }
      },
      {
        name: 'NVDA',
        y: 14.6,
        accessibility: {
          description: 'NVDA: 14.6%, popular free option'
        }
      },
      {
        name: 'VoiceOver',
        y: 7.6,
        accessibility: {
          description: 'VoiceOver: 7.6%, built into macOS'
        }
      }
    ]
  }]
});

Related Resources

• Sonification
• Keyboard Navigation Documentation
• WCAG 2.1 Guidelines
• Tooltips and Data Labels