Eric est un designer basé à Boston qui aide à créer des solutions simples qui répondent aux besoins pratiques, physiques, cognitifs et émotionnels d'une personne.
Le placement d'images sur le Web moderne est hautement intentionnel, aidant à communiquer l'objectif global d'une page ou d'une vue. Cela signifie que presque chaque image que vous déclarez doit avoir une description alternative.
Nulling une description alt signifie qu'il n'y a aucune information entre les guillemets d'ouverture et de fermeture. S'il y a un espace vide, il ne sera pas considéré comme annulé :
Cette image a été annulée.
Cette image n'a pas été annulée.
Que signifie « décoratif » ?
L'annulation d'une image indique que c'est à des fins décoratives uniquement.
Dans ce contexte, décoratif signifie que l'image ne communique pas visuellement des informations qui sont importantes pour comprendre le but de la page ou de la vue, et pourquoi l'image est incluse dans le cadre de cela.
Par exemple, un site Web qui vend du papier peint voudra avoir des descriptions alternatives pour les échantillons de papier peint :
Un autre exemple pourrait être un site Web de musée, où la présentation d'une pièce de leur collection pourraient bénéficier à la fois d'une description alternative et d'une légende :
Vue de Rotterdam, par Cornelis Boumeester. Date : vers 1700-1720. Numéro d'accession : 2005.1057. Dans les maisons néerlandaises, les carreaux servaient généralement à des fins utilitaires, telles que le revêtement des murs des cuisines, des buanderies, des passages et des encadrements de cheminée.
Pourquoi voudriez-vous rendre une image décorative ?
La technologie d'assistance ignorera les images annulées et n'annoncera pas leur présence. Les raisons de vouloir le faire sont principalement historiques.
Anciennes techniques de mise en page
Les premières techniques de développement Web s'appuyaient sur des images pour les aider à garantir une mise en page cohérente sur différents systèmes d'exploitation, navigateurs et versions de navigateur. L'exemple le plus courant était un spacer.gifun pixel transparent 1 × 1 qui a été étiré à différentes tailles pour mettre le contenu en place.
Trois spacer.gifs étirés utilisés pour créer une marge extérieure pour le texte, "Bienvenue sur ma page d'accueil". ( Grand aperçu)
Cette technique utilise généralement de nombreuses images d'espacement pour créer une conception visuelle. Sans moyen de faire taire leur présence, ces images encombreraient ce que la technologie d'assistance annonçait et rendraient la navigation et l'action sur le contenu déroutantes et fastidieuses.
Anciennes techniques de conception
Avant, il y avait des propriétés CSS telles que box-shadowles développeurs devaient utiliser des techniques qui découpaient le style décoratif pour le faire fonctionner avec un contenu de hauteur ou de largeur indéterminée. Cette technique s'appelait Mise à l'échelle à 9 tranchesun terme qui fait référence aux 9 sections de contenu que vous auriez besoin de créer.
La technique de mise à l'échelle à 9 tranches ( Grand aperçu)
Tout comme les images d'espacement, la mise à l'échelle à 9 tranches utilisait plusieurs images pour créer l'effet visuel souhaité. Et, tout comme les images d'espacement, la seule façon de supprimer le fouillis ces images créées était de les marquer comme décoratives.
Annonces redondantes.
Il existe un scénario rare où une image est répétée sur une page ou une vue, et ses emplacements répétés ne fournissent aucun contexte supplémentaire. Vous devez faire attention à marquer une image décorative dans cette situation, car l'absence d'annonce pour une image visible peut être déroutante pour une personne malvoyante qui utilise un lecteur d'écran.
Icônes supplémentaires[19659023]Les liens et les boutons qui utilisent des icônes doivent toujours avoir un nom accessible qui communique les fonctionnalités. Si le design intègre également une icône, le design de l'icône n'a pas besoin d'être communiqué.
Si le composant n'utilise qu'une icône, l'image elle-même doit être utilisée pour créer le nom accessible :
CSS moderne. la mise en page et les techniques de style signifient que le placement des images est désormais hautement intentionnel. Cela signifie que si une image est utilisée, elle aura probablement besoin d'une description alternative.
Il existe quelques autres façons d'afficher une image sur une page ou une vue. Il est important de s'assurer qu'une description alternative est fournie si l'image contient un contenu significatif — quelle que soit la technique utilisée.
L'élément picture
L'picture[L'élément n'a pas de rôle implicitece qui signifie que sa présence ne communique aucun but à la technologie d'assistance. Cela signifie qu'il ne peut pas être utilisé pour décrire sémantiquement la présence d'une "image".
L'élément picture est un conteneur pour source et img éléments. Utilisez l'attribut img de l'élément alt pour fournir une description alternative pour l'élément parent picture.
Images d'arrière-plan
On peut utiliser CSS pour déclarer une image en arrière-plan sur un élément HTML. Ceci est le plus souvent utilisé pour ajouter un sens de la texture à une conception.
Cependant, une autre technique populaire consiste à utiliser une image d'arrière-plan pour placer une image de telle manière que le développeur n'aura pas le contrôle sur la taille de l'image que quelqu'un télécharge. background-imagecombinée à d'autres propriétés telles que background-size garantira que le contenu d'une taille inconnue est affiché sans casser la conception.[19659061]Voir le stylo [Background Image As Foreground Image Example](https://codepen.io/smashingmag/pen/OJprPwK) par Eric Bailey.
Dans la conception et le développement Web modernes, l'affichage d'une image est un acte hautement intentionnel. Des descriptions alternatives nous permettent d'expliquer le contenu de l'image et, ce faisant, de communiquer pourquoi cela vaut la peine d'être inclus.
Ce n'est pas parce qu'une image affiche quelque chose de fantaisiste qu'elle ne vaut pas la peine d'être décrite. . L'annonce de sa présence garantit que tout le monde, quelles que soient ses capacités ou ses circonstancespeut pleinement comprendre votre expérience numérique.
(vf, il)