Accessibility
Accessibility and Usability of the Webchat
Because Accessibility is important for us, we've focused on making substantial improvements to the accessibility and usability of our platform, ensuring compatibility with RGAA guidelines. Here's a summary of the changes we've implemented:
Accessibility Improvements:
- Keyboard Navigation Enhancements: We've made significant improvements to keyboard navigation across our platform. This includes enabling the 'Escape' key to minimize the chatbot, ensuring the submit input field and button are closely linked with no space in between for a seamless visual and interactive experience, similar to the profile page setup. Additionally, the focus now correctly moves to the chatbot container upon opening, mimicking modal behavior for better accessibility.
- Semantic HTML and ARIA Updates: We've refined our HTML and ARIA usage for better screen reader support. The send button is now a proper
<button>
withtype="submit"
, and messages are contained within an element withrole="log"
. Input fields are now true<input>
elements with associated labels (visible or viaaria-label
) to improve form accessibility. We've also added theenterkeyhint="send"
attribute to optimize keyboard interaction on smartphones. - Enhanced Focus Management: To aid users navigating with keyboards, we've ensured that focus is always visible and intuitive. The focus returns to the chatbot's reopening link after closing it with the 'Escape' key, and we've improved visibility of focus on buttons during keyboard navigation. The chatbot now opens within an iframe with a descriptive title attribute, informing screen reader users that it is a conversational tool.
Usability Updates:
- Submit Button Behavior: We've adapted the submit button's color change event to reactivate once the minimum character count is reached in the input field, rather than upon the complete deletion of the message and first character retyping.
- Modal and Popup Interactions: Closing modals with the 'Escape' key and managing pop-ups via keyboard have been streamlined for better user experience. The startup "start window" panel, icons in the webchat header, and the "display closing windows" feature are now fully keyboard-navigable.
- Focus Enhancements: The input area now correctly focuses when the chatbot opens, ensuring users can immediately start typing. We've also addressed the issue where the chatbot's focus was not always visible during keyboard navigation.
RGAA Compliance:
- Screen Reader Support: We've made adjustments to ensure our platform is more compatible with screen readers. This includes setting a proper
role="log"
on the message container without an unnecessaryaria-label
, as well as adding meaningful alt texts to all carousel and card images to describe their function or content. - Chatbot Navigation: Enhancements have been made to enable full keyboard navigation within the chatbot and to ensure automatic reading of sent messages, aligning with RGAA standards for accessible web content.
It is an ongoing effort, please contact us if you have any question / feature request regarding the webchat accessibility.
Updated 6 months ago