CSS TCES Community Accessibility Standards

In accordance with the accessibility regulations that came into force in 2018, TCES Community web application meets the following standards – WCAG 2.1 priority AA, WAI-ARIA Guidelines 1.1 and EU Web Accessibility Directive.

From a design perspective, this is achieved by using graphical elements (icons, shapes, size, layout to name a few) in combination with text to ensure that UI elements can be easily recognized. An example of this is a button that has a text label and also an icon that indicates its functionality. Furthermore, TCES Community offers functionality which 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.

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

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 don’t do something they don’t really intend. 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 clearly indicated with a red border, red error text and an X icon. The red text below each input field gives instructions how to correct the error.

TCES Community also has useful video tutorials which can help users to learn how to use the UI. These videos have a narrator and also subtitles that make it very easy for users to digest the information even if they have auditory or visual impairments. Additionally, we offer users to download a document for each video which contains the same information. This is helpful for users who prefer to read at their own pace instead of watching a video.  All video content we offer has the standard controls, play, pause, stop, volume control, full screen, minimize, download and picture-in-picture.

TCES Community is also fully responsive (mobile friendly) and can be used on devices with various screen sizes – smartphone, tablet, laptop or desktop. The UI will resize and adapt to all mainstream screen sizes and portrait/landscape screen orientation.

Throughout the UI, TCES Community has useful tooltips that are triggered in various ways and offer useful information that help users interact with the web application. These tooltips can be dismissed in various ways – pressing ESC key, clicking on X and clicking anywhere else on the page.

In some instances, TCES Community has drag-and-drop functionality which allows users to create dashboards and rearrange list items in various contexts. We offer an alternative to the drag-and-drop functionality where users can specify item location with mouse clicks and keyboard input. Some users find it difficult to move their mouse along a certain path so this alternative is really helpful to them.

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 has been minimized in accordance with the guidelines.

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. TCES Community also has a sitemap which can be accessed from the HELP page.

TCES Community also allows users to use screen readers to interact with the UI. The web application is developed in such a way that screen readers can read page contents in logical order and translate visual information into speech. For example, all images have ALT tags that describe the content of them and additional markup has been added to various UI elements to give screen readers additional information.  As a result, users with severe visual impairments can interact with TCES community via screen reader software.

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 in a semantic way and structured logically so that page content can still be read in plain text.

Finally, all user-facing (front-end) code meets accessibility standards – it is valid, semantic, and has all the attributes specified in the standards documentation.