Smart.Scheduler 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.

Smart.Scheduler provides a built-in compliance with WAI-ARIA specification via attributes like role, aria-label, aria-controls, aria-haspopup and others.

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.

Smart.Scheduler contains a grid like structure of rows and columns with cells. As such the role of the component is "grid". It also uses other custom components that provide their own ARIA attributes, for example the Button, ScrollBar, Tooltip, Window.

The following ARIA attributes are used inside the Smart.Scheduler:

  • aria-disabled - indicates that interaction with the Smart.Scheduler is disabled.
  • aria-controls - applied to the header navigation controls and Smart.Scrollbar components inside the Smart.Scheduler, indicates that those components control the behavior of the element. The header controls are by default visible and can trigger a popup menu to appear. The Scrollbars control the view aria of the Scheduler and allow to scroll through it.
  • aria-valuemax - applied to the ScrollBars inside the Scheduler to determine their maximal scroll value.
  • aria-valuemin - applied to the ScrollBars inside the Scheduler to determine their minimal scroll value.
  • aria-valuenow - applied to the ScrollBars inside the Scheduler to determine their current scroll value.
  • aria-owns - indicates the functional and contextual relationship between the editor window and the Scheduler. Since the window is not part of the Scheduler's template hierarchy it is neccessary to use this attribute to define it's parent owner.
  • aria-label - Smart.Scheduler contains many controls that provide visual feedback and as such they have their current value set via an attribute. Such controls are the header buttons for current date selection, date navigation, the event item delete button, view navigation buttons, current time indicator and other.
  • aria-labelledby - identifies the elements that label the input controls inside the window editor of the Scheduler.
  • aria-haspopup - indicates that an element can trigger a popup. Such elements are the event collectors which trigger the event menu with the event items that are gathered or the view cells which can trigger a context menu.
  • aria-level - indicates to assistive technologies that the header section of the Scheduler should be treated like a heading. The header is level 1 which means that it is the main heading of the element.

In addition to the WAI-ARIA attributes the template of the Smart.Scheduler is constructed as such that the assistive tehnologies can read the important sections and provide the needed feedback to the users by hiding the non-important elements like containers and wrappers.

Keyboard Support

Smart.Scheduler has a full set of keyboard keys that are mapped to different actions. Including:

  • Cell navigation - navigation between cells horizontally and vertically.
  • Cell selection - cells are selected when navigated to. Multiple selection is also available.
  • Event navigation - events are focusable and when focused the window editor or event menu can be opened via the Enter key.
  • Opening/Closing menus and windows - the Scheduler Window and all menus can be opened or closed when the appropriate target is focused.
  • Event delete - events can be deleted via a single key press.
  • Event create - events can be created via the Window Editor when a cell or a range of cells is selected.
  • Window positioning - Scheduer Window's position can be changed via the keyboard keys when focused.
  • Menu item navigation - the Scheduler menus that contain items allow to navigate through them via the keyboard arrows.
  • Calendar date navigation - the Sheduler Calendar posiitoned inside the Date Menu has full keyboard support as well.
  • Canceling dragging/resizing operations - the dragging and resizing operations of an event can be canceled via a single key press.
  • Undo/Redo Event actions - delete/insert/update actions can be undone or redone.
  • Copy/Cut/Paste events - focused events can be copied/cut in order to be duplicated/moved to another view cell. The browser clipboard is also updated with details regarding the target event.

Keyboard key actions are disabled if the Smart.Scheduler is disabled or readonly.

Here's the complete list of Smart.Scheduler keyboard implementation:

Key Action
Escape When dragging/resizing pressing the 'Escape' key will cancel the ongoing operation and return the target event to it's original state. The 'Escape' key can also close the Scheduler Windows and Menus if focused.
Tab Pressing Tab will change the focus to another focusable element. Smart.Scheduler has many focusable elements - the date,view selectors, the events inside the Timeline, the Timeline itself wihch allows to navigate through the cells, the Scheduler Window and it's editors, the Event/cell menu.
Arrow Up/Down/Left/Right When the Scheduler Timeline is focused these keys allow to navigate through the cells by selecting them.
Shift + Arrow Up/Down/Left/Right When the Scheduler Timeline is focused the Shift + Arrow combination allows to create a range selection of multiple cells in the direciton of the arrow pressed.
Shift + Mouse Left Click If a cell is selected, pressing Shift + Mouse Click on another cell allows to create a range selection from the initialy selected cell to the click target.
Enter Allows to open one of the Menus/Windows of the Smart.Scheduler. This can happen if an event or cell, or date/view selector is currently focused. If multiple cells are selected pressing Enter will open the Window to create a new event from the selection range.
Delete When an Event is focused this key allows to remove the Event form the Smart.Scheduler. The action can be canceled. Check the API of the element on the website for more details.
D The default shortcut key for the 'Day' view. When the view selector is focused, pressing this key will change the view to 'Day'. This shortcut can be customized. Check the API on the website for more details.
W The default shortcut key for the 'Week' view. When the view selector is focused, pressing this key will change the view to 'Week'. This shortcut can be customized. Check the API on the website for more details.
M The default shortcut key for the 'Month' view. When the view selector is focused, pressing this key will change the view to 'Month'. This shortcut can be customized. Check the API on the website for more details.
A The default shortcut key for the 'Agenda' view. When the view selector is focused, pressing this key will change the view to 'Agenda'. This shortcut can be customized. Check the API on the website for more details.
T + D The default shortcut key combination for the 'Timeline Day' view. When the view selector is focused, pressing this key combo will change the view to 'Timeline Day'. This shortcut can be customized. Check the API on the website for more details.
T + W The default shortcut key combination for the 'Timeline Week' view. When the view selector is focused, pressing this key combo will change the view to 'Timeline Week'. This shortcut can be customized. Check the API on the website for details.
T + W The default shortcut key combination for the 'Timeline Month' view. When the view selector is focused, pressing this key combo will change the view to 'Timeline Month'. This shortcut can be customized. Check the API on the website for details.
Control + C Copies the currently focused Scheduler event in order to create a duplicate in another view cell. It also copies the general attributes of the event (id, label, description, dateStart, dateEnd, allDay, repeat, notifications) to the clipboard. This allows to paste the info about the event outside of the Smart.Scheduler.
Control + V Paste the currently copied Scheduler event inside a view cell. As a result a duplicate event will be created in the target cell.
Control + X Cut the currently focused Scheduler event in order to move it to another view cell. It also copies the general attributes of the event (id, label, description, dateStart, dateEnd, allDay, repeat, notifications) to the clipboard. This allows to paste the info about the event outside of the Smart.Scheduler.
Control + Y Redo the next event operation from the redo/undo history. Actions that can be undone or redone are event delete/insert/update.
Control + Z Undo the last event operation. Actions that can be undone or redone are event delete/insert/update.