SVG.svg "Cognigy - conversational ai platform for enterprise"){kind=logo}
.png?width=60&height=60&name=AI%20Copilot%20logo%20(mega%20menu).png)
.png?width=600&height=600&name=Knowledge%20AI%20Feature%20image%20(2).png)
.png)
.png?width=29&height=29&name=twitter%20(1).png){kind=small}
In today’s digital world, accessibility is not just a requirement; it’s a standard that helps to ensure everyone can interact with digital content and services, including your website and chat users. The Web Content Accessibility Guidelines (WCAG) provide a framework for creating accessible digital experiences. Cognigy Webchat v3 adheres to WCAG 2.2 Level AA, offering a comprehensive set of features that facilitate accessible communication. This article explores how Cognigy Webchat v3 meets these standards and provides best practices for using these features.
Reason: WCAG requires that non-text elements like images, buttons, and icons have alternative text (alt text) to describe their content. Alt text is crucial for users who rely on screen readers, as it allows them to understand the purpose of non-text elements.
In Cognigy Webchat, adding alt text is straightforward. When designing chat templates with images or multimedia elements, you can specify alternative text for each non-text content piece within the chat configuration. For example, when embedding an image in a chat message, add a description that conveys the essential information that the image represents.
You should ensure that all non-text elements in your chat have concise yet descriptive alt text. Avoid vague descriptions like "image" or "icon"; instead, focus on the element's purpose. For instance, an image of a phone can have alt text such as "Contact us via phone."
Adding alternative text to image content
2. Keyboard Accessibility
Reason: Cognigy Webchat supports full keyboard functionality, which is crucial for users with motor disabilities who may not use a mouse. Keyboard accessibility allows users to navigate through the chat interface using only their keyboard, providing a seamless experience.
Since Cognigy Webchat v3 supports keyboard navigation by default, no additional coding is required However, as you design your webchat, make sure to test each interaction—like sending messages, selecting quick replies, or navigating menus—using keyboard shortcuts (e.g., Tab, Enter). This ensures that all elements are reachable and operable through keyboard input.
Check that the tab order is logical, allowing users to move through the interface intuitively. Ensure that focus indicators are visible when navigating elements, making it clear which part of the chat is currently selected.
3. Screen Reader Compatibility
Reason: Screen readers are essential for visually impaired users, converting text and digital content into speech. Cognigy Webchat is designed to work seamlessly with popular screen readers like NVDA, providing programmatic access to interactive elements.
To optimize content for screen readers, use ARIA (Accessible Rich Internet Applications) labels for custom chat elements. Cognigy Webchat comes with built-in ARIA support, but it's beneficial to enhance this by ensuring that all interactive elements, like buttons or input fields, have descriptive labels. Test the chat with different screen readers to verify that elements are accurately conveyed to the user.
Keep descriptions short but informative, especially for input fields and buttons. For example, a button for submitting a message should have an ARIA label like "Submit message." Always avoid using ambiguous labels such as "Click here," as this can confuse screen reader users.
Ensuring meaningful label and text structure in Adaptive Cards
4. Captions and Audio Descriptions for Media
Reason: WCAG requires multimedia to be accessible for deaf or hard-of-hearing users.
When embedding multimedia content within your webchat, provide captions for video content and text descriptions for audio. Cognigy Webchat allows you to include synchronized captions with video files, offering an accessible alternative to those who cannot hear the audio. For audio-only elements, you can include descriptive text that conveys the message or information provided in the audio.
Always use closed captions rather than open captions, as they give users the flexibility to turn them on or off. When providing text descriptions for audio content, focus on conveying the key messages or context to ensure users receive the same level of information as they would from the audio.
Enabling audio descriptions and video captions
5. Color Contrast and Customizable Text
Reason: Proper color contrast and the ability to resize text are vital for users with visual impairments. Cognigy Webchat v3 is designed with sufficient contrast ratios by default, ensuring that text remains legible against its background.
You can adjust color contrast settings in the webchat’s appearance settings, modifying text and background colors to achieve a contrast ratio of at least 4.5:1, which is the minimum required for WCAG Level AA compliance. Additionally, users can resize text within the webchat interface up to 200% without losing content or functionality, offering a more accessible experience for those with low vision.
When customizing colors in your webchat, always use a color contrast checker to verify compliance with WCAG standards as well as consult your own branding guidelines. Try to avoid combinations like light gray on white, which can be hard to read. For text resizing, ensure that the chat layout remains responsive, and elements do not overlap when zoomed in.
Conclusion
Cognigy Webchat v3 offers a robust suite of features that align with WCAG 2.2 Level AA standards, ensuring an accessible digital experience for all users. From alternative text for images to keyboard accessibility and screen reader support, implementing these features not only meets compliance requirements, but also enhances the overall user experience for users with and without disabilities. By following best practices and leveraging Cognigy Webchat’s built-in accessibility tools, you can create an inclusive, user-friendly chat interface that benefits everyone.
