RGAA Lab

RGAA 4.1.2 · Présentation de l’information · Critère 10.11

Pour chaque page web, les contenus peuvent-ils être présentés sans perte d’information ou de fonctionnalité et sans avoir recours soit à un défilement vertical pour une fenêtre ayant une hauteur de 256 px, soit à un défilement horizontal pour une fenêtre ayant une largeur de 320 px (hors cas particuliers) ?

Une personne qui zoome à 400 % se retrouve dans les mêmes conditions qu'un téléphone de 320 px de large : si la page impose un défilement horizontal, chaque ligne se lit en deux gestes.

Ce que dit le référentiel

Transcription du RGAA 4.1.2, sans interprétation. C’est ce texte qui fait foi, et celui que vous citez dans un rapport.

  1. 10.11.1
    Pour chaque page web, lorsque le contenu dont le sens de lecture est horizontal est affiché dans une fenêtre réduite à une largeur de 320 px, l’ensemble des informations et des fonctionnalités sont-elles disponibles sans aucun défilement horizontal (hors cas particuliers) ?
  2. 10.11.2
    Pour chaque page web, lorsque le contenu dont le sens de lecture est vertical est affiché dans une fenêtre réduite à une hauteur de 256 px, l’ensemble des informations et des fonctionnalités sont-elles disponibles sans aucun défilement vertical (hors cas particuliers) ?

Comment le vérifier

  1. Ramener la fenêtre à 320 px de large — ou zoomer à 400 % sur une fenêtre de 1280 px, ce qui revient au même — et parcourir la page.
  2. Chercher le défilement horizontal, et surtout ce qu'il cache : contenus tronqués, boutons hors champ, menus inatteignables.
  3. Refaire l'exercice en hauteur, à 256 px, pour les contenus dont la lecture est verticale.
  4. Écarter les cas particuliers prévus : ce qui exige une seconde dimension pour être utilisé — tableau de données, carte, vidéo.

Ce que notre outil fait

Jugement humain

Aucune machine ne tranche ce critère. L’outil vous présente les éléments et enregistre votre constat.

Une machine sait mesurer un débordement horizontal, mais un débordement n'est pas toujours une perte, et une perte ne se traduit pas toujours par un débordement. Constater qu'une information manque suppose de savoir laquelle devait être là.

Comment nous mesurons ce que l'outil sait faire · ce critère s'audite dans l'extension RGAA Lab.

Les pièges

Les erreurs qu’on rencontre vraiment, relevées au fil des audits.

  • Une largeur minimale en pixels sur un conteneur (min-width: 960px) est la cause la plus fréquente, et souvent héritée d'un composant tiers.
  • Un tableau de données peut défiler horizontalement : c'est un cas particulier prévu. Une grille de cartes, non.

À lire avec