7 grand axes horizontaux
Le sonTexte de remplacementNavigationPremier plan et arrière-planLa couleurErgonomie et utilisabilitéDesign d'informationImages fixes et animationsBouton de navigationTexte, typographie et lisibilitéLa couleurPrincipes de conception

Images fixes et animations

La qualité de conception et la disposition soigneusement choisie des images peuvent bonifier l’attrait visuel et informationnel d’une page Web. Les images constituent sûrement la zone d’Internet la plus dynamique et ayant le plus d’impact sur les utilisateurs. Malgré cela, même si Internet foisonne d’images et d’animations, on doit constater que la qualité n’est pas souvent au rendez-vous et encore bien peu de producteurs de site Web se soucient de rendre accessible leurs images aux personnes possédant des problèmes visuels.

  • E1

Pourtant, il existe de nombreux moyens, fort simples, de rendre les images accessibles au plus grand nombre d’usagers possibles.

  • D’abord s’assurer que les images possèdent des teintes contrastées et faire une sélection d’images de qualité disposant d’une bonne précision dans sa définition.
  • Surveiller aussi les composantes de l’image (sujet, élément, environnement) pour tenir compte de la vision colorée déficiente.
  • Faire une vérification avec les logiciels ou plugiciels de simulation pour connaître l’apparence que prendra les images vues par les daltoniens.
  • S’assurer d’un contraste suffisant entre l’image et le fond coloré.
  • E2

Néanmoins, on doit éviter d’utiliser des images comme fond d’écran ou comme mappage d’image (image mapping). Cela apporte beaucoup de confusion lors de la lecture et lors de la navigation. Exceptionnellement, si l’utilisation d’images ou de motifs de fond se trouve nécessaire, on doit les utiliser avec un maximum de 10 % de la luminosité (lightness) originale de l’image.

  • E3

Les mini-animations (flash, gif ou autres) peuvent remplacer ou compléter la couleur pour attirer l’attention sur des informations importantes lors de la navigation. Cependant, elles doivent s’utiliser avec discrétion, parcimonie et un temps de fonctionnement de quelques secondes.

  • E4

Et si malgré cela, les utilisateurs ne réussissent pas à l’accession de ces images et réagissent en désactivant l’affichage des graphiques de leur navigateur, mieux vaut avoir prévu l’ajout de l’attribut texte de remplacement « alt » ou « longdesc », car autrement, ils risquent de quitter le site.

Dans le même ordre d’idées, prévoir aussi une description complète de toutes les autres images porteuses d’information comme images cliquables, les animations, les images utilisées comme texte ou puce. Dans le cas particulier des images cliquables, on doit prendre l’habitude de décrire chacune des zones actives en prenant l’attribut « alt » avec l’élément AERA ou MAP (DCG 99).

Lorsque l’utilisation de production multimédia (vidéoclip, animation) s’avère nécessaire, une courte légende « alt » ainsi que des descriptions « longdesc » pour les séquences vidéos est nécessaire. Idéalement, il faut fournir une transcription textuelle pour les éléments de la production audio.

  • E5

Les éléments imagiers au même titre que les contenus textuels peuvent comporter plusieurs zones interactives. Ces zones sensibles s’accommodent bien de substrat sonore pour attirer l’attention sur la partie de l’image. Des éléments sonores peuvent soutenir une couleur afin de révéler l’importance d’une image dans un contexte donné.

La partie visuelle d’une production Internet constituée par les images fixes ou animées peut augmenter de façon notable l’impact et l’intérêt d’un site Web. Toutefois, des images de mauvaise qualité visuelle, composées de couleurs et contrastes confondants contribuent à éloigner les utilisateurs même si le site contient des informations intéressantes.