Company

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

* WCAG 2.2 is not final. When the audit was done, the last draft was from 21 May 2021. WCAG 2.2 is expected to be completed during 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
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
N/A
2.4.3 – Focus Order
2.0
A
YES
2.4.4 – Link Purpose (In Context)
2.0
A
YES
3.1.1 – Language of Page
2.0
A
N/A
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
N/A
3.3.2 – Labels or Instructions
2.0
A
YES
4.1.1 – Parsing
2.0
A
YES
4.1.2 – Name, Role, Value
2.0
A
YES
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.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