Accessibility in Blazor Calendar Component
29 Nov 20245 minutes to read
The web accessibility makes web content and web applications more accessible for disabled people. It especially helps in dynamic content change and development of advanced user interface components with AJAX, HTML, JavaScript, and related technologies.
The Blazor Calendar component followed the accessibility guidelines and standards, including ADA, Section 508, WCAG 2.2 standards, and WCAG roles that are commonly used to evaluate accessibility.
The accessibility compliance for the Blazor Calendar component is outlined below.
| Accessibility Criteria | Compatibility |
|---|---|
| WCAG 2.2 Support |  |
| Section 508 Support | |
| Screen Reader Support |  |
| Right-To-Left Support | |
| 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
Blazor Calendar provides built-in compliance with WAI-ARIA specifications. WAI-ARIA support is achieved through attributes like aria-label, aria-selected, aria-disabled, and aria-activedescendant applied for navigation buttons, and disable and active day cells.
It helps disabled persons by providing information about the widget for assistive technology in the screen readers. Calendar component contains grid role and grid cell for each day cell.
-
aria-label: Provides text labels for an object for the previous and next month’s elements. It helps the screen reader object to read.
-
aria-selected: Indicates the currently selected date of the Calendar component.
-
aria-disabled: Indicates the disabled state of the Calendar component.
-
aria-activedescendent: Helps in managing the current active child of the Calendar component.
-
role: Gives information to assistive technologies about how to handle each element in a widget.
-
grid-cell: Defines the individual cell that can be focused and selected.
Keyboard interaction
You can use the following keys to interact with the Calendar. This control implements keyboard navigation support by following the WAI-ARIA practices.
It supports the following list of shortcut keys:
| Keys | Description |
|---|---|
| Upper Arrow | Focuses the same day of the previous week. |
| Down Arrow | Focuses the same day of the next week. |
| Left Arrow | Focuses the previous day. |
| Right Arrow | Focuses the next day. |
| Home | Focuses the first day of the month. |
| End | Focuses the last day of the month. |
| Page Up | Focuses the same date of the previous month. |
| Page Down | Focuses the same date of the next month. |
| Enter | Selects the currently focused date. |
| Shift + Page Up | Focuses the same date for the previous year. |
| Shift + Page Down | Focuses the same date for the next year. |
| Control + Upper Arrow | Moves to the inner level of view like month to year and year to decade. |
| Control + Down Arrow | Moves out from the depth level view like decade to year and year to month. |
| Control + Home | Focuses the first date of the current year. |
| Control + End | Focuses the last date of the current year. |
Ensuring accessibility
The Blazor Calendar component’s accessibility levels are ensured through an axe-core software tool during automated testing.
The accessibility compliance of the Calendar component is shown in the following sample. Open the sample in a new window to evaluate the accessibility of the Calendar component with accessibility tools.