Description
Feature Description
Background:
To meet WCAG 3.3.2 (Labels or Instructions) accessibility compliance, all interactive elements should provide clear and descriptive labels or instructions. The calendar component’s header control buttons (such as month selection and view mode selection) currently use aria-label attributes to provide accessible names for assistive technologies.
Current Limitation:
While the use of aria-label helps screen reader users, there are still usability and accessibility gaps:
Sighted users, users with cognitive difficulties, and users unfamiliar with icon-only interfaces may not easily understand the buttons' purposes.
There is no visible label or tooltip on these buttons, making their function unclear for many users.
Proposed Solution:
Enhance the Angular Material calendar component to allow tooltips on header control buttons. These tooltips would display descriptive labels (e.g., “Choose date”, “Next month”) on hover or focus, benefiting all users and further aligning with WCAG 3.3.2.
Benefits:
Improves accessibility and usability for all users, not just those using assistive technology.
Provides visible contextual guidance, reducing confusion for first-time or infrequent users.
Further supports compliance with WCAG 3.3.2 by providing both programmatic (aria-label) and visible (tooltip) labels.
Example:
When the user hovers or focuses on a calendar header control button, a tooltip should appear with an appropriate label for the button’s action.
References:
WCAG 3.3.2: Labels or Instructions
Use Case
No response