Calendar Accessibility

Accesibility Attributes

Web accessibility makes web content and web applications more accessible to disabled people. It's especially helpful in dynamic content changes and development of advanced user interface components with HTML, Javascript and related technologies. Smart HTML elements framework offers full accessibility support for it's web components.

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.

Keyboard Interaction

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:

Key Action
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.