Les principes POUR : le fondement de l'accessibilite web

Chaque exigence du WCAG repose sur quatre principes fondamentaux. Si vous comprenez ces principes en profondeur, vous pouvez souvent identifier les problemes d'accessibilite de maniere intuitive, meme sans memoriser les criteres de succes individuels. Ces quatre principes — Perceptible, Utilisable, Comprehensible et Robuste — definissent les conditions fondamentales qui doivent etre remplies pour que le contenu soit accessible.

Perceptible : les utilisateurs doivent pouvoir percevoir le contenu

Le principe de perceptibilite repond a l'exigence d'accessibilite la plus fondamentale : l'information doit etre disponible pour au moins un des sens de l'utilisateur. Si un utilisateur ne peut pas du tout percevoir le contenu, aucune qualite de design d'interaction ou de code propre ne le rendra utilisable.

Ce principe genere des exigences pour les alternatives textuelles au contenu non textuel, les sous-titres et transcriptions pour l'audio et la video, un contraste de couleur suffisant, la possibilite de redimensionner le texte et la separation de l'information de sa presentation visuelle.

Ce que cela donne en pratique :

Une banniere promotionnelle en image annoncant des soldes saisonnieres necessite un texte alternatif decrivant la promotion, car un utilisateur aveugle ne verra pas l'image. Une video de formation necessite des sous-titres, car un utilisateur sourd n'entendra pas la narration. Le texte de corps de votre site web necessite un contraste suffisant par rapport a son arriere-plan, car un utilisateur malvoyant pourrait ne pas pouvoir lire un texte a faible contraste. Un formulaire qui utilise une bordure rouge pour indiquer les erreurs a egalement besoin d'un message textuel, car un utilisateur daltonien pourrait ne pas percevoir la couleur rouge.

Echecs courants :

Images sans texte alternatif. Videos sans sous-titres. Contraste de couleur insuffisant. Information transmise uniquement par la couleur. Contenu qui devient inaccessible lorsqu'on zoome a 200 %. Texte d'espace reserve utilise comme seul libelle pour les champs de formulaire.

Utilisable : les utilisateurs doivent pouvoir utiliser l'interface

Le principe d'utilisabilite garantit que les utilisateurs peuvent interagir avec tous les composants de l'interface et naviguer a travers tout le contenu, quelle que soit la maniere dont ils interagissent avec leur appareil. Un site web magnifique et perceptible est inutile si un utilisateur ne peut pas cliquer, toucher ou naviguer au clavier vers le contenu dont il a besoin.

Ce principe genere des exigences pour l'accessibilite au clavier, un temps suffisant pour interagir avec le contenu, l'evitement de contenu pouvant provoquer des crises d'epilepsie, des mecanismes de navigation efficaces et des methodes de saisie flexibles.

Ce que cela donne en pratique :

Un menu deroulant qui s'ouvre au survol doit egalement s'ouvrir au focus clavier et etre navigable avec les touches flechees. Un delai d'expiration de session sur un site bancaire doit avertir l'utilisateur et lui permettre de prolonger la session. Un diaporama qui avance automatiquement doit avoir des controles de pause. Un panneau de filtre de recherche doit etre accessible au clavier pour que les utilisateurs ne pouvant pas utiliser de souris puissent tout de meme filtrer les resultats. Les elements interactifs doivent etre suffisamment grands pour etre touches sans toucher accidentellement les controles adjacents.

Echecs courants :

Elements interactifs qui ne repondent qu'aux clics de souris. Menus deroulants inaccessibles au clavier. Pieges de focus dans les modales ou les widgets. Liens d'evitement manquants. Limites de temps sans options de prolongation. Contenu qui clignote rapidement.

Comprehensible : les utilisateurs doivent pouvoir comprendre le contenu et l'interface

Le principe de comprehensibilite garantit que l'information presentee et le fonctionnement de l'interface sont comprehensibles pour les utilisateurs. Un contenu perceptible et utilisable mais incomprehensible echoue tout de meme au test d'accessibilite.

Ce principe genere des exigences pour un contenu lisible, un comportement previsible de l'interface et une assistance a la saisie qui aide les utilisateurs a eviter et corriger les erreurs.

Ce que cela donne en pratique :

Une page ecrite en francais a l'attribut lang="fr" pour que les lecteurs d'ecran utilisent la bonne prononciation. Les menus de navigation apparaissent au meme endroit et dans le meme ordre sur chaque page. Lorsqu'un utilisateur fait une erreur dans un formulaire, l'erreur est clairement identifiee et une suggestion de correction est fournie. Les utilisateurs sont avertis avant les actions aux consequences importantes, comme soumettre un paiement ou supprimer des donnees.

Echecs courants :

Declarations de langue manquantes. Navigation incoherente entre les pages. Validation de formulaire qui identifie les erreurs sans les expliquer. Changements de contexte automatiques declenches par la selection d'une option ou l'entree dans un champ. Contenu charge de jargon sans explications.

Robuste : le contenu doit fonctionner a travers les technologies

Le principe de robustesse garantit que le contenu repose sur des fondations techniques solides qui fonctionnent de maniere fiable sur differents navigateurs, appareils et technologies d'assistance — actuels et futurs.

Ce principe genere des exigences pour un balisage propre et conforme aux normes, une utilisation appropriee d'ARIA lorsque le HTML natif est insuffisant, et la communication programmatique des etats et valeurs des composants aux technologies d'assistance.

Ce que cela donne en pratique :

Un widget de liste deroulante personnalise utilise les roles, etats et proprietes ARIA appropries pour qu'un lecteur d'ecran l'annonce comme une zone de liste modifiable, communique s'il est developpe ou reduit, et identifie l'option actuellement selectionnee. Un indicateur de chat en direct utilise une region live ARIA pour que les lecteurs d'ecran annoncent les nouveaux messages sans que l'utilisateur ait besoin de naviguer vers la fenetre de chat. Les messages de statut comme « Article ajoute au panier » sont annonces aux lecteurs d'ecran grace a des roles appropries.

Echecs courants :

Widgets personnalises depourvus de roles et d'etats ARIA. Messages de statut qui ne sont affiches que visuellement mais non annonces aux lecteurs d'ecran. Mauvaise utilisation d'ARIA en conflit avec la semantique HTML native. Contenu qui fonctionne dans un navigateur mais echoue dans un autre en raison d'un code non standard.

Appliquer POUR comme principe de conception

Les principes POUR ne sont pas seulement des categories pour organiser les criteres de succes — ils constituent un cadre de reflexion. Lorsque vous evaluez n'importe quel contenu ou fonctionnalite, posez-vous quatre questions : Tous les utilisateurs peuvent-ils le percevoir ? Tous les utilisateurs peuvent-ils l'utiliser ? Tous les utilisateurs peuvent-ils le comprendre ? Fonctionnera-t-il avec toutes les technologies pertinentes ? Si la reponse a l'une de ces questions est non, vous avez identifie une barriere d'accessibilite.