Accessibility in Blazor Maps Component
4 Nov 20256 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 |  |
| Section 508 Support | |
| Screen Reader Support | |
| Right-To-Left Support | Not Applicable |
| Color Contrast | |
| Mobile Device Support | |
| Keyboard Navigation Support | |
| Axe-core Accessibility Validation | |
- 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.