Web content accessibility means ensuring that everyone, including people with disabilities, can access and use your content. This guide covers the key settings that help you make interactions accessible.
Introduction
The accessibility settings in Interaction Builder can be used to make digital content more accessible to everyone (the giosg accessibility statement can be found here). This article goes through these settings one by one and in the end offers some additional best practices for building interactions with adequate accessibility. Interaction builder will also help you make accessible interactions by highlighting for example missing labels with accessibility warnings shown in the Publishing stage.
Content
1. Interaction navigation order on page
4. Text element types and hierarchy
1. Interaction navigation order on page
For users navigating websites by tabbing, logical tab order is important. 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. This increases the tabindex of the interaction element.
When interactions are exited (visitor clicks on an element with Exit-action) focus is automatically restored to the very first element on the website.
2. 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 should be disabled for chat button views and other views that have no close button, allowing 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. Select 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. Accessibility labels
Some assisted users use a screen reader that speaks the web content to them. For this purpose, Interaction Builder provides a variety of readable text label (aria label) settings.
3.1 Interaction labels
To set a label for the entire interaction, click on the interaction name at the top of the design page and use the "Interaction name for screen readers" field.
This allows you to have a separate internal working title for the interaction, and choose another external description for it. If no label is set, the interaction name will be used instead.
3.2 View labels
When setting an accessibility label for the entire view, the label will be the first thing to be read when the view is opened. Select the view and head over to the Settings tab to add your label.
3.3 Element labels
If an accessibility label is set for an element, it will be read to the user when they navigate to the element. So for example for buttons, the label would be read instead of the button text when keyboard focus is moved to the button. For images (which are purely visual elements), the element is ignored if no label is set.
See the image below for an example of using the label for an accessible close button.
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" can be set.
3.4 Link titles
When using links in which the link text itself is not that descriptive, a title can be given to the link. The titles are shown as tooltips for desktop users and will be read by screen readers.
4. Text element types and hierarchy
Interaction builder allows you to give your text elements structure by defining the type of the text element; Title, Heading, Subheading or Body.
This type of structure gives meaning and hierarchy to the content and helps assistive technologies understand how the content is organised, making it easier to navigate.
5. Best practices
- Use colors with enough contrast and texts with a decent font size 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.
- 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.
- To have the tab order of clickable elements in the interaction to be logical (left to right, top to bottom) pay attention to the anchoring of the elements.
- Make sure that your elements are anchored correctly; elements at the top of the interaction are anchored to the top etc. 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. The navigation of clickable elements works from top to bottom.
- If you have clickable elements that are transparent, rather use 100% opacity and remove the background fill (instead of the other way around).
