1. Help Center
  2. Interaction Builder
  3. Best practices for interactions

Accessibility settings in Interaction Builder

There are two accessibility settings in Interaction Builder. They should be used to make digital content more accessible to everyone.

1. View keyboard trap control

Assisted users need to be able to navigate web pages using a keyboard, usually by moving forward and back with the Tab (+Shift) key.  However, subsections of a web page, such as popups, often need to keep the user focus within the section. They don’t allow users to move away using the navigation keys. This is known as a Keyboard Trap. Instead, popups and such usually have a button for closing the pop-up and escaping back to the page.

Interaction Builder provides a Keyboard Trap setting for each view. It is enabled by default (see the image below). It should be disabled for chat button views and other views that have no close button. Enabling it allows the visitor to leave the interaction with the keyboard.

Screenshot 2022-01-24 at 12.32.30

The keyboard trap setting can be found on the Interaction Builder Design page, and is set per view. Open a view and navigate to the Appearance tab on the right side of the page. "Enable keyboard trap" can be found in the Accessibility section.

2. Element labeling

Some assisted users with poor or non-existent sight use a so-called screen reader that speaks the web content to them. Interaction Builder provides a readable text label setting for buttons, form inputs and views. If the accessibility label is set, it will be read to the user instead of the button text when keyboard focus is moved to the element.

It depends on the element and its original text if an accessibility label is needed. If you need to see the context of the button text to understand its purpose, adding a separate label for it is a good idea. For instance, if you have a contact form and a button that says "Send", the button might not make too much sense if you cannot see the form. Hence, using an accessibility label like "Send the form and move to the next step" could be set. 

See the image below for an example of using the label for an accessible close button.

When setting an accessibility label for the entire view, the label will be the first thing to be read when the view is opened.