Accessibility settings in Interaction Builder

This guide covers the key settings that help you make interactions accessible.

Content:

Accessibility settings

1. Navigation order on page
1. View keyboard trap control
2. Element labeling

Best practices

Accessibility settings

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

1. Navigation order on page

By default, interactions are the last item in the website tab navigation order. If you want to change this, you can force it to be first by enabling the "Inital focus on keyboard navigation"  advanced setting.

2. 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.

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.

3. 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.

Best practices

To have the tab order of clickable elements in the interaction to be left to right, top to bottom, pay attention to the following:

• Use colors with enough contrast in your interactions. 
• Use accessibility labels where necessary
• Only use button elements in elements that will actually be used as buttons (have click actions).
  • If the element will not have any actions, use for example a shape element or an image element for purely visual parts of your interaction depending on what type of content you’re creating.
    
    
    
• Pay attention to the anchoring of the elements. The navigation of clickable elements works from top to bottom.
  • Make sure that your elements are anchored correctly; elements at the top of the interaction are anchored to the top etc. 
    
• If you have clickable elements that are transparent, rather use 100% opacity and remove the background fill (instead of the other way around).