Les 4 principes de l’accessibilité web : comprendre les critères POUR

Comment rendre un site internet accessible aux personnes en situation de handicap ? Pour répondre à cette question, il est utile de comprendre les quatre grands principes qui structurent les recommandations internationales en matière d’accessibilité numérique.

Ces principes sont regroupés sous l’acronyme POUR : Perceptible, Utilisable, Compréhensible et Robuste. Ils viennent des recommandations WCAG (Web Content Accessibility Guidelines), élaborées par le W3C, l’organisme international qui développe notamment les standards du Web.

Ils permettent de comprendre les principaux obstacles que peuvent rencontrer les utilisateurs lorsqu’ils consultent un site, remplissent un formulaire ou utilisent une application.

Dans cet article, découvrons les quatre principes POUR, avec des exemples concrets et des pistes pour améliorer l’accessibilité de votre site web.

1. Que signifie l’acronyme POUR ?

Les quatre principes POUR constituent la base des recommandations WCAG en matière d’accessibilité des contenus web.

Chaque principe répond à une question essentielle :

• Perceptible : l’information peut-elle être perçue par l’utilisateur ?
• Utilisable : l’utilisateur peut-il naviguer et interagir avec le site ?
• Compréhensible : le contenu et le fonctionnement du site sont-ils faciles à comprendre ?
• Robuste : le contenu peut-il être interprété de manière fiable par les navigateurs et les technologies d’assistance ?

Ces principes sont complémentaires. Un site peut être agréable visuellement, mais rester difficile à utiliser au clavier. De la même manière, un formulaire peut être techniquement accessible, mais devenir incompréhensible si ses messages d’erreur ne sont pas explicites.

L’objectif est donc de prendre en compte ces quatre dimensions dans la conception, le développement et la mise à jour d’un site internet.

2. Principe n° 1 : Perceptible

Le principe de perceptibilité consiste à rendre les informations et les composants de l’interface accessibles aux sens des utilisateurs.

Tout le monde ne consulte pas une page web de la même manière. Certaines personnes utilisent un lecteur d’écran, d’autres agrandissent le texte, modifient les couleurs ou ont besoin de sous-titres pour comprendre une vidéo.

Comment rendre un site perceptible ?

Plusieurs bonnes pratiques peuvent être mises en place.

Ajouter des alternatives textuelles aux images pertinentes

Une image qui transmet une information importante doit disposer d’une alternative textuelle adaptée. Cette description permet notamment aux personnes utilisant un lecteur d’écran de comprendre l’information portée par l’image.

À l’inverse, une image purement décorative doit généralement être ignorée par les technologies d’assistance afin de ne pas encombrer la lecture.

Vérifier les contrastes de couleurs

Un texte peu contrasté peut être difficile à lire pour les personnes ayant une déficience visuelle, mais aussi sur un écran utilisé en plein soleil.

Les contrastes doivent respecter les exigences applicables aux différents types de contenu. Les WCAG 2.2, au niveau AA, prévoient notamment un rapport de contraste d’au moins 4,5:1 pour le texte courant et de 3:1 pour le grand texte, sous réserve des exceptions prévues par les critères.

Ne pas transmettre une information uniquement par la couleur

Si les champs obligatoires d’un formulaire sont signalés uniquement en rouge, certains utilisateurs risquent de ne pas identifier cette information.

Il est préférable d’associer la couleur à un texte explicatif, un symbole ou un autre indicateur approprié.

Proposer des alternatives aux contenus audio et vidéo

Selon le type de contenu, des sous-titres, une transcription ou une audiodescription peuvent être nécessaires pour rendre les informations accessibles à davantage de personnes.

Exemple concret

Sur une boutique en ligne, une image de produit peut être accompagnée d’un texte alternatif pertinent. Le prix reste lisible, les boutons se distinguent clairement du fond et les informations importantes ne reposent pas uniquement sur un code couleur.

Le résultat : les informations sont plus faciles à percevoir, y compris avec des modes de consultation différents.

3. Principe n° 2 : Utilisable

Le principe d’utilisabilité signifie que les utilisateurs doivent pouvoir naviguer dans le site et interagir avec ses fonctionnalités.

Certaines personnes ne peuvent pas utiliser une souris. D’autres naviguent au clavier, avec une commande vocale ou à l’aide d’un dispositif adapté.

Un site accessible doit donc proposer des interactions qui ne reposent pas exclusivement sur un mode de navigation.

Comment rendre un site utilisable ?

Permettre la navigation au clavier

Les menus, les liens, les boutons et les champs de formulaire doivent pouvoir être atteints et utilisés au clavier lorsque cela est pertinent.

L’ordre de navigation doit rester logique. L’utilisateur doit aussi pouvoir identifier clairement l’élément qui a le focus, c’est-à-dire l’élément actuellement sélectionné au clavier.

Éviter les pièges au clavier

Un utilisateur ne doit pas se retrouver bloqué dans une fenêtre ou un composant sans possibilité d’en sortir au moyen du clavier.

Donner suffisamment de temps pour agir

Certaines interfaces imposent une limite de temps pour remplir un formulaire ou terminer une action. Lorsque les critères applicables l’exigent, l’utilisateur doit pouvoir prolonger, ajuster ou supprimer cette limite, sauf exceptions prévues par les recommandations.

Faciliter l’utilisation sur mobile

Les commandes doivent être suffisamment faciles à cibler, espacées lorsque nécessaire et adaptées aux différents formats d’écran.

Exemple concret

Un visiteur souhaite envoyer un formulaire de contact sans utiliser de souris.

Il doit pouvoir accéder à chaque champ avec la touche Tabulation, saisir ses informations, sélectionner les options disponibles et envoyer le formulaire. Le focus doit rester visible et le bouton d’envoi doit être identifiable.

Si l’une de ces étapes est impossible, une partie des utilisateurs risque de ne pas pouvoir contacter l’entreprise.

4. Principe n° 3 : Compréhensible

Un site compréhensible présente des informations claires et un fonctionnement prévisible.

L’utilisateur doit pouvoir comprendre le contenu, identifier les actions proposées et repérer les erreurs lorsqu’il interagit avec une interface.

La compréhension ne dépend pas uniquement de la rédaction : elle concerne également le comportement des menus, des formulaires et des autres composants.

Comment rendre un site compréhensible ?

Rédiger des contenus clairs

Privilégiez des phrases directes, des titres explicites et des paragraphes bien structurés. Expliquez les termes techniques lorsqu’ils sont nécessaires et évitez les formulations inutilement complexes.

Créer une navigation cohérente

Les menus et les éléments de navigation doivent fonctionner de manière prévisible. Des composants similaires devraient conserver un comportement cohérent d’une page à l’autre.

Identifier clairement les champs de formulaire

Chaque champ doit disposer d’une étiquette compréhensible. Les consignes utiles doivent être accessibles avant que l’utilisateur commette une erreur.

Expliquer les erreurs et aider à les corriger

Un message comme « Erreur » ne permet pas de comprendre ce qui s’est passé.

Un message plus précis, tel que « Veuillez saisir une adresse e-mail valide », indique le problème et la manière de le résoudre.

Exemple concret

Sur un formulaire de demande de devis, les champs sont clairement nommés. Si une information manque, le site indique quel champ doit être complété et explique comment corriger l’erreur.

L’utilisateur peut alors terminer sa demande sans devoir deviner ce qui est attendu.

5. Principe n° 4 : Robuste

Le principe de robustesse vise à garantir que le contenu puisse être interprété de manière fiable par différents navigateurs et technologies d’assistance.

Un site ne doit pas seulement fonctionner dans une configuration particulière. Sa structure et ses composants doivent permettre aux outils utilisés par les internautes de comprendre correctement les informations et les interactions.

Comment rendre un site robuste ?

Utiliser une structure HTML appropriée

Les titres, les listes, les boutons, les liens et les formulaires doivent être construits avec des éléments adaptés à leur fonction.

Un élément visuellement présenté comme un bouton, mais codé comme un simple texte sans comportement accessible, risque de poser problème aux utilisateurs et aux technologies d’assistance.

Associer correctement les champs et leurs étiquettes

Les formulaires doivent exposer les informations nécessaires pour identifier les champs, leurs états et les éventuelles erreurs.

Vérifier les composants interactifs

Les menus déroulants, fenêtres modales, accordéons et autres composants doivent pouvoir communiquer correctement leur rôle, leur état et leurs changements aux technologies d’assistance lorsque cela est nécessaire.

Tester avec différents outils

Des tests avec plusieurs navigateurs, la navigation au clavier et, lorsque c’est pertinent, des lecteurs d’écran permettent de repérer des problèmes qui ne sont pas toujours visibles à l’œil nu.

Exemple concret

Un bouton « Ajouter au panier » doit être identifiable comme un bouton et annoncer correctement sa fonction. Après l’ajout d’un produit, le changement d’état ou le retour d’information doit être accessible aux utilisateurs concernés.

Un développement robuste permet ainsi de limiter les obstacles liés à l’interprétation du contenu et des composants.

6. Comment appliquer les principes POUR à votre site web ?

Les principes POUR sont utiles pour guider la conception et l’amélioration d’un site. Ils ne remplacent toutefois pas une évaluation complète selon le référentiel applicable.

Voici une première liste de vérifications pour orienter votre démarche.

Perceptible

• Les images informatives disposent-elles d’alternatives textuelles pertinentes ?
• Les contrastes sont-ils suffisants ?
• Les vidéos disposent-elles des alternatives nécessaires ?
• Les informations sont-elles encore disponibles lorsque l’utilisateur agrandit le texte ?

Utilisable

• Le site peut-il être parcouru au clavier ?
• Le focus est-il visible ?
• Les menus et formulaires sont-ils utilisables sans souris ?
• Les limites de temps et les interactions complexes créent-elles des obstacles ?

Compréhensible

• Les titres et les liens décrivent-ils clairement leur fonction ?
• Les champs de formulaire sont-ils correctement identifiés ?
• Les erreurs sont-elles expliquées de manière utile ?
• La navigation reste-t-elle cohérente entre les pages ?

Robuste

• Le HTML utilise-t-il les éléments adaptés à chaque fonction ?
• Les composants interactifs exposent-ils correctement leurs informations et leurs états ?
• Les changements importants sont-ils communiqués aux technologies d’assistance ?
• Des tests manuels complètent-ils les outils automatiques ?

Cette liste constitue un point de départ. Pour évaluer la conformité, il faut examiner les critères applicables, les pages représentatives et les interactions du site.

7. Quel est le lien entre les principes POUR, les WCAG et le RGAA ?

Les termes POUR, WCAG et RGAA sont liés, mais ils ne désignent pas exactement la même chose.

Les WCAG sont les recommandations internationales du W3C relatives à l’accessibilité des contenus web. Elles s’organisent autour des quatre principes Perceptible, Utilisable, Compréhensible et Robuste.

Le RGAA est le référentiel français utilisé pour évaluer l’accessibilité des services numériques entrant dans son champ d’application. Il s’appuie sur des exigences techniques et des critères de contrôle permettant d’examiner concrètement l’accessibilité.

Comprendre les principes POUR aide à identifier les grandes catégories de problèmes. En revanche, connaître ces quatre principes ne suffit pas à démontrer qu’un site respecte tous les critères du RGAA ou d’un niveau WCAG donné.

Pour savoir quelles vérifications effectuer, il faut choisir le référentiel pertinent selon le contexte et les obligations applicables.

8. Pourquoi réaliser un audit d’accessibilité web ?

Un audit permet d’aller au-delà des bonnes pratiques générales pour examiner le fonctionnement réel d’un site.

Il aide à identifier les obstacles, à comprendre leur impact sur les utilisateurs et à définir les corrections à prioriser.

Selon le périmètre choisi, il peut notamment porter sur :

• la structure des pages et des titres ;
• les contrastes et les alternatives textuelles ;
• la navigation au clavier ;
• les formulaires et leurs messages d’erreur ;
• les composants interactifs ;
• la compatibilité avec les technologies d’assistance.

Les outils automatiques sont utiles pour repérer certaines erreurs, mais ils doivent être complétés par des vérifications manuelles. Tous les problèmes d’accessibilité ne peuvent pas être détectés automatiquement.

Un audit adapté fournit ainsi une base plus fiable pour organiser les améliorations et suivre les progrès.

Conclusion : les principes POUR, une base pour un web plus accessible

Les quatre principes de l’accessibilité web — Perceptible, Utilisable, Compréhensible et Robuste — permettent de mieux comprendre les besoins des utilisateurs et les obstacles qui peuvent apparaître sur un site internet.

Ils offrent un cadre utile pour concevoir des interfaces plus inclusives, améliorer les contenus et orienter les contrôles techniques.

Pour aller plus loin, il est important de confronter ces principes aux critères du référentiel applicable, de tester les parcours réels et de corriger les problèmes identifiés.

Besoin d’améliorer l’accessibilité de votre site ?

InclusiWeb vous accompagne à Lyon et en Auvergne-Rhône-Alpes pour évaluer l’accessibilité de votre site, identifier les points à améliorer et mettre en place des corrections techniques et éditoriales.

Contactez InclusiWeb pour discuter de votre projet et définir les prochaines étapes.

Sources et ressources utiles

• WCAG — recommandations internationales du W3C
• Introduction aux quatre principes POUR — W3C WAI
• Référentiel général d’amélioration de l’accessibilité (RGAA)