This guide covers the key settings that help you make interactions accessible. We also recommend you to pay attention to the colors you use in your interactions and that there's enough contrast between for example texts and backgrounds.
Content:
Best practices to help ensure a logical tab order
Accessibility settings
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.
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.
Best practices to help ensure a logical tab order
To have the tab order of clickable elements in the interaction to be left to right, top to bottom, pay attention to the following:
- Only use button elements in elements that will 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 depending on what type of content you’re creating.
- If the element will not have any actions, use for example a shape element or an image element 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.
- 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).
