# Web Widget Accessibility

The **Tiledesk Web Widget** is designed to provide an inclusive conversational experience, ensuring that all users—including people with disabilities—can effectively interact with AI agents and human operators.

This document describes how the Tiledesk Web Widget **would comply** with the **Web Content Accessibility Guidelines (WCAG) 2.1 – Level AA**, following international best practices and public-sector accessibility requirements.

***

### Standards and Guidelines

The widget is designed to align with:

* **WCAG 2.1 – Level AA**
* **EN 301 549** (EU public sector standard)
* **WAI-ARIA 1.2**
* **ECT Design System accessibility principles**

Accessibility is addressed according to the four WCAG principles: **Perceivable, Operable, Understandable, Robust (POUR)**.

* All widget elements are exposed with **semantic HTML** and **ARIA roles**
* The message sender name is always annouced

**Example:**

> “Assistant: How can I help you today?”

***

#### Logical Reading and Focus Order

* DOM order matches visual order
* Focus follows a predictable top-to-bottom flow:
  1. Widget launcher
  2. Conversation history
  3. Input field
  4. Action buttons

This ensures correct navigation for screen readers and keyboard users.

#### Color and Contrast

* Minimum contrast ratio **4.5:1** for text
* **3:1** for UI components and icons
* No information is conveyed by color alone
* High-contrast themes are supported by configuration

### Operable

#### Full Keyboard Navigation

The widget is fully usable **without a mouse**:

| Action            | Keyboard            |
| ----------------- | ------------------- |
| Open widget       | `Enter` / `Space`   |
| Navigate messages | `Tab` / `Shift+Tab` |
| Scroll history    | Arrow keys          |
| Send message      | `Enter`             |
| Close widget      | `Esc`               |

#### No Keyboard Traps

* Users can always exit the widget
* Focus never becomes trapped inside modal dialogs

### Understandable

#### One Question at a Time (when properly designed)

The conversational flow follows (when properly designed) a **single-question paradigm**:

* The assistant asks **one question per turn**
* Users are not overwhelmed with multiple simultaneous requests
* Each question is contextually clear and concise

#### Review and Correction of Answers

* Users can:
  * Review previous answers
  * Edit or confirm their input (when the flow is properly designed)

### Multilingual Accessibility

#### Language Declaration

* Each message declares its language using `lang` attributes (work in progress)
* Screen readers correctly switch pronunciation rules (work in progress)

#### UI and Content Consistency

* Widget UI language and assistant language are always synchronized (when the flow is properly designed)
* Language switching:
  * Updates both UI labels and AI responses
  * Preserves conversation context

### Design System Compliance (ECT)

#### Visual Consistency

The widget can be fully adapted to the **ECT Design System**, including:

* Typography
* Spacing and layout
* Buttons and inputs
* Focus styles
* Error and success states

Use APIs to properly configure the Widget Design: <https://developer.tiledesk.com/widget/attributes>

### Robustness and Compatibility

* Compatible with major screen readers:
  * NVDA
  * JAWS
  * VoiceOver
* Works across modern browsers and devices
* Not working without Javascript enabled

### Testing and Validation

Accessibility would be ensured through:

* Automated testing (axe, Lighthouse, pa11y)
* Manual keyboard testing
* Screen reader testing
* User testing with assistive technologies
* Accessibility statements and audit reports

### To summarize

> The Tiledesk Web Widget is designed to conform to WCAG 2.1 Level AA.\
> We continuously improve accessibility through testing, monitoring, and user feedback.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://guide.tiledesk.com/web-widget-accessibility.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.