Accessibilité

Les 17 Nouveaux Critères du WCAG 2.1 | Focus

Par Moïse Akbaraly, le 15 février 2019 à 14:30

L’accessibilité numérique est d’une importance capitale ! Pour respecter ses principes, le W3C émet constamment des directives regroupées sous forme d’un web accessibility guidelines, ou WCAG. Depuis sa création, nous assistons à de nombreuses mises à jour qui ne viennent nullement remplacer les versions précédentes mais plutôt mettre la barre encore plus haut.

Le WCAG standard est vague pour vous ? Cela va de soi, avec tous ces critères existants, voilà pourquoi nous vous proposons ce guide complet. Vous y trouverez tous les éléments de réponse nécessaires sur le sujet, notamment son principe, les évolutions et les nouveautés.

Mais nous allons surtout nous intéresser à la plus récente validation WCAG : la norme WCAG 2.1. Qu’est-ce que c’est ? Nous vous l’expliquons tout de suite, puis vous dressons la liste des 17 nouveaux critères du WCAG 2.1.

80 chiffres clés sur l'accessibilité numérique des principaux sites e-commerce et corporate

Qu'est que le WCAG ?

Il s’agit des règles d’accessibilité numérique définies par le W3C, organisme de normalisation international, dans le cadre de l'initiative WAI (Web Accessibility Initiative).

Ces normes réglementent la mise en œuvre d’un site web pour sensibiliser et orienter les concepteurs à développer des sites accessibles et compatibles sur les différents terminaux.

L’objectif de l’accessibilité WCAG est de permettre un égal accès aux innovations technologiques pour les personnes en situation de handicap, que ce soit un handicap physique et sensoriel (moteur, auditif, visuel), mental (intellectuel, psychique cognitif) et les personnes âgées.

Mais pas seulement, car les contenus web accessibles rendent plus facile la navigation par tous les utilisateurs en général.

À ce sujet, la loi sur l’accessibilité numérique (loi février 2005 sur l’égalité des droits et des chances, la participation et la citoyenneté des personnes handicapées) stipule que « Les services de communication publics en ligne des services de l’État, des collectivités territoriales et des établissements publics qui en dépendent doivent être accessibles aux personnes handicapées (...) ».

Historique WCAG : de WCAG 1.0 aux nouveautés WCAG 2.1

À la publication de la première version WCAG principes, le WCAG 1.0, il fallait se conformer à 14 directives - les 11 premières visaient à assurer une transformation simple du contenu, par exemple apporter des solutions équivalentes aux contenus visuels et auditifs. Ces règles concernaient surtout les contenus HTML.

En 2008, la mise à jour 2.0 (WCAG 2.0) tire profit de WCAG 1.0 et élargit son champ d’application en ciblant d’autres technologies : CSS, XML, Silverlight, Flash, PDF. Un guide, comme une charte accessibilité numérique, voit le jour pour que les concepteurs puissent s’y conformer. Dans la foulée, la structuration des consignes vient compléter la démarche en l’axant sur 4 principes :

  • WCAG Perceptible
  • Utilisable
  • Robuste
  • Compréhensible

Le 5 juin 2018, le W3C officialise le WCAG 2.1 qui étend les directives d’accessibilité du contenu Web 2.0. Les nouvelles règles ne viennent nullement remplacer celles de WCAG 2.0, mais renforcer les stratégies d'accessibilité web tout en maintenant les directives d’accessibilité recommandées par WCAG 2.0.

17 nouveaux critères ont été intégrés, concernant des problématiques liées au mobile, à la basse vision et au handicap cognitif. Ils sont répartis sur les trois niveaux de complexité définis par le W3C : A, AA et AAA.

Liste des nouveaux critères

1- Orientation AA

Le contenu ne limite pas sa vue et son fonctionnement à une seule orientation d’affichage telle que le portrait ou le paysage, sous réserve qu’une orientation d’affichage spécifique soit essentielle.

2- Identifier les objectifs communs AA

L’objectif vise à ce que l’utilisateur puisse identifier chaque champ de saisie, collectant des informations personnelles, de façon programmatique.

3- Identifier l’objectif (AAA)

Dans le contenu implémenté au moyen de langages de balisage, l’objectif des composants d’interface utilisateur, des icônes et des régions, peut être déterminé par programmation.

4- Recomposition de contenu (AA)

Le contenu d’un site est affiché sans perte d’informations ou de fonctionnalité. Autrement dit, un zoom de 400 % est nécessaire sans avoir recours à un bouton d’ascenseur pour le défilement.

La création du site en fonction des critères du responsive design devient un must absolu, car elle adapte l’affichage des blocs de contenu selon la taille de l’écran et permet une gestion optimale des points de rupture.

Photo d'illustration sur les normes WCAG 2.1

5- Contraste pour les éléments non textuels (AA)

Le contraste minimum recommandé est au moins 3:1 en comparaison aux autres couleurs utilisées.

  • Composants d’interfaces utilisateur : information visuelle permettant d’indiquer les états et les délimitations des composants de l’interface.
  • Composants graphiques : éléments graphiques servant à la compréhension du contenu.

6- Espacement des textes (AA)

Il s’agit de respecter des espacements spécifiques entre chaque paragraphe/ligne/mot/lettre même si l’utilisateur souhaite changer de style d’affichage, par exemple modifier de police de caractère.

En somme, les textes doivent être toujours lisibles quand bien même l’utilisateur effectue des modifications.

7- Contenu au survol ou au focus (AA)

Ce critère concerne notamment les contenus (menu déroulant et autres bulles d’aide en tout genre) qui s’affichent au survol du pointeur ou lors d’une tabulation.

L’internaute doit être en mesure de déplacer son pointeur ou le focus du clavier sur le contenu affiché, cacher ce contenu sans déplacement de curseur ni tabulation.

Le contenu doit également être caché lorsque le curseur ou la tabulation ne se trouve plus sur l’élément déclencheur.

8- Raccourcis de touches de caractères (A)

L’activation/la désactivation ou la reprogrammation des raccourcis clavier existants (composés d’une touche seulement) est possible pour éviter tout déclenchement involontaire.

9- Fin de session (AAA)

Lorsque l’utilisateur n’effectue aucune action, il est averti de la durée de toute inactivité qui pourrait causer une perte de données, à moins que les données ne soient conservées pendant plus de 20 heures (lorsque l’utilisateur ne réalise aucune action).

10- Animation à partir d’interaction (AAA)

L’affichage de contenu en mouvement déclenché par interaction peut être désactivé sous réserve que l’animation soit essentielle à la fonctionnalité ou au message transmis.

Ce critère n’est pas le même que celui WCAG 2.2.2 qui tient compte de l’affichage des contenus en mouvement déclenché automatiquement. Par exemple, le scroll est perçu comme une action volontaire de l’internaute, les effets de la parallaxe (impact de changement de position de l'observateur sur un objet observé) ne s’appliquant pas au critère WCAG 2.2.2.

Découvrez notre modèle gratuit de rapport annuel accessible à tous !

11- Gestuelle de pointeur (A)

L’ensemble des options fonctionnant grâce aux gestes multi-points ou des trajectoires pour réaliser une action peut aussi s’activer avec un seul pointeur et sans parcours. Mais cette condition n’est pas stricte si le geste multipoints ou le geste basé sur le parcours est indispensable.

On peut prendre pour exemple un site internet intégrant une map fonctionnant avec option dézoom, par pincement des doigts. L’utilisateur doit avoir accès aux boutons [+] et [-] pour effectuer un zoom avant et arrière.

12- Annulation du pointeur (A)

En cas de mauvaise gestion de l’évènement déclencheur, les actions ne peuvent pas se produire. En d’autres mots, les actions déclenchées par un clic doivent être effectives uniquement à la fin, au relâchement de la touche (pour un clavier). Ce critère permet ainsi à l’utilisateur d’annuler l’action réalisée accidentellement.

13- Étiquette dans le nom (A)

Pour les composants d’interface possédant des étiquettes avec texte ou images de texte, le nom doit reprendre le texte affiché afin que les demandes sur dispositifs vocaux puissent être traitées.

14- Activation par le mouvement (A)

Les fonctionnalités opérant à l’aide de mouvement de l’appareil ou le mouvement de l’utilisateur peut également être commandé par des composants de l’interface utilisateur.

Il est donc possible d’annuler l’action au mouvement pour éviter un déclenchement accidentel. Dans un jeu par exemple, s’il faut la manette pour aller dans une direction quelconque une option similaire est essentielle à l’aide d’une commande de l’interface.

15- Taille de cible (AAA)

La taille des éléments cliquables doit faire minimum 44 par 44 px, sauf dans les cas suivants :

  • La cible est disponible via un contrôle équivalent sur la même page
  • La cible est dans une phrase ou dans un bloc de texte
  • La taille de la cible est définie par l’agent utilisateur
  • Une présentation spécifique de la cible est essentielle à la transmission de l’information

16- Mécanismes d’entrée simultanée (AAA)

Le site web ne limite pas l’utilisation de plusieurs types de saisie pour entrer une information, à moins que la restriction soit nécessaire pour garantir la sécurité du contenu ou pour respecter les paramètres de l’utilisateur.

En effet, plusieurs mécanismes de saisie peuvent être utilisés lors de la navigation sur un site web. Par exemple une combinaison de mécanisme impliquant une souris et un écran tactile. On peut simplement supposer que le toucher est le seul mécanisme d’entrée souhaité.

17- Changement de statut (AA)

Les messages comme des notifications, changement de statut ou tout autre message apparaissant à l’écran est présenté par programmation à l’utilisateur sans qu’il ait à déplacer le focus sur le message lié à l’état courant de l’action.

Après avoir passé en revue ces critères, on constate que malgré une évolution constante du WCAG, de nombreux sites demeurent inaccessibles. D’où l’importance de trouver une méthode intuitive capable de répondre aux règles imposées par l’organisme de normalisation web.

Toujours avant-gardiste dans le secteur numérique, Ipedis a su développer des solutions uniques pour rendre les documents numériques accessibles et conformes aux standards WCAG (Web Content Accessibility Guidelines) 2.1.

PubliSpeak le prouve en amenant les documents numériques PDF à un haut niveau d’accessibilité interne et en les transformant en site interactif pour une meilleure expérience de navigation.

80 chiffres clés sur l'accessibilité numérique des principaux sites e-commerce et corporate

Moïse Akbaraly

Moïse Akbaraly

Créée à l’initiative de deux passionnés, Ipedis est aujourd’hui une agence française de Digitale Publishing reconnue, experte en accessibilité numérique. Interface interactive, Digital Digest, PDF accessible, Ipedis propose des solutions adaptées à la transformation digitale des grandes entreprises telles que BNP Paribas, Publicis Groupe, Axa, Hermès, Air Liquide ou encore Bouygues. Ipedis s’appuie sur une solide équipe de 20 talents, tous portés par la même conviction : la technologie au service de l’innovation sociale.

Quels sont les 80 chiffres clés de l'accessibilité numérique en France des sites e-commerce et institutionnel ?

DÉCOUVREZ LES 80 CHIFFRES CLÉS DE L'ACCESSIBILITÉ NUMÉRIQUE EN FRANCE