Skip to main content
Cartegraph Campus

Cartegraph Engage Guide Accessibility Features Overview (Beta)

Web content accessibility is necessary to make sure that all users have fair and equal access to the internet. Cartegraph Engage guides are an important way for users to get information about your app and communicate with you. Guide accessibility features are used by screen readers and other tools to help disabled users find and interact with your Cartegraph Engage guides.

Some features are applied automatically and are available on all guides. Focus and input attributes for badges and keyboard navigation are available for all guides. Other features need to be activated or configured during guide creation. Auto-focus, ARIA labels, Alt Text, Title, and ARIA roles can be set up in the Visual Design Studio when you're creating a guide.

These features are an important part of creating accessible web content. There are additional requirements in accessibility guidelines that aren't addressed by functionality in the Visual Design Studio. Factors like color contrast, captions for embedded video or audio, clickable element size, and others are up to the guide designer to implement.

Requirements

  • Partner's Cartegraph Engage agent settings must be 2.26 or greater

Recommendations

Guide Activation

Badge-activated guides are more accessible than automatic or target element guides because they give the user the option to trigger them or not.

You should always set the badge position to inline right or inline left. This limits where you can place the badge in your UI, but it ensures that the badge can be tabbed to in logical order with keyboard navigation and not loaded at the end of the DOM.

Guide Creation

  • Add a descriptive Alt text or ARIA labels where possible; these will be read by assistive technologies.
  • ARIA role depends on the type of guide and how assistive technologies should recognize the guide.
  • You'll likely use the ARIA roles Dialog, Banner, or Complementary for Cartegraph Engage guides.
  • Auto-Focus should always be checked for the best guide experience.
  • If the underlying application is also trying to grab focus (e.g., on a modal), there may be a conflict.

Configure Guide Accessibility

Accessibility features are configured in the container and building block settings of a guide in the Visual Design Studio. If an element has accessibility settings available, it will be in the Accessibility tab in the Edit modal.

Edit Container Accessibility Settings

AccessContainerSettings.png

Click on the edge of the guide step to open Container Settings. Each guide step has unique settings to control the appearance and behavior of that step. If you're creating multistep accessible guides, the Accessibility tab must be configured for each guide step.

Container Accessibility Settings

  • ARIA Label—Accessible Name: Set the ARIA label for the entire guide container.
  • Role: Select the ARIA role from a drop-down menu of available roles (no role, article, banner, complementary, contentinfo, dialog, form, main, navigation, presentation, and region).
  • Autofocus this step: Trap assistive technology focus on the guide.
  • ARIA Label—Close Button: Set ARIA labels for the default close button, which can also be toggled in container settings.

Edit Text or Button Settings

AccessBBSettings.png

Click on the building block to open building block settings. The ARIA Label can be configured for Text and Button building blocks.

Edit Image Settings

AccessImgSettings.png

Click on the Image building block to open Image building block settings. Image Alt Text can be configured for Image building blocks. Alt text is the preferred method for adding accessible text to images. ARIA labels generally aren't used with images.

Edit Video Settings

AccessVideoBB.png

Click on the Video building block to open Video building block settings. The Title can be configured for Video building blocks. Title is the preferred method for adding accessible text to videos.

Focus

Focus states help disabled users use apps without requiring a mouse or touchpad. A focus state can appear as a ring around an element, depending on CSS styling. Chrome versions 83+ allow you to style focus elements in your app. You may notice browsers adding a focus state, like an outline around the element, when clicking these elements or tabbing through a page.

Focus ring example provided by Google.

focusring_compressed_4.gif

HTML Tag—Input

Badges use the input tag in the HTML. They will likely inherit any properties assigned to input in your CSS styling. Prior to adding accessibility features, badges used the img tag.

Example of the Resource Center Badge inspected with Dev Tools

BadgeInput.png

Autofocus

AccessAutofocus.png

Autofocus this step traps focus for assistive technology on the guide step until it is dismissed. This setting is configured in Container Settings for each guide step.

ARIA Label, Alt Text, and Title

AccessBBSettings aria.png

AccessImgSettings alttext.png

AccessVideoBB titleforvideo.png

ARIA Labels, Alt Text, and Title are used to identify elements that aren't described in the UI in an accessible way. Accessibility tools use these properties in different ways. For example, a screen reader may read the ARIA label out loud to the user. ARIA Label refers to text and button building blocks, Alt Text applies to image building blocks, and Title is used for video building blocks.

Example of ARIA label in the DOM

arialabel.png

ARIA Label, Alt Text, and Title are added in each individual building block.

For additional information, refer to the W3C definitions for ARIA Labels and Alt Text for images.

Keyboard Navigation

Disabled users or users with certain devices may not be able to use a cursor or touch screen to interact with the page. Keyboard navigation is an important input for content accessibility. Users can navigate guide content with keyboard inputs.

  • Press the Esc key to dismiss the current active guide.
  • Use Tab to advance through element in a guide step.

Guide ARIA Role

ariarole.png AccessRoleSettings.png

ARIA roles are used to identify elements for assistive technologies to provide the appropriate help to the user. Roles are defined in the ARIA Roles Model and have specific purposes. For example, there are different roles for widgets, which identify interactive elements, and document structure, which organizes content on the page and generally isn't interactive.

Role is set for each individual guide step.

Available Roles

  • No Role
  • Article
  • Banner
  • Complementary
  • Contentinfo
  • Dialog
  • Form
  • Main
  • Navigation
  • Presentation
  • Region

Accessibility Feature Limitations

  • Poll building blocks are not accessible.
  • Resource Center modules are not accessible.
  • Text building blocks are all semantically paragraphs <p> and assistive technologies will treat them as such regardless of Theme style selected (Title, Subtitle, or Paragraph) when styling these building blocks.
  • Buttons with URL link actions do not notify the user that it is a link.