Skip to main content
Les problèmes de conception réactive affectent les utilisateurs sur les appareils mobiles, les écrans tactiles et tout contexte où la taille de l’écran ou la méthode de saisie diffère d’un ordinateur de bureau avec une souris. Ces problèmes vont des éléments trop petits à taper aux pages nécessitant un défilement horizontal.

​
touch-target-too-small

Moyen WCAG 2.5.5

​
Description

Les éléments interactifs — boutons, liens, cases à cocher, interrupteurs — ont une zone de cible tactile inférieure à 44×44 pixels CSS. Les petites cibles sont difficiles à activer avec précision sur les écrans tactiles, surtout pour les utilisateurs avec des handicaps moteurs.

​
Comment QAOS le détecte

L’agent calcule les dimensions rendues des éléments interactifs à partir des styles CSS calculés et signale tout élément avec une boîte englobante inférieure à 44×44 pixels.

​
Exemples

/* Trop petit : bouton icône 24x24px */
.icon-button {
  width: 24px;
  height: 24px;
}

/* Correct : cible tactile minimale de 44x44px */
.icon-button {
  min-width: 44px;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
}

​
Comment corriger

Définissez des dimensions minimales de 44×44px sur tous les éléments interactifs. Si l’apparence visuelle doit être plus petite (ex. : un bouton radio de 8px), utilisez le rembourrage pour étendre la cible tactile : 
input[type="radio"] {
  width: 16px;
  height: 16px;
  padding: 14px; /* étend la cible tactile à 44px */
}

​
touch-target-spacing-too-small

Faible

​
Description

Les éléments interactifs sont positionnés trop proches les uns des autres, augmentant le risque qu’un utilisateur active accidentellement le mauvais élément. WCAG 2.5.8 recommande au moins 8px d’espacement entre les cibles tactiles.

​
Comment QAOS le détecte

L’agent calcule les positions des éléments interactifs adjacents et signale les paires qui sont plus proches que 8px l’une de l’autre.

​
Exemples

/* Problématique : liens de navigation avec un espace de 2px */
nav a {
  margin: 0 1px;
}

/* Correct : espacement adéquat */
nav a {
  margin: 0 8px;
}

​
Comment corriger

Ajoutez des marges ou des rembourrages suffisants entre les éléments interactifs adjacents. Regroupez les contrôles connexes et espacez davantage les groupes non connexes.

​
horizontal-overflow

Moyen

​
Description

Un ou plusieurs éléments s’étendent au-delà de la largeur du viewport, obligeant la page à nécessiter un défilement horizontal. C’est presque toujours involontaire et indique un problème de conception réactive.

​
Comment QAOS le détecte

L’agent vérifie la disposition calculée de la page pour détecter les éléments dont la largeur rendue dépasse la largeur du viewport.

​
Causes courantes

  • Éléments à largeur fixe (ex. : width: 1200px sur un petit écran)
  • Tables sans enveloppes de défilement horizontal
  • Images avec width: auto mais des contraintes min-width
  • Enfants flex ou grid qui ne s’enroulent pas aux petites tailles
  • Longues chaînes non sécables (URLs, adresses email) dans le contenu textuel

​
Comment corriger

Utilisez des unités relatives et des modèles de mise en page réactifs : 
/* Éviter les largeurs fixes */
.container { width: 100%; max-width: 1200px; }

/* Images : respecter la largeur du viewport */
img { max-width: 100%; height: auto; }

/* Tables : enveloppe de défilement horizontal */
.table-wrapper { overflow-x: auto; }

/* Texte long : permettre les sauts de ligne */
.url-text { word-break: break-all; }

​
missing-page-title

Élevé WCAG 2.4.2

​
Description

La page manque d’un élément <title> dans <head>, ou le titre est vide (<title></title>). Les titres de page sont annoncés par les lecteurs d’écran au chargement d’une page et sont utilisés comme étiquettes d’onglets dans les navigateurs.

​
Importance

Les utilisateurs de lecteurs d’écran s’appuient sur les titres de page pour comprendre sur quelle page ils ont navigué, surtout lors de l’utilisation de l’historique du navigateur ou lors du changement d’onglets. Les navigateurs utilisent également les titres de page pour les favoris et la gestion des onglets.

​
Comment QAOS le détecte

L’agent vérifie la présence d’un élément <title> non vide dans <head> du DOM.

​
Comment corriger

Ajoutez un titre descriptif et unique à chaque page : 
<head>
  <title>Paramètres du compte — Acme App</title>
</head>
Les titres doivent suivre le modèle Nom de la page — Nom du site pour que les utilisateurs puissent distinguer les onglets. Dans React/Next.js, utilisez la gestion de tête du framework : 
// Next.js App Router
export const metadata = {
  title: 'Paramètres du compte — Acme App',
}

// Next.js Pages Router
import Head from 'next/head'
<Head><title>Paramètres du compte — Acme App</title></Head>

​
button-no-icon

Faible

​
Description

Des boutons en texte seul qui bénéficieraient d’une icône d’accompagnement pour clarifier leur purpose — notamment les boutons avec un texte ambigu ou très long, ou les boutons d’action dans des interfaces denses où les icônes permettent un balayage visuel plus rapide.

​
Importance

Les icônes accompagnant le texte aident les utilisateurs à identifier rapidement les boutons d’action lors du balayage visuel. Elles fournissent également une communication redondante pour les utilisateurs avec des handicaps cognitifs qui peuvent traiter les images plus rapidement que le texte.

​
Comment QAOS le détecte

L’agent capture une capture d’écran et utilise une analyse basée sur LLM pour identifier les boutons en texte seul dans des contextes où une icône améliorerait significativement la clarté (ex. : « Cliquez ici pour continuer » sans renforcement visuel).

​
Comment corriger

Ajoutez des icônes contextuellement significatives aux boutons d’action en utilisant une bibliothèque d’icônes : 
import { Trash2, Save, Share } from 'lucide-react'

<button><Trash2 size={16} /> Supprimer</button>
<button><Save size={16} /> Sauvegarder les modifications</button>
<button><Share size={16} /> Partager</button>

​
missing-lang-attribute

Élevé WCAG 3.1.1

​
Description

L’élément <html> manque d’attribut lang. Les lecteurs d’écran utilisent cet attribut pour sélectionner le moteur de langue et les règles de prononciation corrects.

​
Importance

Sans déclaration de langue, un lecteur d’écran peut prononcer le contenu de la page en utilisant les mauvaises règles de langue — le rendant difficile ou impossible à comprendre pour les utilisateurs dont la technologie d’assistance utilise une langue différente par défaut.

​
Comment QAOS le détecte

L’agent vérifie si l’élément <html> a un attribut lang non vide.

​
Exemples

<!-- Lang manquant — le lecteur d'écran utilise sa langue par défaut -->
<html>

<!-- Correct -->
<html lang="fr">
<html lang="en">
<html lang="pt-BR">

​
Comment corriger

Ajoutez l’étiquette de langue BCP 47 appropriée à l’élément <html> : 
<html lang="fr">
Dans Next.js, définissez la locale dans next.config.js ou l’élément <html> dans votre mise en page racine : 
// app/layout.jsx (App Router)
export default function RootLayout({ children }) {
  return <html lang="fr">{children}</html>
}

​
missing-meta-viewport

Élevé

​
Description

Le <head> de la page ne contient pas de balise <meta name="viewport">, ce qui amène la page à s’afficher à la largeur complète du bureau sur les appareils mobiles plutôt que de s’adapter à l’écran.

​
Importance

Sans balise meta viewport, les navigateurs mobiles effectuent un zoom arrière pour afficher la disposition complète du bureau — rendant le texte minuscule et nécessitant un zoom continu au toucher pour lire le contenu. Cela rend la page pratiquement inutilisable sur mobile.

​
Comment QAOS le détecte

L’agent vérifie la présence de <meta name="viewport"> dans le <head> de la page.

​
Comment corriger

Ajoutez la balise meta viewport standard dans le <head> de chaque page : 
<meta name="viewport" content="width=device-width, initial-scale=1">
Évitez d’utiliser user-scalable=no ou maximum-scale=1 — ceux-ci empêchent les utilisateurs de zoomer pour lire le contenu, ce qui constitue un échec WCAG.

​
non-sequential-heading-hierarchy

Moyen WCAG 1.3.1

​
Description

Les niveaux de titres sur la page sautent des rangs — par exemple, passer directement de <h1> à <h3>, ou de <h2> à <h4>. Cela brise le plan du document et perturbe la navigation des lecteurs d’écran.

​
Importance

Les utilisateurs de lecteurs d’écran naviguent dans les pages en sautant entre les titres. Une hiérarchie de titres logique transmet la structure de la page. Les niveaux sautés impliquent une section manquante et rendent la structure confuse à naviguer.

​
Comment QAOS le détecte

L’agent analyse les éléments de titre sur la page et vérifie si un niveau de titre est sauté dans la hiérarchie.

​
Exemples

<!-- Non séquentiel : h1 → h3 saute h2 -->
<h1>Tableau de bord</h1>
<h3>Activité récente</h3>  <!-- devrait être h2 -->

<!-- Correct : hiérarchie séquentielle -->
<h1>Tableau de bord</h1>
<h2>Activité récente</h2>
<h3>Aujourd'hui</h3>

​
Comment corriger

Assurez-vous que les titres suivent une hiérarchie séquentielle sans sauter de niveaux. Le niveau de titre doit refléter l’importance structurelle de la section, pas sa taille visuelle — utilisez CSS pour le dimensionnement visuel.

​
multiple-h1

Moyen

​
Description

La page a plus d’un élément <h1>, ce qui confond le plan du document et rend peu clair quel est le sujet principal de la page.

​
Importance

Le <h1> est le titre de niveau supérieur de la page — son titre principal. Plusieurs éléments <h1> compromettent la structure du document et rendent plus difficile pour les utilisateurs de lecteurs d’écran de comprendre la hiérarchie de la page.

​
Comment QAOS le détecte

L’agent compte le nombre d’éléments <h1> sur la page et signale toute page avec plus d’un.

​
Comment corriger

Désignez un seul <h1> comme titre principal de la page. Les autres sections de niveau supérieur doivent utiliser <h2> : 
<h1>Catalogue de produits</h1>   <!-- un seul par page -->
<h2>Électronique</h2>
<h2>Vêtements</h2>

​
empty-heading

Moyen

​
Description

Un élément de titre (<h1>–<h6>) ne contient pas de texte, créant une entrée invisible et sans signification dans le plan du document de la page.

​
Importance

Les lecteurs d’écran annoncent les titres vides comme « titre niveau X » sans rien après — désorientant les utilisateurs qui naviguent par titres. Les titres vides sont souvent accidentels (balise orpheline, espace réservé non rempli) et doivent être supprimés ou remplis.

​
Comment QAOS le détecte

L’agent analyse les éléments de titre et signale ceux qui n’ont pas de contenu textuel ou ne contiennent que des espaces blancs.

​
Exemples

<!-- Titres vides — sans signification dans le plan du document -->
<h2></h2>
<h3>   </h3>

​
Comment corriger

Ajoutez un contenu textuel significatif au titre ou supprimez l’élément. Si vous avez besoin d’un espacement visuel, utilisez les marges/rembourages CSS sur les éléments environnants plutôt que des titres vides.