CSS WCAG Design Principles

TCES Community is tailored to the Healthcare sector and with this in mind, there are aspects of the A & AA requirements that are not applicable within this solution or not provided as a feature.

Within the system, we provide video-only media (Interactive Walkthroughs) as a training tool. Alternative to this is the comprehensive step-by-step guides (View Documentation) both located within our Help centre. This will serve as an alternative to our time-based video-media.  TCES Community does not include any Audio-Based Media.

TCES community has several instances of long forms that users need to fill out. They have been built in such a way that allows users to fill them out easily. For example, text input fields have been assigned a size that is easy to interact with and also is appropriate for its contents (date input fields are smaller than input fields for an email address.) Furthermore, icons have been used where possible to indicate what type of content is required for a particular input field. Where possible, radio buttons and checkboxes have been pre-selected and text input fields have been prefilled. Lastly, at the top of each form, there is a text that states “All input fields are mandatory unless indicated as optional”. This means that we have simplified the process of filling out forms by removing unnecessary optional fields where possible.

Text in TCES Community has been implemented in such a way that it is easy for users to resize it – they can use the CTRL key + mouse scroll or their browser settings to easily increase font size for comfortable reading. The properties (font size, line height, letter spacing etc.) of all text in the UI are such that it has good readability and legibility

TCES Community offers functionality that allows users to switch to a high contrast version of the user interface (UI). When enabled, this version presents UI elements with increased contrast – 4.5:1 for primary UI elements and 3:1 for secondary elements. This allows users with impaired vision to effectively use the web application.

TCES Community also allows users to navigate the UI with a keyboard. Interactive elements (input fields, buttons, links etc.) have clear “focused” states when they are selected using the TAB key. While using the TAB key to navigate the UI, we have ensured that users can move through the UI in logical order – left to right, top to bottom as well as in Z axis (if a modal is open, elements on it are selected first). This allows users who are unable to use a mouse to navigate and use the TCES Community web application effectively

There are no Keyboard Traps or Keyboard Exceptions (2.1.3 AAA)

There is no time restriction in reading content on any page within TCES Community. The system in accordance with both NHS and Local Government requirements can be configured with an idle time-out which when initiated, any work in progress is automatically saved. There is an alert to the user prior to the idle time-out and this is configurable to 5 mins but set in accordance with the customer’s Information Security policies.

TCES Community does not have any content that qualifies as flashing (flashes more than 3 times a second) so the risk of the UI causing seizures is minimised or non-existent in accordance with the guidelines

TCES Community as an equipment ordering process is sequential with no bypass to complete the process, however users can navigate to sections via the main menu and access areas that are not applicable to an ordering process.  In the example below the user can browse the catalogue but not place an order as that is an in-step process and requires a client being selected first.

TCES Community also allows users to navigate the UI with a keyboard. Interactive elements (input fields, buttons, links etc.) have clear “focused” states when they are selected using the TAB key. While using the TAB key to navigate the UI, we have ensured that users can move through the UI in logical order – left to right, top to bottom as well as in Z axis (if a modal is open, elements on it are selected first). This allows users who are unable to use a mouse to navigate and use the TCES Community web application effectively.

In the example below the immediate input state for the keyboard is highlighted by the cursor in the surname field

Location wise, using the below example the user is currently working with Jane Austen, which automatically changes the left-hand side menu option from Find A Service User to Change Service User.

UI elements in TCES Community use visual hierarchy to guide users’ attention – UI elements have been sized and highlighted according to their functionality and priority in the context of each page. The overall page structure of the web application is easy to understand and allows users to navigate pages easily. All pages have clear titles and breadcrumbs (UI elements that show the location of the current page in the overall structure) at the top of each page. Anchor tags have descriptive text labels and it is clear where they lead.

The UI has also been developed in such a way that it is still readable and usable with CSS, JS and cookies turned off. HTML code has been written semantically and structured logically so that page content can still be read in plain text.

Where a component on a page becomes on-focus or on-input, does not trigger a change or initiate a change in context.

Navigation is consistent as the process is a step-in process and cannot be altered directly by the user.

In regards to preventing errors, input fields are validated as users are filling them out. If the input is invalid, useful information is shown to ensure valid input. Furthermore, the UI shows confirmation modals for various actions (positive and negative) to ensure that users avoid mistakes.

Lastly, we have made it impossible for users to go through the checkout process with invalid data.

In regards to handling errors, all inputs that have caused an error are indicated with a red border, red error text and an X icon.

TCES Community is compatible with Assistive Technologies. We have integrated ReachDeck (formerly known as BrowseAloud) as part of our screen reader solution and have tested TCES Community with visual assistive aids such as Microsoft Magnifier.  TCES Community is compatible with other technologies such as JAWS and Dragon.