Accessibility Features in
Clarity

The
Clarity
product team is committed to ensuring support for the WCAG 2.1 AA standard. From release 15.9.1, Accessibility enhancements will be released incrementally to help organizations increase adoption and help users with accessibility requirements to experience
Clarity
seamlessly. The following table lists the accessibility improvements addressed in this release:
What is it about?
Who is it for?
What’s the change?
Visual design
Users with colorblindness
Color contrast and visible focus
Responsive design
Users with limited vision or partial blindness
Popup windows, text areas, and the browser zoom
Keyboard navigation
Users with mobility impairments
Key input, tab order, focus
Note
: Special keyboard controls or custom shortcut key combinations are not supported in this release.
Screen reader support
Users with partial or complete blindness
Semantics, hierarchy, page structure
This page lists the accessibility features supported in
Clarity
. For information on accessibility features supported in
Classic PPM
, see Accessibility Features in
Classic PPM
.
2
Supported Components
The following components support 4 aspects of accessibility - visual, responsive design, keyboard navigation, and screen reader support:
While the individual components listed below support 4 aspects of accessibility, the overall
Clarity
UI is not yet fully accessible. For example, navigating from the Main Left Navigation Menu to the grid, using a keyboard, is not supported at this time. However, once you are inside the grid and in a particular attribute, you can use keyboard controls to perform the required action.
  • Text Box
  • Text Area
  • Single-Value Lookup
  • Multi-Value Lookup
  • Check Box *
  • Radio Group
  • Date Picker
  • Button
  • File Attachment *
  • Color Picker Component *
  • Main Left Navigation Menu
  • View Options
    • Money and Number decimal display
    • Per-Period Metrics
    • Periods
    • Start Period
    • End Period
    • Totals Columns
  • Saved Views
  • Item Action Bar (multi-select grid)
    • Select All, Deselect All, Edit, Mark for Deletion, Clear Deletion
  • Color Picker - Pick List Color
  • Toaster Message
  • Generic Filter
  • Layout Switch (Board, Grid, Timeline)
  • Attachment (Grid)
  • Search
* In limited instances, these components may not meet color contrast, keyboard, or screen reader accessibility. This limitation will be addressed in a future release. For example, the Color Picker meets color contrast requirements but it will be updated in a future release to use the single-value lookup component to support keyboard navigation and screen reader.
Color Consolidation and Mapping
Clarity
is introducing a new color palette to improve the overall visual experience for all users including those with accessibility requirements. In previous releases, different sets of color palettes were used for the following elements:
  • Project banner and Documents tags
  • Custom picklists
  • Classic display
  • Sequential colors
As part of the upgrade, the previously selected colors are mapped to the new colors and are automatically updated. The following screenshots compare colors used in older releases to the new color palette::
Color Mapping for Project Banner and Document Tags
Color Mapping for Custom Picklists
Color Mapping for Classic Display
Color Mapping for Sequential
Colors
Sequential colors represent those that are sequentially applied by the system(for example, per-period metrics in a grid view). The sequence maximizes the visual difference between adjacent colors.
Changes to the Visual Design
The following sections include images that indicate changes to the design and appearance of the supported components to meet the visual design aspect.
Text Box and Text Area Component
Single-Value Lookup Component
Multi-Value Component
Checkbox and Radio Button Components
Date Picker Component
Button Component
File Attachment Component
Color Picker Component
Color Picker - Custom Picklist
Main Menu Navigation
15.9.2 - Changes to the Visual Design
The following sections include images that indicate changes to the design and appearance of the supported components to meet the visual design aspect.
Accessibility – Toaster Messages
Linked
Accessibility – Color Picker
Linked
Accessibility – Icons
Linked
Banner – Styling
Linked
Grid Column Panel - Expand and Collapse All
Linked