WCAG Colour Toggle for Camms.Project

Owned by amani imtiyas
Last updated: Jul 30, 2023 by Imasha Karunanayake
5 min read

WCAG Visual Elements

As Camms progresses through our modernization of the platform, each area that undergoes development will be completed in line with our design principles policy – therefore ensuring WCAG compliance.

Camms has just completed the first phase our of WCAG compliance, becoming visually complaint with each of the newly developed areas of the application that were re-written through the first round of the modernization.

Currently the below areas of the application are AA compliant for visual elements.

  • Task Planning object (Includes, Grid borders, reference task icons, comment icons & resource allocation pop up)

  • Custom object

  • Project Board and Team object

  • Project Register

  • Add Projects Project Register

  • About Us, User Guide

  • Favorites

  • Login, Sign Out

  • Menu

  • Settings

– Calendar Settings

– Manage Users

– Staff

– Project type and workflow link

– Project Register view

– Project Class

  • Project HUB (Progress bar RAG colours are not compliant)

  • Progress Calculation Indicators are NOT compliant with WCAG colours as it would be difficult to distinguish between “Off track and Monitor” statuses. Please refer to below images.

 

Toggle ON (Figure 1)

Figure 1

Toggle OFF (Figure 2)

Figure 2

Above areas would include compliance changes such as colour changes to text colours, input fields border colours, background colours.

1.1       Introduction of the Colour Toggle

In order to enable the colour compliance, you would require following below steps.

 Step1 - Navigate to Settings (figure 3)

Step2 - Click on Settings

Step 3 - Enable the WCAG Compliance Toggle (figure 4)

Step 4 - Click on Save

Step 5 - Navigate to any area as mentioned above and colour changes would be visible. (i.e. Project register view while the toggle is enabled figure 5 & Calendar settings figure 6).

Project workflow panel would include text-based statuses for phase and objects. (figure 7)

1.2       Accessibility Compliance

As Phase 2 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.

  • Project Board and Team object

  • Project Register

  • Add Projects Project Register

  • About Us, User Guide

  • Favorites

  • Login, Sign Out

  • Menu

  • My Quick Update (My Project Tasks will only be compliant)

1.2.1       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%.

 

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. (figure 8)

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.

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, figure 9)

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

How do I access more content on a Grid?

Step 1- As mentioned above navigate to the cell and the ‘+5 more ‘content using the ‘Arrow’ keys once the necessary cell is selected press the ‘Tab’ key and press the ‘Enter’ key to view the content of the cell. (figure 11)

Step 2- Once you’ve opened the see more view, click on the ‘Enter’ key to close. (figure 12)

1.2.2       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.