Notions graphiques d’accessibilité

Principales notions graphiques de l'accessibilité web

Qu’appele-t-on l’accessibilité pour le web ?

Il s’agit de mettre à disposition le Web et ses services de façon optimale auprès de tous les individus, quel que soit leur matériel ou logiciel, leur infrastructure réseaux, leur langue maternelle, leur culture, leur localisation géographique ou leurs aptitudes physiques ou mentales (source : W3C)

L’objectif de l’accessibilité est donc de permettre à tous de naviguer sur le Web de façon optimale, indépendamment :

  • de l’équipement informatique utilisé (smartphone, laptop, ordinateur de bureau)
  • du navigateur utilisé (mise à jour récente / ancienne)
  • du type de connexion utilisé (bas débit, adsl, fibre optique…)
  • des difficultés individuelles (malvoyants ou non voyants, handicaps moteurs, mentaux ou temporaires)

On distingue deux domaines de gestion de l’accessibilité pour le web :

  • l’accessibilité technique, qui concernera un code HTML/CSS « propre », une utilisation non intrusive de technologies tels quel Javascript ou Flash, une navigation sur tous supports (mobile, tablette, écran de bureau)…
  • l’accessibilité graphique que nous allons étudier dans cet article, qui concernera un système de navigation clair et intuitif, une hiérarchisation de la structure des contenus texte, un contraste visuel clair entre les différents blocs de contenus, une lisibilité des textes, une reconnaissance visuelle des liens hypertexte et une optimisation des fichiers images.

Voici ci-dessous plusieurs recommandations qui permettront une mise en page claire, structurée et optimisée de votre site Internet.

1/ Simplicité du système de navigation
2/ Lisibilité et hiérarchisation de la structure et des contenus texte
3/ Un contraste visuel entre les blocs de contenu
4/ La reconnaissance visuelle des liens hypertexte
5/ Optimiser ses images pour le web

 
1/ Simplicité du système de navigation

Les différents menus au sein d’un site ont maintenant une position fixe et reconnue par les utilisateurs réguliers d’Internet. Il est fortement déconseillé de complexifier cette habitude de navigation.

  • Menu principal
    Le menu principal doit être présent en haut et sur toutes les pages du site : c’est le principal moyen de navigation du site.

    Exemple de menu principal en haut de page sur le site Natixis

    Exemple de menu principal en haut de page sur le site Natixis

  •  

  • Menu secondaire
    Le menu secondaire contient les sous-rubriques. Il peut apparaître au clic ou au «rollover» sur une rubrique du menu principal, ou bien apparaître au dessous, dans un bloc vertical, sur la gauche de l’écran (exemple des sites ecommerce)

    Exemple de menu secondaire du Figaro

    Exemple de menu secondaire du Figaro

  •  

  • Menu transversal
    Il donne un accès, à tout moment, à des liens prédéfinis en général (Contact, Plan du site, Mentions légales, CGV…)

    Menu transversal en haut de page du site de l'école Louis Lumière

    Menu transversal en haut de page du site de l’école Louis Lumière

  •  

  • Footer (ou menu pied de page)
    Le menu footer (pied de page) est bien souvent un rappel du menu principal du site. Des rubriques types d’un menu transversal peuvent aussi se retrouver dans le menu footer

    Menu en pied de page du site Youtube

    Menu en pied de page du site Youtube

 
 
2/ Lisibilité et hiérarchisation de la structure et des contenus texte

  • Les paragraphes de texte doivent être structurés, de sorte à ce qu’une hiérarchie claire apparaisse dans les contenus (taille des caractères, couleur, graisse…).
    L’usage des balises « H1 », « H2″… pour les niveaux de titre, et des balises « LI » et « UL » pour les listes et paragraphes est fortement conseillé

    Exemple de pratiques différentes de hiérarchisation des textes

    Exemple de pratiques différentes de hiérarchisation des textes

  •  

  • Concernant l’usage de polices personnalisées sur votre site (qui ne sont pas des polices web et qui ont donc peu de chances d’être installées sur les ordinateurs de vos internautes), cela reste possible via la propriété CSS « @font-face » mais la compatibilité avec certains navigateurs reste encore problématique (versions inférieurs à I.E 9 par exemple).
    Certaines fonderies interdisent aussi l’usage de cette propriété pour les fontes qu’ils vendent, car la fonte qui sera uploadée sur votre serveur sera accessible assez facilement par n’importe qui. L’usage d’outils tels que Google web fonts, Typekit ou FontSquirrel reste une alternative sûre à ces problèmes de droits de diffusion.

    la propriété CSS @font-face apporte une nouvelle dimension pour la hiérarchie de vos textes

    La propriété CSS @font-face apporte une nouvelle dimension pour la hiérarchie de vos textes

  •  

  • La taille des caractères de vos textes de contenu doit être d’1em (12pt ou 16px) pour une lecture à environ 60cm du périphérique écran, selon la norme ISO 9241-303.
    Elle peut être inférieure – 10 ou 11pts – pour un affichage sur smartphone, car la lecture se fait plus proche de l’écran. Ne pas oublier que le point (pt) est une unité absolue, et donc que c’est l’unité à privilégier si vous voulez obtenir un affichage identique de vos textes sur tous les périphériques.

    Le site PXtoEM (http://pxtoem.com) vous permet de convertir facilement les différentes unités entre elles

    Le site PXtoEM (http://pxtoem.com) vous permet de convertir facilement les différentes unités entre elles

  •  

  • Pour favoriser la lecture de vos textes de contenu, il faut éviter les tons sur tons, par exemple : texte de couleur noire sur un fond gris foncé. Les dégrades de couleur en fond sont aussi peu recommandés s’il y a du texte par dessus.
    Un bon outil pour savoir si vos contrastes texte/fond d’écran sont corrects est le site Snook.

    L'outil Snook Colour Contrast permet d'analyser la lisibilité de vos contrastes texte / fond d'écran

    L’outil Snook Colour Contrast permet d’analyser la lisibilité de vos contrastes texte / fond d’écran

  •  

  • Pour le web, l’interligne d’un paragraphe peut être réglé grâce à la propriété CSS « line-height » (utiliser une valeur en pourcentage plutôt qu’en pixels).
    Concernant l’interlettrage ou crénage, il faudra utiliser la propriété « letter-spacing », mais cela est peu recommandé si vous utilisez une police qui possède déjà un réglage précis à ce niveau (préférer l’usage de polices de fonderies plutôt que de banques de police, type DaFont). L’interlettrage peut tout de même varier pour obtenir des styles graphiques précis, tel que l’usage de la fonte Helvetica Bold avec un interlettrage très resserré.

    L'interlettrage ne doit être modifié qu'en cas de mise en forme d'un style graphique précis et reconnu

    L’interlettrage ne doit être modifié qu’en cas de mise en forme d’un style graphique précis et reconnu

  •  

  • Si vous souhaitez utiliser une justification pour vos paragraphes de textes (alignement vertical aux extrémités de la zone de texte), méfiez-vous des « lézardes » et « rivières » qui font apparaître des espaces blancs
    disgracieux entre les mots
    , et qui ne permettent pas une lecture confortable du texte.

    La justification non optimisée d'un texte peut créer de nombreuses lézardes perturbant le "gris typographique"

    La justification non optimisée d’un texte peut créer de nombreuses lézardes perturbant le « gris typographique »

 
 
3/ Un contraste visuel entre les blocs de contenu

Le design d’une maquette d’un site Internet est principalement composé de différents blocs (textes, iconographie, formulaires, publicité…). Afin d’établir une hiérarchie ou une relation entre ces différents blocs, il convient d’utiliser différentes techniques de contrastes :

Différents contrastes de forme

Les 6 types de contrastes primaires utilisés habituellement en webdesign

 
Sur les deux exemples suivantes, on se rend rapidement compte de la différence de contraste entre les deux blocs contenant les mêmes informations :

Différence de contrastes entre deux mêmes blocs

L’image de gauche apparaît plate : tous les contenus sont au même niveau. Au contraire, sur l’image de droite, les contrastes de taille, de texture et de couleur ainsi qu’une hiérarchisation des textes et l’ajout de pictogramme apportent du dynamisme à ce bloc de contenu

 
Le site du Groupe M6 est un autre exemple de ce qu’il ne faut pas faire : pas ou peu de contrastes de couleur, de taille ou de position entre les blocs.

 
 
4/ La reconnaissance visuelle des liens hypertexte

  • Un lien hypertexte au format texte doit apparaître sous une forme soulignée, ou doit être d’une couleur (moins
    recommandé à cause de certains handicaps visuels) ou d’une graisse différente du style de texte général.

     Mauvais exemple de lien vu sur la plate-forme de connexion de Free

    Mauvais exemple de lien vu sur la plate-forme de connexion de Free

  • Lorsque un lien est composé de deux éléments proches comme du texte et un pictogramme, la zone cliquable doit comprendre ces deux éléments
  • Plus la zone de lien est petite, plus l’utilisateur aura du mal à la sélectionner. Les zones d’interaction des liens, pour être cliquables et facilement sélectionnables, doivent être suffisamment grandes
  • Les liens explicites sont mieux compris : il vaut mieux placer des liens sur des mots clés que par l’intermédiaire d’un «Cliquez ici»
  • Si le lien est une image, l’emploi d’une infobulle via l’attribut «alt» de la balise «img» est très recommandé (pour le référencement aussi). En effet, le texte de l’infobulle se substituera aussi à l’image en cas de non-chargement de celle-ci. L’infobulle sera aussi lue par un navigateur vocal pour une personne non-voyante. Sans balise «alt», impossible pour cette personne de s’imaginer cette image.

 
 
5/ Optimiser ses images pour le web

Plusieurs comportements sont à adopter afin de réduire le poids des images et du coup augmenter la vitesse de chargement de vos pages :

  • Découper l’image sur Photoshop à la taille exacte de celle qui sera intégrée dans la page HTML (on ne resize pas dans le code pour éviter de charger inutilement une image plus lourde)
  • Sauvegarder vos images en 72 ou 96 dpi (ppp), même si la résolution d’écran est supérieure (tablettes et mobiles par exemple) : sur des formats d’image si petits, la différence de résolution est presque imperceptible.
  • Contrairement à l’idée reçue, une image en mode «Niveaux de gris» sauvegardée en JPG sera plus lourde qu’une image noire et blanche en mode «RVB». Les contrastes sont cependant plus marqués sur une image en «Niveaux de gris».
  • Passer par le mode «Enregistrer pour le Web et les périphériques» de Photoshop pour sauvegarder une image une fois modifiée. La compression peut être fixée à 80% pour 75% de poids en moins et sans perte de qualité d’image.
  • Privilégier le format JPEG dans un cas normal ou pour les photos couleur. Si l’image possède un fond transparent, s’il s’agit d’un logo, privilégier le format PNG. Enfin, si l’image est animée, si c’est un bouton pour le web, une photo N&B, utiliser le format GIF.