Un menu plus accessible

Pour commencer ce blog sur les petites habitudes du développeur front-end qui peuvent faire progresser significativement l’accessibilité d’un site, il y a celle de la gestion de hauteur CSS des blocs.

Le dimensionnement des blocs,  s’il n’est pas bien conçu, génère bien souvent des problèmes d’accès à l’information. J’ai pris comme exemple une navigation qui devrait parler à tout le monde.

Partons d’un menu classique

J’ai volontairement pris un cas très répandu de montage CSS de menu horizontal. Une liste non ordonnée dont les éléments sont disposés en float:left. Les liens du menu sont affichés en display:block pour assurer une décoration d’image d’arrière plan avec un calage précis et également pour assurer une zone de click suffisamment grande (loi de Fitts).

Il nous faut donc une hauteur

Aïe, on s’est toujours dit qu’il fallait éviter de préciser des hauteurs de blocs dans les CSS, car une hauteur fixe risque forcément de bloquer l’extensibilité du bloc. C’est vrai mais pas seulement pour le volume du contenu qui pourra varier au cours des mises à jour, il faudra aussi que notre menu supporte le zoom texte pour les malvoyants. Parfait, c’est le sujet de ce billet !

La technique de base

Mon fond image représentant une feuille avec une pince mesure 96 pixels de haut. L’intitulé du lien devant être descendu de 36 pixels vers le bas pour ne pas superposer la pince, notre hauteur de bloc sera donc de 60 pixels (hauteur totale – padding-top).
Voilà donc un calage au pixel.

Voyons ce que ça donne :

Démo HTML/CSS avec hauteur de menu en pixels

Quel critère doit-on valider ici ?

Il s’agit du critère 10.4 du référentiel Accessiweb 2.1. Ce critère niveau AA exige que les textes de la page doivent rester lisibles au moins jusqu’au grossissement de 200%.

Pour tester ce critère, prenez Firefox, vérifiez que vous êtes bien en zoom texte seulement (Affichage > Zoom > Zoom texte seulement), puis agrandissez avec la combinaison de touches Ctrl et +.
Pour obtenir ces 200% il faudra agrandir 6 fois. Vous obtenez alors l’augmentation de la taille des caractères de 200%.
Pour revenir à la taille normale, un simple Ctrl 0 suffira.

Qu’est-ce que ça donne sur notre menu ?

Screenshot de notre menu avec une hauteur en pixels : les textes deviennent illisibles

Notre deuxième lien “Arts de la table” chevauche le titre et ces deux éléments deviennent illisibles. Du coup notre menu invalide ce critère Argent. Pourtant nos tailles de polices sont bien exprimées en em, mais cela ne suffit pas…

La technique accessible

Il faudrait que notre menu s’agrandisse proportionnellement à son contenu texte pour éviter tout chevauchement avec le bloc inférieur.
Pour cela il suffit d’utiliser une hauteur exprimée en em comme on l’utilise déjà si bien sur les textes.

Tout ce blabla pour en arriver là ? Oui, en fait c’est super simple surtout si vous êtes déjà familiarisé avec les mesures relatives pour les textes.
Rappel pour la conversion : si vous partez d’un body avec un font-size de 1em et si, ni les conteneurs parents du menu, ni les boutons eux-mêmes n’ont de valeur de font-size redéfinie il suffira de diviser la hauteur de notre bloc en pixels par 16 pour obtenir une valeur en em. Sinon il faudra diviser notre hauteur en em par la valeur du font-size de notre bloc.

Pour notre cas on divise donc 60 par 16 et on obtient la hauteur en em.
Voilà le résultat :

Screenshot de notre menu avec une hauteur en em : les textes sont lisibles

Le CSS avant l’optimisation :

#main-menu li a { height:60px; }

Le CSS après l’optimisation :

#main-menu li a { height:3.75em; }

Démo HTML/CSS avec hauteur de menu en em

Télécharger le code source en format ZIP (8ko)

Pour aller plus loin

On a parlé des menus, mais ce principe est valable pour tous les cartouches de textes qui n’ont pas d’autres choix que d’avoir une hauteur fixe. Devoir définir une hauteur fixe, c’est souvent lié à des contraintes graphiques qu’on ne pourra pas gérer via du CSS. Heureusement le CSS 3 permet dans bien des cas d’éviter cette obligation via des propriétés sans image comme les dégradés, les bords arrondis, les ombrés et aussi les fonds à images multiples au cas où.

Dans le cas des navigations avec sous-menus CSS, cette technique s’applique aussi bien.

Dans le cas des menus horizontaux, si le fait que le menu devienne multi-ligne ne vous pose pas de problème, il est également possible de gérer la largeur en em de chaque item pour éviter les césures disgracieuses. Attention aux largeurs en ems si votre page est en largeur fixe, vous allez rapidement vous retrouvez avec des ascenseurs horizontaux si des blocs larges sont ainsi dimensionnés en em surtout si leur largeur dépasse la moitié de la largeur de page.

Le fait que le texte déborde du fond image n’est pas un problème tant que le contraste de lecture reste confortable, il ne faut pas oublier qu’on reste ici dans une version adaptée et que le graphisme a été pensé pour une taille de texte standard. L’objectif de ce critère 10.4 est la lisibilité à tous les grossissements.

Si vous voulez aller plus loin sur ce sujet :

Pour conclure

Voilà une habitude qui vous prendra à peine plus d’effort que pour un code non accessible : le temps d’une ou deux divisions de pixels en ems pour changer l’unité d’une propriété. Seul le développeur front-end est maître de ce paramétrage alors profitez-en car il en sera rarement ainsi pour les contenus dynamiques où il faudra suivre de près la sémantique HTML de vos contributeurs.

Si on fait le tour de quelques grands sites d’e-commerce et qu’on teste le zoom texte à 200%, on se rend compte qu’il y a du pain sur la planche ! Alors donnez l’exemple et n’oubliez pas pour autant les critères du niveau A qu’il faudra valider !

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *