# Accessibility

> For the complete documentation index, see [llms.txt](/llms.txt)

> The feedback widget ships with keyboard and screen reader support enabled by default. This page describes that behavior and the properties you can use to adjust it.

The feedback widget ships 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

| Key | Action |
| --- | --- |
| <kbd>Enter</kbd> or <kbd>Space</kbd> | Opens the modal when the feedback button has focus. |
| <kbd>Tab</kbd> | Moves to the next control. While the modal is open, focus stays inside it. |
| <kbd>Shift</kbd> + <kbd>Tab</kbd> | Moves to the previous control, also confined to the modal. |
| <kbd>Esc</kbd> | Closes the modal. |
| <kbd>Enter</kbd> | Submits the form when the send button has focus. |

Closing the modal with <kbd>Esc</kbd> keeps whatever the user has typed, so an accidental key press does not discard a half-written message or an attached screenshot. Reopening the modal restores it.

The screenshot editor closes the same way, but <kbd>Esc</kbd> works in layers there. See [Screenshot editor](#screenshot-editor) below.

## Screenshot editor

The screenshot editor closes on <kbd>Esc</kbd> and on clicking outside it, the same as the feedback modal. Both honour `escape-close` and `click-outside-close`.

Either way it closes the editor only and returns you to the feedback form. A stray click never dismisses the whole widget. Any screenshot already attached to the feedback form is kept; only edits made in the editor since it opened are discarded, exactly like the Cancel button.

Clicks that begin inside the editor are ignored, so dragging an annotation and releasing past the edge of the editor does not close it.

Because closing discards annotations, <kbd>Esc</kbd> clears whatever is on top before it closes anything. In order:

1. While the browser's screen sharing prompt is open, that prompt owns the keyboard and the widget ignores <kbd>Esc</kbd> entirely.
2. If the colour picker is open, <kbd>Esc</kbd> closes the picker and leaves the editor and your annotations in place.
3. If an annotation is selected, <kbd>Esc</kbd> clears the selection, the way drawing tools do.
4. Otherwise, <kbd>Esc</kbd> closes the editor and returns to the feedback form.

So a user who has just selected a shape and presses <kbd>Esc</kbd> drops the selection rather than their work. Pressing it again closes the editor.

## Focus behavior

When the modal opens, focus moves to the dialog itself, so screen readers announce the modal title before reading its contents. Focus is then confined to the modal for as long as it is open.

When the modal closes, focus returns to the element that opened it, usually the feedback button, so keyboard users resume where they left off. Returning from the screenshot editor, whether you saved, cancelled, or the capture failed, puts focus back on the feedback form.

In [embedded mode](../installation/cdn#embedded-form), the widget is part of the page rather than an overlay. It has no close button, does not trap focus, and does not respond to <kbd>Esc</kbd> or to clicks outside it. 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 <kbd>Esc</kbd> to something else, such as closing a search palette or a navigation drawer, set `escape-close` to `false`:

```html
<feedback-button 
  project="YOUR_PROJECT_ID" escape-close="false">
  Button text
</feedback-button>
```

The close button, clicking outside the modal, and the browser back button all continue to work. See [`click-outside-close` and `history-close`](layout) for those. `escape-close` applies to the screenshot editor as well as the feedback modal.

## Screen reader labels

The modal exposes itself as a dialog labelled by its title, and every control has an accessible name. The names of controls that show only an icon can be translated or reworded:

| Property | Default value |
| --- | --- |
| `close-button-label` | `Close feedback form` |
| `rating-positive-label` | `Yes` |
| `rating-negative-label` | `No` |
| `rating-star-label` | `Rate {rating} out of 5` |

In `rating-star-label`, the `{rating}` placeholder is replaced with the number of the star, giving names such as "Rate 3 out of 5".

```html
<feedback-button 
  project="YOUR_PROJECT_ID" close-button-label="Cerrar formulario" rating-positive-label="Sí" rating-negative-label="No">
  Button text
</feedback-button>
```

See [Text](text) for the full list of text properties.

## Color contrast

If you override the widget colors, check the resulting combinations against the [WCAG contrast guidelines](https://www.w3.org/WAI/WCAG21/quickref/#contrast-minimum), particularly for placeholder text and the unselected rating icons, which sit on lighter backgrounds than the rest of the modal. See [Styles](styles) for the available custom properties.
