> ## Documentation Index
> Fetch the complete documentation index at: https://docs.qaos.machdel.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Aperçu des critères UI/UX

> QAOS détecte plus de 20 critères UI/UX et d'accessibilité mappés aux directives WCAG 2.1 et aux bonnes pratiques UX.

L'Agent UI/UX QAOS audite votre application web selon les standards d'accessibilité **WCAG 2.1** et les bonnes pratiques UX générales, garantissant que votre application est utilisable par tous les utilisateurs — y compris ceux qui utilisent des technologies d'assistance, des appareils tactiles ou la navigation au clavier uniquement.

***

## Catalogue des critères

| ID du critère                                                                                      | Catégorie           | Sévérité                                                       |
| -------------------------------------------------------------------------------------------------- | ------------------- | -------------------------------------------------------------- |
| [`missing-error-messages`](/fr/issues/quality/forms#missing-error-messages)                        | Formulaires         | <span style={{color:'#dc2626',fontWeight:600}}>Critique</span> |
| [`error-not-visible`](/fr/issues/quality/forms#error-not-visible)                                  | Formulaires         | <span style={{color:'#dc2626',fontWeight:600}}>Critique</span> |
| [`no-confirmation-critical-action`](/fr/issues/quality/navigation#no-confirmation-critical-action) | Navigation          | <span style={{color:'#dc2626',fontWeight:600}}>Critique</span> |
| [`not-keyboard-reachable`](/fr/issues/quality/accessibility#not-keyboard-reachable)                | Accessibilité       | <span style={{color:'#f97316',fontWeight:600}}>Élevé</span>    |
| [`not-keyboard-activatable`](/fr/issues/quality/accessibility#not-keyboard-activatable)            | Accessibilité       | <span style={{color:'#f97316',fontWeight:600}}>Élevé</span>    |
| [`unclear-link-text`](/fr/issues/quality/navigation#unclear-link-text)                             | Navigation          | <span style={{color:'#f97316',fontWeight:600}}>Élevé</span>    |
| [`inconsistent-navigation`](/fr/issues/quality/navigation#inconsistent-navigation)                 | Navigation          | <span style={{color:'#f97316',fontWeight:600}}>Élevé</span>    |
| [`missing-page-title`](/fr/issues/quality/responsive#missing-page-title)                           | Conception réactive | <span style={{color:'#f97316',fontWeight:600}}>Élevé</span>    |
| [`missing-form-labels`](/fr/issues/quality/accessibility#missing-form-labels)                      | Accessibilité       | <span style={{color:'#eab308',fontWeight:600}}>Moyen</span>    |
| [`button-no-text`](/fr/issues/quality/accessibility#button-no-text)                                | Accessibilité       | <span style={{color:'#eab308',fontWeight:600}}>Moyen</span>    |
| [`missing-alt-text`](/fr/issues/quality/accessibility#missing-alt-text)                            | Accessibilité       | <span style={{color:'#eab308',fontWeight:600}}>Moyen</span>    |
| [`insufficient-color-contrast`](/fr/issues/quality/accessibility#insufficient-color-contrast)      | Accessibilité       | <span style={{color:'#eab308',fontWeight:600}}>Moyen</span>    |
| [`text-too-small`](/fr/issues/quality/accessibility#text-too-small)                                | Accessibilité       | <span style={{color:'#eab308',fontWeight:600}}>Moyen</span>    |
| [`missing-focus-indicator`](/fr/issues/quality/accessibility#missing-focus-indicator)              | Accessibilité       | <span style={{color:'#eab308',fontWeight:600}}>Moyen</span>    |
| [`required-field-not-marked`](/fr/issues/quality/forms#required-field-not-marked)                  | Formulaires         | <span style={{color:'#eab308',fontWeight:600}}>Moyen</span>    |
| [`touch-target-too-small`](/fr/issues/quality/responsive#touch-target-too-small)                   | Conception réactive | <span style={{color:'#eab308',fontWeight:600}}>Moyen</span>    |
| [`horizontal-overflow`](/fr/issues/quality/responsive#horizontal-overflow)                         | Conception réactive | <span style={{color:'#eab308',fontWeight:600}}>Moyen</span>    |
| [`empty-alt-informative-image`](/fr/issues/quality/accessibility#empty-alt-informative-image)      | Accessibilité       | <span style={{color:'#84cc16',fontWeight:600}}>Faible</span>   |
| [`error-not-associated`](/fr/issues/quality/forms#error-not-associated)                            | Formulaires         | <span style={{color:'#84cc16',fontWeight:600}}>Faible</span>   |
| [`button-no-icon`](/fr/issues/quality/responsive#button-no-icon)                                   | Conception réactive | <span style={{color:'#84cc16',fontWeight:600}}>Faible</span>   |
| [`touch-target-spacing-too-small`](/fr/issues/quality/responsive#touch-target-spacing-too-small)   | Conception réactive | <span style={{color:'#84cc16',fontWeight:600}}>Faible</span>   |

***

## Correspondance WCAG

La plupart des critères UI/UX dans QAOS correspondent directement aux critères de succès WCAG 2.1 :

| Critère WCAG                     | Critère QAOS                                         |
| -------------------------------- | ---------------------------------------------------- |
| 1.1.1 Contenu non textuel        | `missing-alt-text`, `empty-alt-informative-image`    |
| 1.3.1 Information et relations   | `missing-form-labels`, `error-not-associated`        |
| 1.4.3 Contraste (minimum)        | `insufficient-color-contrast`                        |
| 1.4.4 Redimensionnement du texte | `text-too-small`                                     |
| 2.1.1 Clavier                    | `not-keyboard-reachable`, `not-keyboard-activatable` |
| 2.4.3 Ordre du focus             | `missing-focus-indicator`                            |
| 2.4.6 En-têtes et étiquettes     | `missing-form-labels`                                |
| 3.2.3 Navigation cohérente       | `inconsistent-navigation`                            |
| 3.3.1 Identification des erreurs | `missing-error-messages`, `error-not-visible`        |
| 3.3.2 Étiquettes ou instructions | `required-field-not-marked`                          |
| 2.4.2 Titre de page              | `missing-page-title`                                 |