Accessibility
  • 20 May 2023
  • Dark
    Light
  • PDF

Accessibility

  • Dark
    Light
  • PDF

Article Summary

Overview

Making Itential Automation Platform (IAP) accessible means making it usable by everyone and making it possible for everyone to seamlessly connect their IT systems with network technologies for end-to-end network configuration, compliance, and automation.

This guide provides accessibility information about IAP user interface elements along with information about views and controls that are intuitive and scalable. For simplicity, these guidelines are presented herein as UI/UX checklists to verify key accessibility requirements are met in the design and implementation of IAP.

Process and UI Framework

Itential has built a set of guidelines to follow when creating user interfaces and designs for IAP. These guidelines aim at targeting WCAG 2.1 conformance (as recommended by W3C).

  • Compliance with WCAG 2 is managed primarily through the RodeoUI library, which controls color, font properties, and other visual details.
  • Rodeo is built on Prime React, which claims to be fully accessible and in compliance with Section 508 standards.
  • The Itential Style Guide, Flavor, provides an overview of all UI elements and guidelines for building interfaces with the RodeoUI library.
  • Specific app designs are based on the Flavor style guide and Prime React component library.
  • Informal accessibility audits of live applications are performed pre-release by the Itential Testing & Verification team.

Visual Accessibility

Accessibility begins with design. The following standards are met by all UI components and patterns in Figma, a vector graphics editor and prototyping tool used at Itential to design and build IAP.

  • The AA (ideal) level of conformance is the standard for body text compared to background color. For contrast testing, Color Review is used to test compliance.
  • Error, warning, and success states must use icons along with text and color. For colorblind and grayscale testing, the Color Oracle simulator is used.
  • Text style properties (minimum requirements) are:
    • Font size to at least 14px.
    • Text enlargement not to exceed 200% (font magnification, not browser zoom).
    • Line height (line spacing) to at least 1.5 times the font size.
    • Paragraph spacing to at least 2 times the font size.
    • Letter spacing to at least 0.12 times the font size.
    • Word spacing to at least 0.16 times the font size.

Functional Accessibility

Every functional test requirement references a WCAG 2.1 Success Criterion target.

  • A project checklist is used to cover most of the WCAG requirements for accessibility and compliance.
  • Accessibility is tested across four major browsers: IE11, Edge, Chrome, and Firefox.
  • Where possible, built-in accessibility checkers are used to inspect a page. For example, in Chrome, select Audit → Accessibility → Generate Report.
  • If a page is rendered without CSS, it should still be in a logical order and navigable.

Keyboard Control (No Mouse)

Itential users can use their keyboard like a mouse to navigate and interact with items onscreen.

  • If it can be clicked, selected, or modified (on input) it must be available from the keyboard (tabbing).
  • For drag and drop functionality, a keyboard-based cut and paste alternative can be offered, or a separate UI for accessibility can be enabled.
  • No keyboard traps. User must always be able to leave a component with the keyboard.
  • Tabbing must be in a logical top-down, left-right order. A tab-index is used to enforce a certain tabbing order, where needed.
  • If a button or link triggers a dialog or modal window, when the user closes the dialog, they should not be forced back to the top of the page. The element that had focus when the dialog was launched should regain focus when the dialog is closed.

The table below presents a list of keyboard shortcuts and best practices for assistive technologies and accessibility.

Press this To do this
Enter Click to action
Spacebar Toggle
Choose an item
Open a dropdown
Tab Navigate in a logical pattern
Keyboard Arrows Navigate inside a dropdown or container

Design Examples

The intent of this section is to present examples of the IAP user interface.

Figure 1: : Advanced Search and Collections View

01-advanced-view

Figure 2: IAP Gen 2 Workflow

02-gen2-workflow

Accessibility at Itential

The most important aspects of any user interface are navigation and consistent use of components to predict where things are on each page. Itential dedicates extra attention to these areas to inclusively improve the product experience for all types of users.

We welcome your feedback on the accessibility of Itential Automation Platform. Please let us know if you encounter accessibility limitations.

  • Existing customers, please use your support portal.

  • Non-customers and all other inquiries, please contact us via email or phone.

    • Email: info@itential.com
    • Phone: 1-800-404-5617

We try to respond to feedback and reported issues within 5-7 business days.


Was this article helpful?

What's Next
Changing your password will log you out immediately. Use the new password to log back in.
First name must have atleast 2 characters. Numbers and special characters are not allowed.
Last name must have atleast 1 characters. Numbers and special characters are not allowed.
Enter a valid email
Enter a valid password
Your profile has been successfully updated.