(February 2018)
The DIAGRAM Center recommends the following be deemed essential:
Requirement 1
Reading systems and users must have a dependable way to skip or ignore visual elements that do not require supplemental description.
Method:
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. Also note, role=”presentation” is currently recommended but this may change in the future.
Requirement 2
Reading systems and users must be able to access alternative text or image descriptions when access to images is required for understanding the content.
Method:
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.
<figure role=”group”>
<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.</figcaption></figure>
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.) A good rule of thumb is to limit the number of characters to under 200, but going over this should not be a problem.
2d. If the image description is lengthy or requires markup (including but not limited to lists, data tables or MathML), present the description in an <aside> that is linked to with normal HTML <a> links both to the extended description and then returning back the image using. This technique uses the new role=”doc-noteref”, role=”doc-footnote” and role=”doc-backlink” to semantically bind the links between the image and its extended description. Below is an example showing an association between an image and a visible description on the same page.
<img id=”fig-01″ src=”watermolecule.jpg” alt=”A water molecule.” /><a role=”doc-noteref” href=”#watermolecule-description”>Description</a>
<aside role=”doc-footnote” id=”watermolecule-description”><a role=”doc-backlink” href=”#fig-01″>Figure 1.</a>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.</aside>
It is not recommended that these extended descriptions 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. As this will be unavailable to low vision users and others who may benefit from a more detailed description that may not be using assistive technology which exposes that hidden content.
Note: This technique can be used for anything which requires an extended description and is not limited to use for images only (i.e. a complex table). Also the link itself could be a small image with the alt=”Description” which links to/from the extended description. Also, for an EPUB it is recommended to also include epub:type=”noteref”, epub:type=”footnote” and epub:type=”backlink” along side their respective role=”doc-…” counterparts (I.e. role=”doc-noteref” epub:type=”noteref”)
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.
