Accessibility

This page lists the accessibility features built into the Raffle widget, for every layout: launcher, pill, overlay and embedded, with search and chat. It describes what the widget does; it isn’t a statement of conformance with a particular level of the Web Content Accessibility Guidelines (WCAG).

If you find an accessibility issue, tell Raffle Support.

Keyboard

• Visitors can reach the widget’s buttons and fields with Tab. Buttons show a visible focus outline when reached with the keyboard.
• Escape closes the overlay, a floating pill and the results panel of an embedded search. When autocomplete suggestions are open, the first Escape closes the suggestions and the second closes the widget.
• Autocomplete suggestions can be chosen with the arrow keys and Enter.
• In the chat, Enter sends the message and Shift+Enter starts a new line.
• The feedback rating is a group of radio buttons that can be chosen with the keyboard.
• While a launcher is closed or hidden, its panel is taken out of the tab order, so keyboard focus can’t land on content that isn’t visible.

Screen readers

• The widget runs in frames on your page, and every frame has a title that says what it is, for example Raffle launcher button, Raffle launcher, Raffle overlay, Raffle embedded search or Raffle pill.
• Buttons that show only an icon, such as the launcher button, the microphone, Copy, the sources and the support button, have a text label for screen readers. The launcher button’s label says whether it opens or closes the widget.
• The chat conversation is marked as a log, so screen readers announce new messages.
• Search announces when results are found, when there are none, and when something goes wrong, without moving the visitor’s focus.
• Each chat answer is marked with its language, so screen readers pronounce it correctly, also when it differs from the language of your page.

Reduced motion

When a visitor has turned on reduce motion in their operating system or browser, the widget follows that setting: its animations and transitions are cut to almost nothing.

Colours and contrast

You choose the widget’s colours in Branding: the brand colour, the text colour shown on top of it, and dark mode. The widget doesn’t check the contrast between them, so choose a text colour with enough contrast against your brand colour.

Content from your sources

Search results and chat answers show text from your own sources. Their quality for visitors, such as clear titles and readable language, depends on that content.