Build your web apps using Smart UI
Smart.Calendar - Accessibility
Calendar provides a built-in compliance with WAI-ARIA specification. This is achieved through attributes like role, aria-label, aria-disabled and others. They are applied to the corresponding elements inside the template of the components. The role of the Calendar component is 'dialog' and is applied to the element itself.
The purpose of the ARIA attributes is to help disabled people by providing the information specific to the component to assistive technology in the screen readers. The following ARIA attributes are available in the Calendar component:
- aria-disabled - indicates that the interaction with the Calendar is disabled.
- aria-label - labels the buttons for the month/year navigation in the header to make them recognizable.
- aria-hidden - indicates that some of the elements like the arrows of the navigation buttons do not take part in the interaction with the Calendar and will not be mapped to the accessibility API.
- aria-selected - indicates the current selected state of the days in the Calendar.
- aria-current - Used to indicate the today date of the Calendar which is always highlighted regardless of the selection.
- aria-multiselectable - indicates that the user may select more than one item from the selectable descendants. In practices, it is used to indicate that each month of the Calendar can have more than one selected date.
role - indicates the role of an control that is part of the template of the Calednar. It allows tools to present and support interaction with them in a matter that is consistent with user expectations about the elements of that type. The Calendar component contains many roles depending on the purpose of the container, for example
- button - the months/years that are displayed for selection when the display mode is not "month".
- heading - the header of the Calendar that contains the navigation buttons.
- grid - each month container that contains the weeks and days of the Calendar.
- columnheader - the title of each day of the week ("Monday", "Tuesday", etc).
- rowheader - the number of the week.
- gridcell - the day of a week in a month.
Smart Elements provide keyboard interaction for most of the components. This functionality is enabled when an element is not disabled.
The following keyboard shortcuts are available to interact with the Calendar:
|Arrow Up / Arrow Down||Navigate to previous/next date of the month.|
|Arrow Left / Arrow Right||Navigate to the previous/next date.|
|Home||Navigate to the first date in the current view.|
|End||Navigate to the last date in the current view.|
|Page Up||Navigate to the current date from the next month/year/decade.|
|Page Down||Navigate to the current date from the previous month/year/decade.|
|Space / Enter||Selects / Unselects a date depending on the selection mode.|
|Shift + Arrow Up/Down/Left/Right||Allows to select more than one date when the selection mode is 'default'.|
Additional information on WAI-ARIA for the SMART Framework can be found here.