KB003716

PRODUCT

Nintex Automation K2

BASED ON

Nintex Automation K2

Introduction 

This article outlines recent accessibility enhancements implemented in Nintex Automation K2 (5.9.1). Previous versions of K2 SmartForms established foundational accessibility features, as documented in the existing Accessibility Compliance Whitepaper.

Building on that foundation, Nintex Automation K2 (5.9) and Nintex Automation K2 (5.9.1) introduces targeted improvements to address key accessibility issues.

Accessibility Enhancements in Nintex Automation K2 (5.9.1)

Overview

Nintex Automation K2 (5.9.1) includes the following accessibility improvements:

• Improved accessibility labelling to support screen reader navigation
• Improved display and readability when zooming
• Improved zoom and reflow behavior for responsive layouts
• Enhanced color contrast through the accessibility style profile
• Improved keyboard navigation across controls and views
• Improved screen reader behavior and control interaction

Accessibility Text control property

Property added to the following controls:

• Choice Control
• Progress Control
• Picker Control
• Slider Control
• Tree Control
• Hyperlink Control
• Rating Control
• Auto-Complete Control

Best practice

1. Some controls in the Designer do not include the Accessibility Text property because they already provide an accessibility label through the control structure or a Title property.
2. Do not use special characters when defining accessibility text, as the screen reader reads these characters during runtime.
3. Provide a short but descriptive word or phrase that clearly indicates the purpose of the control.
4. Leave the Accessibility Text property empty to use the default control name as the accessibility label.

Set Control Properties rule

When you need to dynamically change the accessibility text during runtime, use the Set Control Properties rule action.

You can apply this to the following controls:

• Drop-Down List control
• File Attachment control
• Image Attachment control
• Calendar control
• Text Area control
• Text Box control
• Radio Button List control
• Check Box List control
• Choice control
• Multi-Select control
• List Box control
• Progress control
• Picker control
• Slider control
• Tree control

Button accessibility behavior

When a user navigates to a Button or Toolbar Button control, the screen reader announces the Text property of the button.

Use the Text property to clearly describe the action performed by the button.

Button and Toolbar Button controls now announce “Button” instead of “Link”.

Text property enhancements

The system improves how the screen reader announces text and headers when users navigate through the following controls and views:

• Workflow Data Grid control
• Workflow Instance Grid control
• Activity Instances Grid control
• User Performance Grid control
• Workflow References Grid control
• List Display control
• Report Header control
• Area Item views
• Progress control state labels
• Picker control search results popup

View title announcement

When a user tabs into a List view or Item view, the system can announce the configured title before other elements.

To enable this behavior:

1. Set tabindex="0" on the grid-header-text element for List views.
2. Set tabindex="0" on the panel-header-text element for Item views.

When configured:

• The screen reader announces the title when the user first tabs into the view
• The next tab navigation moves to the collapse link, which is then announced separately

Dialog windows, modals, and popups

1. When a dialog window, modal, or popup opens, the system sets focus on the window and announces the title and available content.
2. When the user tabs into the dialog or popup for the first time, the screen reader announces the dialog content based on available accessible elements.
3. After the initial announcement, use the Tab key to navigate to interactive elements such as close, minimize, maximize, and other controls.
4. When using “Show a Message” dialogs, the system announces the message content, but the user cannot tab through the message text.
5. When a popup contains embedded forms or views, use the Tab key to navigate through both the popup controls and the embedded content.

Keyboard navigation

Attachment controls

1. When the user needs to attach a file using keyboard navigation, navigate to the File Attachment control or Image Attachment control using the Tab key, and press Enter to open the file selection window.
2. When the control has an image or file attached, and the control receives focus. The delete keyboard button can be pressed, and the file or image will be removed. 

Checkbox List control

1. When the user needs to select or deselect an option in the Check Box List control, navigate to the control using the Tab key.
2. Press the spacebar to check or uncheck the selected checkbox.

Radio Button List control

1. When the user needs to select an option in the Radio Button List control, navigate to the control using the Tab key.
2. Press the spacebar to select the currently focused radio button.

List views

1. Use the Tab key to navigate between the List view header and rows.
2. Use Shift+Tab to navigate backwards between rows.
3. When the user needs to move between columns, use the up and down arrow keys.
4. When the user needs to move between rows (excluding the header row), use the left and right arrow keys.
5. When the user needs to sort a column, navigate to the column header and press Enter to view sorting options, then press Enter again to toggle the sort direction.
6. When the user needs to edit a row, navigate to the row and press Enter.
7. When editing a row, use the Tab key to navigate through the controls within that row.

Tree control

1. Use the Tab key to navigate to the Tree control.
2. When the user needs to expand a node, use the right arrow key.
3. When the user needs to collapse a node, use the left arrow key.
4. When navigating between nodes, use the up and down arrow keys.
5. When the user needs to check a node in a multi-select tree, press the spacebar.
6. When the user needs to select or deselect a node, press the Enter key.
7. When navigating backwards out of the Tree control, press Shift+Tab twice to move focus out of the control, as the first Shift+Tab moves focus to the root node.

Zoom levels and reflow

Zoom level and reflow functionality has been improved on the following controls :

• Activity Instances Chart Control.
• Dynamic Chart Control.
• User Performance Chart Control.
• Workflow Duration Chart Control.
• Workflow Instances Chart Control.
• Activity Instances Grid Control.
• Report Header Control.
• User Performance Grid Control.
• Workflow Data Grid Control.
• Workflow Instances Grid Control.
• Workflow References Grid Control.
• Worklist Control.
• Checkbox List Control.
• Multi-Select Control.
• Choice Control.
• Search Fields.
• Textbox Control.

1. When the user zooms between 200% and 400% on a browser viewport with a width of 1280px, the system adjusts layouts to improve readability.
2. When controls are placed inside a Table control with the Responsive property enabled, column widths adjust to 100% of the viewport and stack vertically.
3. Use the Dynamic theme to ensure that accessibility improvements are applied.
4. The system supports smaller screen resolutions and zoom levels up to 400%.

Reflow behavior

Reflow adjusts the layout of controls at higher zoom levels so that content stacks vertically instead of requiring horizontal scrolling.

To enable reflow:

1. Place controls inside a Table control.
2. Enable the Responsive property.
3. Allow columns to stack vertically instead of displaying side by side.

Control zoom level specifics

Worklist control

1. When the user zooms between 200% and 400% on a browser viewport with a width of 1280px, the system now allows header text to wrap.
2. When viewing table content at these zoom levels, the system now allows scrolling to improve readability and reduce truncation.

Reporting grid controls

1. When the user zooms between 200% and 400% on a browser viewport with a width of 1280px, the system now allows header and subheader text to wrap.
2. When viewing table content at these zoom levels, the system now allows table content scrolling to improve readability and reduce truncation using ellipses.

Chart controls

1. When the user zooms between 200% and 400% on a browser viewport with a width of 1280px, the system now allows chart header and subheader text to wrap.

Report Header control

1. When the user zooms between 200% and 400% on a browser viewport with a width of 1280px, the system now allows scrolling within the Report Header control when content exceeds the available space.
2. Set the control height to at least 220px to ensure the scrollbar displays correctly.
3. Use scrolling within the control to read content that exceeds the visible area instead of relying on truncated text.

List view filter area

1. When filter controls stack at higher zoom levels, the system now ensures that the textbox remains visible and accessible for input.

Cut and ellipsed text

General behavior

1. Text Box controls do not wrap text and display content on a single line by design.
2. When text is not fully visible, use the arrow keys or mouse to scroll horizontally through the content.
3. This behavior is standard for single-line input fields in the browser.

List view column header and column body

1. When column header or body text is cut or ellipsed, open the List view Properties pane. Enable text wrapping on the Header and Column property tabs to display the full content.
2. When using Check Box List controls or Radio Button List controls, select the Vertical layout option to reduce truncation.
3. When dropdown values exceed the available space, the system truncates the text using ellipses.
4. Hover over truncated values to view the full text.

Color contrast and accessibility style profile

The Accessibility Style Profile defines the color contrast and visual styling rules applied when using the Dynamic theme.

1. Use the Dynamic theme to apply accessibility improvements.
2. Apply the Accessibility Style Profile to support WCAG 2.1 AA color contrast requirements.
3. Color contrast improvements apply to watermarks, selected items, buttons, and read-only states.
4. These improvements apply across all controls, modal dialogs, and popups.
5. Disabled and read-only states are updated to improve readability and reduce reliance on opacity.

Designing forms and views for accessibility

1. Use the Dynamic theme and Accessibility Style Profile when designing forms and views.
2. Use the Accessibility Text property to provide meaningful labels for controls.
3. When accessibility text is not used, ensure that control names are descriptive.
4. Use a Table control with the Responsive property enabled to support reflow.
5. Limit the number of columns per row to improve readability and navigation.

Limitations

1. The Rich Text control does not provide full accessibility support.
2. When using message dialogs, the system announces the content, but users cannot navigate through the text using the keyboard.

Additional notes

1. When users must see all text in a Text Box control at higher zoom levels, set a reasonable maximum length to limit input.
2. When longer text must remain fully visible, use a Text Area control instead of a Text Box control.