Does each image conveying information have a text alternative?

WCAG Reference

Tests

1. 1.1.1

   Does each image (<img> tag or a tag with the WAI-ARIA role="img" attribute) conveying information have a text alternative?

   1. Find in the document the images implemented using an <img> element or an element with the WAI-ARIA role="img" attribute.
   2. For each image, determine whether the image conveys information.
   3. If it is an <img> element, check that the image has at least one of the following text alternatives:
     • passage of text associated via the WAI-ARIA aria-labelledby attribute;
     • value of the WAI-ARIA aria-label attribute;
     • value of the alt attribute;
     • value of the title attribute.
   4. In the case of an element with the WAI-ARIA role="img" attribute, check that the image has at least one of the following text alternatives:
     • passage of text associated via the WAI-ARIA aria-labelledby attribute;
     • value of the WAI-ARIA aria-label attribute.
   If at least one text alternative is found, the test is validated.
2. 1.1.2

   Does each image map area (<area> tag) conveying information have a text alternative?

   1. Find in the document the <area> elements.
   2. For each <area> element, determine whether the image map area carries information.
   3. Check that the image map area has at least one of the following text alternatives:
     • value of the WAI-ARIA aria-label attribute;
     • value of the alt attribute;
   4. If at least one text alternative is found, the test is validated.
3. 1.1.3

   Does each button of type image (<input> tag with type="image" attribute) have a text alternative?

   1. Find in the document the <input> elements with the type="image" attribute. 2. For each <input> element with the attribute type="image", determine whether the image used conveys information. 3. Check that the <input> element has at least one of the following text alternatives:    • passage of text associated via the WAI-ARIA aria-labelledby attribute;    • value of the WAI-ARIA aria-label attribute;    • value of the alt attribute;    • value of the title attribute. 4. If at least one text alternative is found, the test is validated.
4. 1.1.4

   Is each clickable area in a server-side image map accompanied by a mechanism that can be used regardless of the pointing device used and allows to access the same destination?

   1. Find in the document the <img> elements with the ismap attribute. 2. For each <img> element with the ismap attribute, check for the presence of a link or set of links (or another type of user interface component which plays a similar role, such as a combobox, for example) providing access to the same resources as when the image is clicked. 3. If this is the case, the test is validated.
5. 1.1.5

   Chaque image vectorielle (balise <svg>) porteuse d'information, vérifie-t-elle ces conditions ?

   La balise <svg> possède un attribut WAI-ARIA role="img" ;
   La balise <svg> a une alternative textuelle.
6. 1.1.6

   Chaque image objet (balise <object> avec l'attribut type="image/…") porteuse d'information, vérifie-t-elle une de ces conditions ?

   La balise <object> possède une alternative textuelle et un attribut role="img" ;
   L'élément <object> est immédiatement suivi d'un lien ou bouton adjacent permettant d'accéder à un contenu alternatif ;
   Un mécanisme permet à l'utilisateur de remplacer l'élément <object> par un contenu alternatif.
7. 1.1.7

   Chaque image embarquée (balise <embed> avec l'attribut type="image/…") porteuse d'information, vérifie-t-elle une de ces conditions ?

   La balise <embed> possède une alternative textuelle et un attribut role="img" ;
   L'élément <embed> est immédiatement suivi d'un lien ou bouton adjacent permettant d'accéder à un contenu alternatif ;
   Un mécanisme permet à l'utilisateur de remplacer l'élément <embed> par un contenu alternatif.
8. 1.1.8

   Chaque image bitmap (balise <canvas>) porteuse d'information, vérifie-t-elle une de ces conditions ?

   La balise <canvas> possède une alternative textuelle et un attribut role="img" ;
   Un contenu alternatif est présent entre les balises <canvas> et </canvas> ;
   L'élément <canvas> est immédiatement suivi d'un lien ou bouton adjacent permettant d'accéder à un contenu alternatif ;
   Un mécanisme permet à l'utilisateur de remplacer l'élément <canvas> par un contenu alternatif.

WCAG Techniques

• H36
• H37
• H53
• H24
• F65