Chat Panel Accessibility

Chat bots should be available for everyone!

It is important for us that information is accessible to everyone in order to provide equal access and equal opportunity. Using international accessibility guidelines as a groundwork we strive to include as many as possible and make inclusive design and accessibility for all.

Regulation	Conformance
Universell Utforming (Norway)	Yes
Web Accessibility Directive (EU)	Yes
Section 508	Yes
WCAG 2.0 A	Yes
WCAG 2.0 AA	Yes
WCAG 2.0 AAA	Yes
WCAG 2.1 A	Yes
WCAG 2.1 AA	Yes
WCAG 2.1 AAA	Yes
WCAG 2.2* A	Yes
WCAG 2.2 AA	Yes
WCAG 2.2 AAA	Yes

* Per 6 April 2022.

About the extenal accesibility audit

On 15 December 2021, I started an accessibility audit of the boost.ai chat panel. This included a process of ongoing iterations with issues, fixes and reviews for the next four months. On 6 April 2022, the chat panel tested was deemed to be WCAG 2.2 AAA compliant. That said, the chat panel can be configured or tailored to be non-compliant. Example of tailoring is changes of colors that lack sufficient contrast. The chat panel documentation was also updated during this process, to better inform clients to set up the panel in an accessible way.

The audit was done both normatively and informatively, with a focus on identifying negative findings. Not all informative findings are improved. I suggest and hope that Boost will strive to make the panel more accessible according to best practices, for each release.

The tools used in this audit

Google Chrome Lighthouse
Siteimprove Accessibility Checker
Google Chrome DevTools (manual source code inspection)
Google Chrome Web Developer extension
Safari + VoiceOver for iOS (manual screen reader testing)

Accepted deviations

A big part of WCAG was written long before web widgets like this chat panel were normal. I have found failures that I consider acceptable deviations. Three examples:

VoiceOver focus is in the wrong layer. Keyboard focus is in the correct layer. This happens even though the code is semantically correct and we follow the WAI-ARIA design patterns. We have not found any solutions.
Keyboard focus gets “pushed” ouside the viewport when the answer from the agent has much content. To fix this, we have to break the convension for the chat panel by not scrolling to the bottom. This will influence the usability for all users in a bad way.
No visual label for the main input field. This is not a traditional form. It has only one field. I consider a visual label redundant in a chat panel.

Report by

Anders Ekkje Slettebø,
WAS (Web Accessibility Specialist)
Webstep ASA

Guideline	WCAG	Level	Conformance
1.1.1 – Non-text Content	2.0	A	YES
1.2.1 – Audio-only and Video-only (Pre-recorded)	2.0	A	N/A
1.2.2 – Captions (Pre-recorded)	2.0	A	N/A
1.2.3 – Audio Description or Media Alternative (Pre-recorded)	2.0	A	N/A
1.3.1 – Info and Relationships	2.0	A	YES
1.3.2 – Meaningful Sequence	2.0	A	YES
1.3.3 – Sensory Characteristics	2.0	A	YES
1.4.1 – Use of Colour	2.0	A	YES
1.4.2 – Audio Control	2.0	A	N/A
1.4.3 – Contrast (Minimum)	2.0	AA	YES
1.4.4 – Resize Text	2.0	AA	YES
1.4.5 – Images of Text	2.0	AA	YES
2.1.1 – Keyboard	2.0	A	YES
2.1.2 – No Keyboard Trap	2.0	A	YES
2.2.1 – Timing Adjustable	2.0	A	N/A
2.2.2 – Pause, Stop, Hide	2.0	A	N/A
2.3.1 – Three Flashes or Below	2.0	A	YES
2.4.1 – Bypass Blocks	2.0	A	N/A
2.4.2 – Page Titled	2.0	A	YES
2.4.3 – Focus Order	2.0	A	YES
2.4.4 – Link Purpose (In Context)	2.0	A	YES
2.4.5 – Multiple Ways	2.0	AA	YES
2.4.6 – Headings and Labels	2.0	AA	YES
2.4.7 – Focus Visible	2.0	AA	YES
3.1.1 – Language of Page	2.0	A	YES
3.1.2 – Language of Parts	2.0	AA	YES
3.2.1 – On Focus	2.0	A	YES
3.2.2 – On Input	2.0	A	YES
3.3.1 – Error Identification	2.0	A	YES
3.3.2 – Labels or Instructions	2.0	A	YES
4.1.1 – Parsing	2.0	A	N/A
4.1.2 – Name, Role, Value	2.0	A	N/A
1.2.4 – Captions (Live)	2.0	AA	N/A
1.2.5 – Audio Description (Pre-recorded)	2.0	AA	N/A
1.4.3 – Contrast (Minimum)	2.0	AA	YES
1.4.4 – Resize Text	2.0	AA	YES
1.4.5 – Images of Text	2.0	AA	YES
2.4.5 – Multiple Ways	2.0	AA	N/A
2.4.6 – Headings and Labels	2.0	AA	YES
2.4.7 – Focus Visible	2.0	AA	YES
3.1.2 – Language of Parts	2.0	AA	YES
3.2.3 – Consistent Navigation	2.0	AA	YES
3.2.4 – Consistent Identification	2.0	AA	YES
3.3.3 – Error Suggestion	2.0	AA	N/A
3.3.4 – Error Prevention (Legal, Financial, Data)	2.0	AA	N/A
1.2.6 – Sign Language (Pre-recorded)	2.0	AAA	N/A
1.2.7 – Extended Audio description (Pre-recorded)	2.0	AAA	N/A
1.2.8 – Media Alternative (Pre-recorded)	2.0	AAA	N/A
1.2.9 – Audio Only (Live)	2.0	AAA	N/A
1.4.6 – Contrast (Enhanced)	2.0	AAA	YES
1.4.7 – Low or No Background Audio	2.0	AAA	N/A
1.4.8 – Visual Presentation	2.0	AAA	YES
1.4.9 – Images of Text (No Exception)	2.0	AAA	YES
2.1.3 – Keyboard (No Exception)	2.0	AAA	N/A
2.2.3 – No Timing	2.0	AAA	YES
2.2.4 – Interruptions	2.0	AAA	YES
2.2.5 – Re-authenticating	2.0	AAA	N/A
2.3.2 – Three Flashes	2.0	AAA	YES
2.4.8 – Location	2.0	AAA	N/A
2.4.9 – Link Purpose (Link Only)	2.0	AAA	YES
2.4.10 – Section Headings	2.0	AAA	N/A
3.1.3 – Unusual words	2.0	AAA	N/A
3.1.4 – Abbreviations	2.0	AAA	N/A
3.1.5 – Reading Level	2.0	AAA	N/A
3.1.6 – Pronunciation	2.0	AAA	N/A
3.2.4 – Consistent Identification	2.0	AAA	YES
3.2.5 – Change on Request	2.0	AAA	YES
3.3.5 – Help	2.0	AAA	N/A
3.3.6 – Error Prevention (All)	2.0	AAA	N/A
1.3.4 – Orientation	2.1	AA	YES
1.3.5 – Identify Input Purpose	2.1	AA	N/A
1.3.6 – Identify Purpose	2.1	AAA	N/A
1.4.10 – Reflow	2.1	AA	YES
1.4.11 – Non-Text Contrast	2.1	AA	YES
1.4.12 – Text Spacing	2.1	AA	YES
1.4.13 – Content on Hover or Focus	2.1	AA	N/A
2.1.4 – Character Key Shortcuts	2.1	A	N/A
2.2.6 – Timeouts	2.1	AAA	N/A
2.3.3 – Animation from Interactions	2.1	AAA	YES
2.5.1 – Pointer Gestures	2.1	A	N/A
2.5.2 – Pointer Cancellation	2.1	A	YES
2.5.3 – Label in Name	2.1	A	N/A
2.5.4 – Motion Actuation	2.1	A	N/A
2.5.5 – Target Size	2.1	AAA	YES
2.5.6 – Concurrent Input Mechanisms	2.1	AAA	YES
4.1.3 – Status Messages	2.1	AA	YES
2.4.11 – Focus Appearance (Minimum)	2.2	AA	YES
2.4.12 – Focus Appearance (Enhanced)	2.2	AAA	YES
2.4.13 – Page Break Navigation	2.2	A	N/A
2.5.7 – Dragging Movements	2.2	AA	N/A
2.5.8 – Target Size	2.2	AA	YES
3.2.6 – Consistent Help	2.2	A	N/A
3.2.7 – Visible Controls	2.2	AA	N/A
3.3.7 – Accessible Authentication	2.2	A	N/A
3.3.8 – Redundant Entry	2.2	A	N/A