How can I help you?
Accessibility in Blazor Maps Component
17 Feb 20266 minutes to read
The Blazor Maps component adheres to widely adopted accessibility guidelines and standards, including ADA, Section 508, WCAG 2.2, and WAI-ARIA roles.
The accessibility compliance for the Blazor Maps component is summarized below.
| Accessibility Criteria | Compatibility |
|---|---|
| WCAG 2.2 Support | AA |
| Section 508 Support |  |
| Screen Reader Support | |
| Right-To-Left Support | Not Applicable |
| Color Contrast | |
| Mobile Device Support | |
| Keyboard Navigation Support | |
- All features of the component meet the requirement.
- Some features of the component do not meet the requirement.
- The component does not meet the requirement.WAI-ARIA attributes
To meet accessibility standards, the Blazor Maps component adheres to WAI-ARIA patterns. The following WAI-ARIA attributes are used in the Maps component:
| Attributes | Purpose |
|---|---|
role=region |
Identifies map areas that do not support interactive functions such as selection and highlighting. |
role=button |
Identifies map areas where interactive functions such as selection and highlighting are available. |
aria-label |
Provides accessible names for map elements including geometric shapes, title, subtitle, legend title, legend item labels, and data labels. See the next section for details. |
Screen reading in Maps
Accessibility in the Blazor Maps component ensures compatibility with screen readers. The following map elements are announced by screen readers such as Narrator on Windows.
| Elements | Description |
|---|---|
| Shapes in the layer | Announces the names of the geographical shapes (such as countries, states, and regions) displayed on the map. |
| Title | Announces the map title. |
| Subtitle | Announces the subtitle that appears below the main title. |
| Legend title | Announces the legend title as configured in the map. |
| Legend item label | Announces the label of each legend item. |
| Data label | Announces the label specified for shapes in the map layer. |
| Annotation | Announces the content defined in the annotation. |
| Marker template | Announces the content provided in the marker template. |
| Tooltip template | Announces the content provided in the tooltip template. |
| Data label template | Announces the content provided in the data label template. |
Keyboard Navigation
All Blazor Maps actions can be controlled using the keyboard. The following key combinations apply to the available UI interactions.
| Windows | Mac | Description |
|---|---|---|
| Tab | Tab | Moves focus to the next focusable element on the map, such as the legend or a shape. |
| Shift + Tab | ⇧ + Tab | Moves focus to the previous focusable element on the map, such as the legend or a shape. |
| + | + | Performs zoom in when zooming is enabled. |
| - | - | Performs zoom out when zooming is enabled. |
| ← | ← | When zoomed in, scrolls the map to the left. |
| → | → | When zoomed in, scrolls the map to the right. |
| ↑ | ↑ | When zoomed in, scrolls the map upward. |
| ↓ | ↓ | When zoomed in, scrolls the map downward. |
| R | R | Performs reset when zooming is enabled. |
| Enter | Enter | Navigates through legend items and confirms selection when focusing a shape. |
Ensuring accessibility
Accessibility compliance for the Blazor Maps component is validated using axe-core software tool during automated testing.
The component’s accessibility compliance is demonstrated in the following sample. Open the sample in a new window to evaluate the component with accessibility tools.