Accessibility

1. Overview

The Camms.Risk Incident application components are developed to comply with the Web Content Accessibility Guidelines (WCAG) 2.1 and WAI-ARIA. As per these guidelines, in order to make the application content more accessible and user friendly for users with cognitive and sensory impairments, several mechanisms have been adopted enabling all users to easily interact and carry out application functions.

In accordance with these guidelines, the application components include support for:

  • WAI-ARIA Support

  • Keyboard Shortcuts

  • Right to Left Languages

  • High Contrast Themes

  • Charts

Note: For more information on the level of compliance of each component, please visit https://docs.telerik.com/kendo-ui/accessibility/section-508-wcag.

2. WAI-ARIA Support

WAI-ARIA enables the web content to be more accessible by supporting assistive technologies such as on-screen readers. The design patterns stated in https://www.w3.org/TR/wai-aria-practices/#aria_ex are closely followed to ensure that all widgets are WAI-ARIA compliant.

Note: In dropdown lists, the index of the selected option number will be announced by the screen reader only when the dropdown list is in an expanded state.

3. Keyboard Shortcuts

Keyboard shortcuts enables disabled users to conveniently interact with the application via an elementary source. Given below are the relevant key combinations to access each component.

3.1 Autocomplete

Key

Action

Key

Action

Access key + w

Focus the widget

Up arrow

Highlights previous item

Down arrow

Highlights next item / opens popup if value is set

Page up

Scrolls the popup up

Page down

Scrolls the popup down

Enter

Selects highlighted item

Esc

Closes the popup / clears value if popup is not opened

3.2 Breadcrumb

Key

Action

Key

Action

Alt+ w

Focuses the editable breadcrumb

Enter

  • When focused and if the breadcrumb is editable:  triggers edit mode

  • When focused and if the breadcrumb is navigational: Navigates to the URL

  • When in edit mode: saves the changes, exits edit mode and focuses the root item

Tab

When the widget is focused, navigates through the items

Esc

Exits edit mode without saving the changes

3.3 Buttons

Key

Action

Key

Action

Alt + w

Focuses the first button (clicking on it or tabbing will also work)

Enter + spacebar

Trigger click event

3.4 Button Group

Key

Action

Key

Action

Alt+ w

Focuses the first button of the Button Group

Shift + tab

Highlights button to the left

Tab

Highlights button to the right

Left arrow

Highlights button to the left

Right arrow

Highlights button to the right

Enter or spacebar

Trigger select event

3.5 Calendar

Key

Action

Key

Action

Alt+ w

Focuses the widget

Left arrow

Highlights previous day

Right arrow

Highlights next day

Up arrow

Highlights same day from the previous week

Down arrow

Highlights same day from the next week

Ctrl + left arrow

Navigates to previous month

Ctrl + right arrow

Navigates to next month

3.6 Colourpicker

Simple Selector

Key

Action

Key

Action

Access key + s

Focuses the simple selector

Enter / down arrow

Opens the popup (when the popup is closed)

Left arrow

Selects previous colour

Right arrow

Selects next colour

HSV Selector

Key

Action

Key

Action

Access key + h

Focuses the HSV selector

Enter / down arrow

Opens the popup (when the popup is closed)

Left arrow

Update saturation/value in the big rectangle

Right arrow

Update saturation/value in the big rectangle

Ctrl + left/right arrow

Update hue slider

Ctrl + up/down arrow

Update opacity slider (when opacity is present)

Shift

Hold shift for fine-tuning

Enter

Select current colour

Esc

Cancel the selection

3.7 Combo Box

Key

Action

Key

Action

Alt + w

Focuses the widget

Up arrow

Highlights previous item

Down arrow

Highlights next item

Home

Highlights first item

End

Highlights last item

Page up

Scrolls the popup up

Page down

Scrolls the popup down

Enter

Selects highlighted item

Esc

Closes the popup / clears value if popup is not opened

Alt + down arrow

Opens the popup

Alt + up arrow

Closes the popup

3.8 Checkbox group

Key

Action

Key

Action

Access key + w

Focuses first checkbox in the group

Tab

Focuses next item

Shift + tab

Focuses previous item

Spacebar

Select/deselect item

3.9 DateInput

Key

Action

Key

Action

Access key + w

Focuses the widget

Left arrow

Highlights previous day part

Right arrow

Highlights next day part

Up arrow

Increase current date part

Down arrow

Decrease current date part

Spacebar

Highlights next day part

Delete, backspace

Clears current date part

Mouse wheel rotated up

Increase current date part

Mouse wheel rotated down

 

3.10 DatePicker

Key

Action

Key

Action

Access key + w

Focuses the widget

Closed popup

Key

Action

Key

Action

Esc

Closes the popup

Alt + down arrow

Opens the popup

Alt + up arrow

Closes the popup

Opened popup

Key

Action

Key

Action

Left arrow

Highlights previous day

Right arrow

Highlights next day

Up arrow

Highlights same day from the previous week

Down arrow

Highlights same day from the next week

Ctrl + left arrow

Navigates to previous month

Ctrl + right arrow

Navigates to next month

Ctrl + up arrow

Navigates to previous view

Ctrl + down arrow

Navigates to next view

Home

Highlights first day of the month

End

Highlights last day of the month

Enter

If in 'month' view selects the highlighted day. In other views navigates to a lower view

3.11 DateRangePicker

Key

Action

Key

Action

Access key + w

Focuses the widget

Closed popup

Key

Action

Key

Action

Access key + w

Focuses the widget

Enter

Triggers change event

Esc

Closes the popup

Alt + down arrow

Opens the popup

Alt + up arrow

Closes the popup

Opened popup

Key

Action

Key

Action

Left arrow

Highlights previous day

Right arrow

Highlights next day

Up arrow

Highlights same day from the previous week

Down arrow

Highlights same day from the next week

Shift + arrow

Performs range selection

Ctrl + left arrow

Navigates to previous set of views

Ctrl + right arrow

Navigates to next set of views

Ctrl + up arrow

Navigates to previous view

Ctrl + down arrow

Navigates to next view

Home

Highlights first day of the month

End

Highlights last day of the month

3.12 DateTimePicker

Key

Action

Key

Action

Access key + w

Focuses the widget

Closed popup

Key

Action

Key

Action

Enter

Triggers change event

Esc

Closes the popup

Alt + down arrow

Toggles popups

Alt + up arrow

Closes the opened popup

Opened popup

Key

Action

Key

Action

Left arrow

Highlights previous day

Right arrow

Highlights next day

Up arrow

Highlights same day from the previous week

Down arrow

Highlights same day from the next week

Ctrl + left arrow

Navigates to previous month

Ctrl + right arrow

Navigates to next month

Ctrl + up arrow

Navigates to previous view

Ctrl + down arrow

Navigates to next view

Home

Highlights first day of the month

End

Highlights last day of the month

Enter

If in 'month' view selects the highlighted day. In other views navigates to a lower view

Opened popup (Time view)

Key

Action

Key

Action

Up arrow

Selects previous available time

Down arrow

Selects next available time

3.13 Dialog

Key

Action

Key

Action

Access key + w

Focuses the dialog

Esc

Closes the dialog.

Enter / spacebar

Triggers the focused action and the close button, if focused

3.14 Drawer

Key

Action

Key

Action

Access key + w

Focuses the widget

Up arrow

Focuses previous item

Down arrow

Focuses next item

Spacebar / enter

Selects item

Home

Focuses first item

End

Focuses last item

Esc

Calls the hide method of the drawer

Up arrow

Selects previous available time

Down arrow

Selects next available time

3.15 DropDownList

Key

Action

Key

Action

Access key + w

Focuses the widget

Up arrow / left arrow

Highlights previous item

Down arrow / right arrow

Highlights next item

Home

Selects first item in the list

End

Selects last item in the list

Page up

Scrolls the popup up

Page down

Scrolls the popup down

Enter

Selects highlighted item

Esc

Closes the popup

Alt + down arrow

Opens the popup

Spacebar

Opens the popup/selects highlighted item

Alt + up arrow

Closes the popup

3.16 DropDownTree

Key

Action

Key

Action

Access key + w

Closed – focuses the widget

Closed popup

Key

Action

Key

Action

Left arrow

Highlights previous selected item

Right arrow

Highlights next selected item</