Accessibility in Blazor HeatMap Chart component

2 Apr 20243 minutes to read

The Blazor HeatMap Chart component follows commonly used accessibility guidelines and standards, such as ADA, Section 508, WCAG 2.2 standards, and WCAG roles.

The accessibility compliance for the Blazor HeatMap Chart component is outlined below.

Accessibility Criteria Compatibility
WCAG 2.2 Support Intermediate
Section 508 Support Intermediate
Screen Reader Support Yes
Color Contrast Yes
Mobile Device Support Yes
Axe-core Accessibility Validation Yes
Yes - All features of the component meet the requirement.
Intermediate - Some features of the component do not meet the requirement.
No - The component does not meet the requirement.

WAI-ARIA attributes

Blazor HeatMap Chart component followed the WAI-ARIA patterns to meet the accessibility. The following WAI-ARIA attributes are used in the HeatMap component.

Attributes Purpose
role=img It is specified in the legend and border of the HeatMap. This role is provided to specify the information in a visual manner.
role=region It specifies the HeatMap areas that do not support interactive functions like cell selection.
aria-label Provides an accessible name for the title, legend title, legend item labels, axis labels, cell labels and multilevel labels.

Screen reading in HeatMap

Blazor HeatMap Chart has built-in accessibility features like screen reading. Screen reading in the HeatMap component allows all users, regardless of ability or disability, to use the component. The following HeatMap elements will be read aloud with screen reading software like Narrator for Windows.

Elements Description
Title Reads the contents of the HeatMap chart’s title.
Axis labels Reads the x and y axis labels of the HeatMap chart.
Multilevel labels Reads the multilevel labels in the x and y axis of the HeatMap chart.
Cell labels Reads the labels from the cells in the Heatmap chart.
Legend title Reads the contents of the legend’s title as specified in HeatMap chart.
Legend item label Reads the label of a legend item in HeatMap chart.

Ensuring accessibility

The Blazor HeatMap component’s accessibility levels are ensured through an axe-core software tool during automated testing.

The accessibility compliance of the HeatMap component is shown in the following sample. Open the sample in a new window to evaluate the accessibility of the HeatMap component with accessibility tools.