Accessibility Enhancements in Omnistudio

Build inclusive user interfaces by using the accessibility enhancements in Flexcard and Omniscript elements. These enhancements cover many accessibility requirements, such as enhanced screen reader announcements, easier navigation, and a more powerful UI experience. Some enhancements are only available when you turn on the Runtime Accessibility setting in the Flexcard and Omniscript designers. For instance, this setting unlocks new properties for elements such as Radio, Radio Group, Block, and Data Table. Other changes apply even without turning on this setting, such as new custom attributes for icons, autocomplete options in several elements, and so on.

Where: This change applies to Lightning Experience, Experience Cloud sites, and all versions of Enterprise, Performance, and Unlimited editions where Omnistudio is enabled.

Who: This feature is available to Omnistudio customers who use the standard runtime. However, changes under the Runtime Accessibility toggle apply to Omnistudio customers who use the standard runtime and designer. All changes are available for the SLDS and SLDS+ themes.

Why: These enhancements make your components meet WCAG 2.2 web accessibility standards, helping screen reader and keyboard-only users navigate your applications more effectively. Specific improvements include:

  • Improved Semantics: Navigate actions now use real links rather than placeholder links. Screen readers announce when links open in a new window.
  • Enhanced Navigation: Keyboard users can now access edit icons in Data Tables on focus. All actions support Space, Enter, and Escape keys.
  • Better Visual Feedback: Selected options in Multi-select and Radio elements now display a checkmark for clearer visual indication beyond color alone.

How: To access the optional enhancements, open your Flexcard or Omniscript in the standard designer, select Setup, and enable the Runtime Accessibility toggle.

When you enable the Runtime Accessibility setting, these changes become available:

  • Radio
    • Improved keyboard navigation.
    • Support for new attributes: role=radiogroup, aria-required and aria-invalid.
    • Image and color-pick radio buttons now show a visible checkmark when selected.
  • Radio Group
    • The Set All checkbox now behaves correctly at runtime and can’t be unchecked once set.
    • When tabbed out of a required radio group without making a selection, validation is triggered and an error message is shown.
    • The DOM structure is updated for better accessibility.
  • Block
    • Heading Level: You can now configure the heading level (H1-H6) for blocks to enforce a logical document structure.
    • Delete Confirmation: A confirmation dialog is shown before deleting a block.
  • Typeahead
    • An Edit Icon Label field is added so you can specify a name for the name of the edit icon. The default remains Edit, but you can customize the label as per your preference. This change is specific to the edit mode.
    • The option list container’s border maintains the minimum contrast ratio of 3:1 with its background color. This change is specific to SLDS Plus theme.
    • When the dropdown menu opens, focus is automatically set to the first selectable option. This change is specific to the Lookup mode.
  • Action:
    • Navigate actions now announce when something opens in a new window.
    • Keyboard navigation is enhanced to mirror mouse click behavior.

These improvements are available automatically without enabling the Accessibility toggle:

  • Set as Disabled Property for Inputs: A new Set as disabled property is available for these elements, so that you can explicitly disable them on the pages that they’re used on.
    • Currency, Email, Number, Password, Range, Telephone, Text, Text Area, URL, and Lookup.
    • Checkbox: The Read-Only property is replaced by Set as disabled.
    • Multi-select: The Set as disabled property is added.
  • Select:
    • The default placeholder "--Clear -–" is changed to "No Value".
    • Focus remains on the input while typing.
    • Value changes are reflected immediately.
    • The autocomplete input field is added.
  • Lookup:
    • The default placeholder "-- No Value --" is changed to "Select a value".
    • With the new Clear Value option, you can clear the pre-selected value when the dropdown opens.
    • The autocomplete input field is added.
    • The search icon is removed from the runtime view.
    • Telephone:
      • Visual contrast is improved for better readability.
    • Multi-Select:
      • Image multi-select options now display a visible checkmark.

For components that previously supported the iconNameLeft and iconNameRight custom attributes, two new custom attributes have been added: iconNameLeftAltText and iconNameRightAltText. These new attributes provide alternative text support.