WCAG Accessibility Compliance - 3rd Party Controllers

Owned by Imasha Karunanayake
Last updated: Aug 18, 2023
5 min read

As Phase 3 is completed and currently in testing, Camms is planning on achieving 100% compliance from an Accessibility perspective in all of the newly developed areas of the platform that are not currently compliant.

The below areas of the application will be AA compliant for operability and navigability.

  1. Task Planning Object

  2. Custom Object

  3. Gantt Tool

Keyboard accessibility

Now users can navigate the above areas with the Keyboard through the ‘Tab’ & ‘Arrow’ keys & the application view can be zoomed to 200%.

Accessibility via Screen Readers

Once a screen reader is installed and opened accessed it would read the current page opened within the application.

  • All toad messages would be automatically announced through the screen reader.

  • All input fields (text, numeric, dates, dropdowns, checkboxes, radio inputs etc.) are now linked to the respective labels.

  • Screen reader will be enabled to reading invisible labels on placeholder texts.

  • Labels which include an asterisk (*) which previously only visually indicate that a field is mandatory will be read by the screen reader as a mandatory field.

Navigation within the Custom Object and the Task Planning Object

a) How do I navigate using the keyboard?

Step 1- Click the ‘Tab’ key on the respective page, then a user would be able to view a pop-up which would indicate to skip to main content. (figure1)

Clicking ‘Tab’ key for the second time would continue the users focus on the Header and Left Navigation panel.

Clicking the ‘Enter’ key on Skip to main content would allow a user to navigate within the page.

Figure 1

Step 2- To navigate within the page buttons and icons continue using the tab key.

Step 3- To navigate within the grid would be by using the ‘Arrow’ keys.

Step 4- If you require to activate a content and open the content, such as navigating into a project the content on the cell would be focused by pressing the ‘Tab’ key.

Step 5- Press the Enter key to open the content.

Arrow keys would allow scrolling within a grid from cell to cell (i.e. Project register shown below, figure2)

Change on focus on cells/buttons will be indicated as below. (i.e. Highlighted cell Capital works, figure3)

Figure 2

b) How do I navigate within the Custom Table using the Keyboard?

You can navigate within the custom table cells and rows using the arrow keys on your keyboard. By using the arrow keys, you can navigate within the areas up, down, left right across rows and cells within a table.

You can open popups within the table, make changes and click on options such as “Ok/Save” or “Cancel” and then refocus back on the cells in the table. (Allows you to switch between the table cells and popups)

c) Navigation within the Task Planning Tool

Navigation between the ‘Gantt’ & ‘KanBan’ tab can be achieved by using the “Shift+Tab” key.

1. Accessing the Gantt Chart through the Keyboard

You can navigate through the options available on the top toolbar using the “Tab” key.

The “…” icon can be opened by using the ‘Enter’ key and accessing through the “Tab” key.

Additionally, you can navigate through the cells and rows of the Gantt table view, using the arrow keys on your keyboard. And cells can be edited by pressing the “Enter” key & the popup can be opened by pressing “Ctr+Alt+Enter”

To save content within the Gantt table view you, please use the “Ctrl + Alt + S” keys and “f5” key to move out of the Gantt view.

2. Accessing the KanBan Board through the Keyboard

By using the “Tab” key once, focus would be directed to a ‘Card’ within the KanBan view and by using the ‘Tab’ key again the focus would shit to other buttons within the card.

By using the ‘Tab’ key for the 3rd time it would focus on the ‘Attachment’ & ‘Delete’ icons from left to the right in order.

Once you are inside a card is focused on the buttons, then you can navigate to the next card by using the “Tab” key again.

Furthermore, you can expand/collapse the panel in KanBan view by pressing arrow keys.

When you are within a card and when you use “Enter” key; a context menu will appear. You can select options within the menu and upon the selection card will be automatically positioned according to the selected item.

d) Gantt Tool Navigation

  • You can navigate to the options available on the top toolbar using “Tab” key. And you have ability to open “… “ icon by pressing ‘Enter’ key and access them by “Tab” key.

  • You can navigate through the cells and rows of the Gantt table view using the arrow keys on their keyboard.

  • You can edit the cells by pressing the “Enter” key.

  • You can open the popup in the Gantt view by pressing - “Alt+Enter”

  • You can open the context menu by pressing - “Ctrl+Alt+Enter”

    • Can navigate through the options by pressing the ‘Tab' key.

    • Additional 'Exit' option is available to exit from the context menu (Only applicable for key board functionality)

  • You can add new task by pressing - “Ctrl+Enter”

  • You can indent a task by pressing - “Ctrl+i”

  • You can outdent a task by pressing - “Ctrl+o”

  • A workaround “Back to Group” button has been added for all boards when the WCAG toggle is ON. You can switch focus to the current expanded panel.