Accessibility
- amani imtiyas
- Paul Angelo (Unlicensed)
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 |
|---|---|
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 |
|---|---|
Alt+ w | Focuses the editable breadcrumb |
Enter |
|
Tab | When the widget is focused, navigates through the items |
Esc | Exits edit mode without saving the changes |
3.3 Buttons
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 |
|---|---|
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 |
|---|---|
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 |
|---|---|
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 |
|---|---|
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 |
|---|---|
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 |
|---|---|
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 |
|---|---|
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 |
|---|---|
Access key + w | Focuses the widget |
Closed popup
Key | Action |
|---|---|
Esc | Closes the popup |
Alt + down arrow | Opens the popup |
Alt + up arrow | Closes the popup |
Opened popup
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 |
|---|---|
Access key + w | Focuses the widget |
Closed popup
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 |
|---|---|
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 |
|---|---|
Access key + w | Focuses the widget |
Closed popup
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 |
|---|---|
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 |
|---|---|
Up arrow | Selects previous available time |
Down arrow | Selects next available time |
3.13 Dialog
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 |
|---|---|
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 |
|---|---|
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 |
|---|---|
Access key + w | Closed – focuses the widget |
Closed popup
Key | Action |
|---|---|
Left arrow | Highlights previous selected item |
Right arrow | Highlights next selected item</ |