The DIAGRAM Center recommends the following be deemed essential:
Reading systems and users must have a dependable way to skip or ignore visual elements that do not require supplemental description.
1a. If the image is purely decorative or conveys no important information, apply both null @alt (alt=””) and role=”presentation” to the <img> element so assistive technology will ignore the image. Below is a simple example.
<img src=”horizontalrule.jpg” role=”presentation” alt=”” />
Note that the presence of role=”presentation” will, in most cases, cause assistive technology to ignore the image even if non-empty @alt (e.g., alt= “[sometext]“) is present.
Reading systems and users must be able to access alternate text or image descriptions when access to images is required for understanding the content.
2a. If the image is sufficiently described in the surrounding text, apply a non-empty @alt to the <img> element in order to label the image as the one being referenced and described in the surrounding text. No further description is required, as it would be redundant.
<p>In the first cell-division diagram below, a single cell undergoes several changes, beginning with…</p>
<img src=”cell-division.jpg” alt=”first cell-division diagram”>
2b. If the image is presented using the <figure> element and also uses the <figcaption> element to provide an associated visual caption, and if that caption is sufficient to describe the image to non-visual users, apply a non-empty @alt to the <img> element in order to label the image as the one being referenced in the caption. No further description is required, as it would be redundant. NOTE: because all browsers and assistive technology do not yet provide consistent support for the <figure> element, it is recommend that authors include role=”group” with the <figure> element, as well as include @alt containing a simple label. An example is shown below.
<img src=”watermolecule.jpg” alt=”Figure 1″>
<figcaption>A water molecule is made of two hydrogen atoms and one oxygen atom. The two hydrogen atoms are positioned on the oxygen atom and are separated by approximately 105 degrees, as shown in Figure 1.
Also see HTML5: Techniques for providing useful text alternatives for more information.
2c. If an image is neither decorative nor already sufficiently described in the surrounding text, a description should be provided. If the image description is brief and can be presented as plain text (that is, without any markup), present the description using @alt, as shown below.
<img src=”watermolecule.jpg” alt=”A water molecule, composed of two hydrogen atoms and one oxygen atom.” />
See Technique H37 from the Web Content Accessibility Guidelines 2.0 for further information. While there is no technical limitation on how much text can be included in @alt, common practice is to limit it to a brief sentence or two. (Lengthy alt text can be burdensome for the end user and difficult to navigate.)
2d. If the image description is lengthy or requires markup (including but not limited to lists, data tables or MathML), present the description using aria-describedby. Below is an example showing an association between an image and a visible description on the same page.
<img src=”watermolecule.jpg” aria-describedby=”watermolecule-description” alt=”A water molecule.” />
<p id=”watermolecule-description”>A water molecule is made of two hydrogen atoms and one oxygen atom. The two hydrogen atoms are positioned on the oxygen atom and are separated by approximately 105 degrees.</p>
Descriptions conveyed with aria-describedby can also be hidden so that only assistive technology can read them. Examples include placing the descriptions in a hidden <iframe> or using CSS to position them off-screen, out of the field of view. See the DIAGRAM Center recommendations for use of aria-describedby with hidden descriptions for examples and more information.
Note that content creators are in the best position to understand the intent of the image being used in the content and are therefore the best initial source for the comprehensive description of that image. DIAGRAM further recommends that publishers positioning themselves for long-term accessibility also consider providing multiple accessible alternatives (such as a simplified description, grade-appropriate descriptions, tactile-file equivalent, 3D-model file, etc.) rather than a single text alternative. The Diagrammar provides a metadata framework for inclusion of these alternatives.