Working with Apty Client
      Back to home
      1. Customer Support Center
      2. Manage and Organize Apty Content
      3. Working with Apty Client

      WCAG Enhancements

      Improving Navigation Between Host and Apty Elements

      Navigating between host application elements and Apty elements can be challenging, especially when dealing with different application types and screen readers. Apty tools—such as Workflows, Tooltips, Validations, and Launchers—are attached to the bottom of the DOM (Document Object Model). This disrupts the natural tabbing order, making navigation complex and causing screen readers to struggle with focus order if Apty isn’t synchronized with the host application’s processes.

      To solve this, Apty has implemented a WCAG service. This service ensures seamless navigation in the correct visual order by aligning Apty’s tools with the host application’s workflow.

      Key Features

      Widget Navigation

      • Open/Close Widgets: Use Enter or Space key.

      • Auto-focus: Automatically placed on the search bar upon opening the Apty widget.

      • Navigation Within Lists: Use the Tab key.

      • Navigate Labels/Folders: Use arrow keys.

      • Open Labels/Folders: Use the Tab key.

      Focus Behavior

      1. Launching Workflows:

        • The workflow balloon is highlighted, and focus lock activates between the highlighted element and balloon.

        • If focus lock is enabled and a workflow is launched while tooltips are present, the screen reader skips the tooltips and proceeds with the workflow.

      2. Dialogs and Popups:

        • After completing a workflow or closing a dialog, focus moves to the top element of the host application.

        • For popups with multiple content types, focus order starts from the top and moves sequentially through Workflow, Tooltip, Validation, and other tools.

      3. Tooltips:

        • The screen reader reads the text inside the launcher or tooltip.

        • If validation is present, the screen reader announces the pass or fail status in order. It also reads the validation message inside the balloon, such as requirements or specific instructions for the validation.

      How Does It Work?

      The WCAG service improves navigation by tracking key interactions (Tab, Enter, Escape, Space, arrow keys) and focus events (focusing, focusout).

      Focus Flow:

      • From Host Elements:

        • Focus moves to attached Apty tools in this order:
          Workflow → Tooltip → Validation → Launcher.

        • If multiple tools of the same type are attached, their order is determined dynamically based on the situation.

      • From Apty Elements:

        • Focus moves to the next Apty element or back to the host application.

      • Screen Reader Support:
        WCAG attributes are added to Apty elements so screen readers can read them accurately.

      Best Practices & Known Limitations

      Best Practices

      • Use floating tooltips for dropdowns or hover menus that may close due to application behavior.

      • Multi-select dropdowns in Workday currently support workflows but not other Apty tools. Updates are planned to improve this.

      Known Limitations

      1. Shift+Tab Navigation:
        Focus may not return to workflow balloons after leaving navigation bars due to unavailable data on previous elements.

      2. Iframes:
        Navigation breaks if Apty tools are attached to the last element in one iframe, and another iframe follows.

      Key Benefits

      • Aligns Apty Player with WCAG AA compliance, improving accessibility.

      • Ensures seamless navigation across host and Apty elements.

      • Offers better support for keyboard and screen reader users.

      By staying in sync with the host application’s processes, Apty ensures a user-friendly and accessible experience.