Qu'est-ce qu'une mise en page accessible sur le web et sur mobile ?

Qu'est-ce qu'une mise en page accessible ?

Une mise en page accessible est une structure de page ou d'écran que chacun peut lire, parcourir et utiliser, quels que soient ses capacités, son appareil ou ses réglages. L'ordre du contenu est logique, rien ne casse à fort zoom ou sur petit écran, et les commandes sont assez grandes pour être touchées. Elle relève des WCAG, la norme à laquelle renvoient la plupart des lois et appels d'offres.

Comment fonctionne une mise en page accessible

Elle repose sur les principes POUR : perceptible, utilisable, compréhensible, robuste.

• Structure dans le HTML, pas seulement dans le CSS. Utilisez les repères (header, nav, main, footer) et une vraie hiérarchie de titres pour que les utilisateurs de lecteurs d'écran puissent naviguer. N'ajoutez ARIA que lorsque les éléments natifs ne suffisent pas.
• Ordre de lecture et de focus conformes à l'ordre visuel. La touche Tab doit suivre le regard, voir l'ordre de navigation au clavier. CSS grid ou flexbox peuvent le casser sans que cela se voie.
• Refluence. WCAG 2.2, critère 1.4.10 (niveau AA) : le contenu doit pouvoir s'afficher à une largeur de 320 pixels CSS (256 de haut pour un défilement horizontal) sans perte d'information et sans défilement dans deux dimensions, sauf pour les parties qui exigent une mise en page bidimensionnelle, comme les cartes ou les tableaux de données.
• Texte redimensionnable. Critère 1.4.4 (AA) : le texte doit pouvoir être agrandi jusqu'à 200 pour cent sans technologie d'assistance et sans perte de contenu ni de fonction.
• Orientation. Critère 1.3.4 (AA) : le contenu ne doit pas être limité au portrait ou au paysage, sauf si une orientation précise est essentielle.
• Taille des cibles. Critère 2.5.8 (AA, nouveau dans WCAG 2.2) : minimum de 24 par 24 pixels CSS pour les cibles du pointeur, avec des exceptions pour un espacement suffisant, les liens dans une phrase, les commandes équivalentes et les éléments gérés par le navigateur.

Exemple

Une boutique affiche une grille de produits avec une barre latérale de filtres. À 320 pixels CSS de large, la barre devient un bouton « Filtres » au-dessus de la grille, qui passe sur une colonne, et la page ne défile qu'à la verticale. L'ordre de tabulation est en-tête, filtres, produits, pied de page. À 200 pour cent de zoom, le prix et le bouton « Ajouter au panier » restent visibles et utilisables.

Erreurs courantes

• Conteneurs à largeur fixe et tailles de police en pixels qui forcent le défilement latéral au zoom.
• Utiliser order en CSS, le positionnement absolu ou un tabindex supérieur à 0, si bien que le focus ne correspond plus à l'écran.
• Boutons composés d'une seule icône et liens trop serrés de moins de 24 par 24 pixels CSS.
• Choisir les titres selon leur taille plutôt que leur niveau.
• Verrouiller une application sur une orientation sans raison essentielle.

Mise en page, tests et surveillance

Une mise en page se casse facilement lors d'une livraison : vérifiez-la sur de vrais viewports, et régulièrement. Une conception mobile first donne souvent une bonne refluence. Les outils automatiques ne détectent qu'une partie des problèmes et ne savent pas si l'ordre a du sens : ajoutez un contrôle manuel au clavier et au zoom. La surveillance de la vitesse de LoadFocus lance des audits Lighthouse planifiés depuis 25 régions cloud et suit un score d'accessibilité à côté de la performance. À lire aussi : pourquoi les tests de performance doivent inclure l'accessibilité (en anglais).

Questions fréquentes sur la mise en page accessible

Que signifie la refluence dans les WCAG ?

Le contenu s'adapte à un viewport étroit de 320 pixels CSS de large sans perte d'information et sans défilement simultané vertical et horizontal. Les cartes, tableaux de données et contenus similaires qui exigent deux dimensions sont exemptés.

Une mise en page responsive est-elle accessible d'office ?

Non. Le responsive règle la taille d'écran, mais l'accessibilité demande aussi un ordre de lecture et de focus logique, des cibles tactiles utilisables, un texte agrandissable et des titres et repères pertinents.

Quelle taille pour les cibles tactiles ?

WCAG 2.2, critère 2.5.8, fixe un minimum de 24 par 24 pixels CSS, avec des exceptions comme un espacement suffisant ou un lien dans une phrase. Sur téléphone, mieux vaut viser plus grand.

Puis-je verrouiller mon application en portrait ?

Seulement si une orientation précise est essentielle (WCAG 1.3.4). Sinon, prenez en charge les deux, car certains utilisateurs fixent leur appareil sur un support.

Quel niveau WCAG viser pour une mise en page ?

La refluence, la taille du texte, l'orientation et la taille des cibles sont de niveau AA, celui que demandent la plupart des lois et contrats.