Attribut alt vide et image décorative masquée

Pour les images décoratives, la bonne solution est un attribut alt vide : écrivez alt égal deux guillemets, sans rien à l’intérieur.

Un attribut alt vide indique que l’image est décorative. Les lecteurs d’écran l’ignorent donc complètement et ne l’annoncent jamais.

Un alt vide et un alt manquant sont totalement différents. Vide signifie « ignorez-moi volontairement » ; manquant signifie que l’auteur a oublié.

Sans aucun alt, de nombreux lecteurs d’écran lisent à voix haute le nom du fichier, par exemple IMG underscore 4823 dot jpg.

La règle est simple : chaque img a besoin d’un attribut alt. La seule question est de savoir s’il est vide ou rempli.

Les espacements visuels, les lignes et les séparateurs ne portent aucun sens. Ils sont donc des exemples typiques d’utilisation d’un attribut alt vide.

Ne placez pas d’espace entre les guillemets. Un alt réellement vide ne contient rien, pas même un seul espace.

Si une image est véritablement décorative, la solution la plus propre consiste souvent à utiliser une image d’arrière-plan CSS, que l’arbre d’accessibilité ignore complètement.

Vous pouvez également masquer un visuel décoratif en définissant aria-hidden sur true, ce qui est courant pour les icônes SVG intégrées à côté d’un texte visible.

Soyez prudent : ne mettez jamais un alt vide ou aria-hidden sur une image informative, car vous la supprimeriez silencieusement pour certains utilisateurs.

Si une image décorative se trouve dans un lien, celui-ci a tout de même besoin de texte accessible quelque part, sans quoi il n’aura pas de nom.

Bravo ! Un alt vide masque volontairement la décoration, un alt manquant est un défaut, et aria-hidden ou les arrière-plans CSS permettent également de garder les ornements silencieux.