Accessibility

Both the chat and search widgets ship with keyboard and screen reader support enabled by default. This page describes that behavior and the properties you can use to adjust it.

Keyboard support

Chat modal

Key	Action
Enter or Space	Opens the modal when the chat button has focus.
Tab	Moves to the next control. While the modal is open, focus stays inside it.
Shift + Tab	Moves to the previous control, also confined to the modal.
Esc	Closes the modal.
Enter	Sends the message when the input has focus.

Search modal

Key	Action
Tab and Shift + Tab	Move between controls, confined to the modal.
↓ and ↑	Move through the search results.
Enter	Opens the selected result.
Ctrl or Cmd + Enter	Opens the selected result in a new tab.
Esc	Closes the modal.

Set hide-navigation-buttons to true to hide the on-screen hints for these keys. The shortcuts keep working.

Focus behavior

When either modal opens, focus moves to its input so users can type straight away, and stays inside the modal for as long as it is open.

When the modal closes, focus returns to the element that opened it, usually the chat or search button, so keyboard users resume where they left off.

In embedded mode, the chatbot is part of the page rather than an overlay. It does not trap focus or respond to Esc, and it is exposed as a labelled region rather than a dialog, since there is no dialog to open or close.

Disabling Esc to close

If your site already binds Esc to something else, set escape-close to false. It is available on both widgets:

<biel-button project="YOUR_PROJECT_ID" escape-close="false">
  Ask AI
</biel-button>

<biel-search-button project="YOUR_PROJECT_ID" escape-close="false">
  Search
</biel-search-button>

With escape-close set to false, the close button and clicking outside the modal continue to work.

Closing by clicking outside

Both widgets close when you click outside them. Set click-outside-close to false to require the close button or Esc instead:

<biel-button project="YOUR_PROJECT_ID" click-outside-close="false">
  Ask AI
</biel-button>

Clicks that begin inside the widget are ignored, so selecting text in an answer and releasing the mouse past the edge does not close it.

In embedded mode the chatbot is inline content, so it ignores clicks outside as well as Esc.

Screen reader labels

Both modals expose themselves as dialogs, except the chatbot in embedded mode, which is a labelled region. The chat modal is named by its header-title and the search modal by its search-placeholder, so setting those to something meaningful for your site also improves what screen readers announce:

<biel-button 
  project="YOUR_PROJECT_ID"
  header-title="Acme Docs AI">
  Ask AI
</biel-button>

The header controls are named by their tooltip text, which you can translate with close-button-text, expand-button-text, collapse-button-text, refresh-button-text, settings-button-text, and connect-button-text. See Widget customization for the full list.

Setting hide-tooltips to true hides the tooltips visually but keeps these accessible names, so screen reader users are unaffected.

Color contrast

If you override the widget colors, check the resulting combinations against the WCAG contrast guidelines, particularly for placeholder text and source links, which sit on lighter backgrounds than the rest of the modal. See Styles for the available custom properties.