FAQ version Beta 0.5
Accessibilité
Balise <img> ou feuille de style ?
Pour alléger les documents, doit-on systématiquement placer ses images dans les feuilles de styles CSS ?
Il existe principalement deux méthodes pour afficher une image ou illustration au sein d'une page web :
* employer l'élément <img>
* faire apparaître l'image en arrière-plan d'un élément à l'aide de la propriété CSS "background-image"
Ces deux alternatives répondent à des besoins précis et sont complémentaires. Il ne faut surtout pas privilégier l'une aux dépends de l'autre.
Lorsque les CSS sont désactivés, ou lors d'un rendu sur un navigateur non graphique ou un média différent de l'écran (navigateur textuel, imprimante, plage braille, synthèse vocale, etc.), les images d'arrière-plan ne sont pas restituées contrairement aux éléments <img> qui font partie intégrante du document. Et seules les éléments <img> ont un mécanisme permettant de les remplacer par leur alternative textuelle lorsqu'elles ne sont pas restituées (l'attribut alt).
Il faut donc distinguer deux cas de figure :
1-Premier cas : l'image est décorative.
Il peut s'agir d'illustration de fond, de bordure imagée, d'arrondi, de puces ou toute autre décoration qui n'apporte rien au contenu de la page. Elle peut être gérée de deux manières :
- Cette image décorative peut être une image HTML <img> si celle-ci est dotée d'un attribut alt="": il est indispensable de lui donner une alternative textuelle vide puisqu'elle ne véhicule aucune information qui devrait être lue par un lecteur d'écran, affichée par un navigateur non graphique, etc. Un attribut alt non vide "parasitera" le contenu du document et rendra sa compréhension plus difficile.
- Pour améliorer la séparation structure/présentation, cette image décorative gagne à être gérée à l'aide de la propriété CSS background, en tant qu'image d'arrière-plan CSS, dans une feuille de style externe.
2-Second cas : l'image apporte du contenu.
A partir du moment où l'image est informative et fait partie intégrante du contenu (une photo, un bouton, un logo), ou lorsqu'elle a un rôle fonctionnel (image lien, bouton), il faut que cette information puisse être véhiculée même si les styles CSS sont désactivés ou sur les navigateurs non graphiques.
Il faut donc faire apparaitre l'image dans la structure HTML à l'aide de la balise <img> dûment renseignée avec l'attribut "alt" correspondant, pour en donner un équivalent textuel.
Ceci est particulièrement important quand une image est le seul contenu d'un élément lien <a> : elle ne doit alors en aucun cas être gérée en tant qu'image d'arrière-plan CSS. Si l'on souhaite réaliser un effet au survol (rollover), il faut passer par javascript : l'effet ne justifie pas le passage de l'image en arrière-plan CSS, qui ne serait pas accessible.
Pour aller plus loin, lire l'article d'Openweb à propos de l'accessibilité des images.
Il existe principalement deux méthodes pour afficher une image ou illustration au sein d'une page web :
* employer l'élément <img>
* faire apparaître l'image en arrière-plan d'un élément à l'aide de la propriété CSS "background-image"
Ces deux alternatives répondent à des besoins précis et sont complémentaires. Il ne faut surtout pas privilégier l'une aux dépends de l'autre.
Lorsque les CSS sont désactivés, ou lors d'un rendu sur un navigateur non graphique ou un média différent de l'écran (navigateur textuel, imprimante, plage braille, synthèse vocale, etc.), les images d'arrière-plan ne sont pas restituées contrairement aux éléments <img> qui font partie intégrante du document. Et seules les éléments <img> ont un mécanisme permettant de les remplacer par leur alternative textuelle lorsqu'elles ne sont pas restituées (l'attribut alt).
Il faut donc distinguer deux cas de figure :
1-Premier cas : l'image est décorative.
Il peut s'agir d'illustration de fond, de bordure imagée, d'arrondi, de puces ou toute autre décoration qui n'apporte rien au contenu de la page. Elle peut être gérée de deux manières :
- Cette image décorative peut être une image HTML <img> si celle-ci est dotée d'un attribut alt="": il est indispensable de lui donner une alternative textuelle vide puisqu'elle ne véhicule aucune information qui devrait être lue par un lecteur d'écran, affichée par un navigateur non graphique, etc. Un attribut alt non vide "parasitera" le contenu du document et rendra sa compréhension plus difficile.
- Pour améliorer la séparation structure/présentation, cette image décorative gagne à être gérée à l'aide de la propriété CSS background, en tant qu'image d'arrière-plan CSS, dans une feuille de style externe.
2-Second cas : l'image apporte du contenu.
A partir du moment où l'image est informative et fait partie intégrante du contenu (une photo, un bouton, un logo), ou lorsqu'elle a un rôle fonctionnel (image lien, bouton), il faut que cette information puisse être véhiculée même si les styles CSS sont désactivés ou sur les navigateurs non graphiques.
Il faut donc faire apparaitre l'image dans la structure HTML à l'aide de la balise <img> dûment renseignée avec l'attribut "alt" correspondant, pour en donner un équivalent textuel.
Ceci est particulièrement important quand une image est le seul contenu d'un élément lien <a> : elle ne doit alors en aucun cas être gérée en tant qu'image d'arrière-plan CSS. Si l'on souhaite réaliser un effet au survol (rollover), il faut passer par javascript : l'effet ne justifie pas le passage de l'image en arrière-plan CSS, qui ne serait pas accessible.
Pour aller plus loin, lire l'article d'Openweb à propos de l'accessibilité des images.
Liens complémentaires