The Diagrammar: A Framework for Making Images and Graphics Accessible

The Diagrammar is a standard way to structure image description data, including multiple descriptions, annotations, and pointers to alternate file formats. The Diagrammar is implemented in XML which is transformed into formatted HTML using XSLT. More information about The Diagrammar is available on the DIAGRAM Center website.

In this example, The Diagrammar contains multiple image descriptions, a note from the teacher, and a pointer to a tactile graphic.

The code used for this example may look like:

<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet type="text/xsl" href="desc2html.xsl"?>
<d:description xml:id="angles-desc" xml:lang="en" xmlns="" xmlns:d="" xmlns:xlink="">
        <meta property="dc:identifier" content="source-or-self-identification?" />
        <meta property="dc:language" content="en-US" />
        <meta property="diagram:purpose">Illustrates the relationships between the surveying crew and the tree.</meta>
        <meta property="diagram:targetAge" content="14-18" />
        <meta property="diagram:targetGrade" content="9-12" />
        <meta property="diagram:descriptionQuality" content="7" />
        <meta property="dc:creator" xml:id="author01">John Doe</meta>
        <meta about="#author01" property="diagram:credentials">Ph.D. in Civil Engineering</meta>
        <meta property="dc:rights" content="???" />
        <meta property="dc:accessRights">This resource is for use by academic institutions only.</meta>
        <meta rel="diagram:currentVersion" resource=""/>
        <meta rel="diagram:thisVersion" resource=""/>
        <meta rel="diagram:previousVersion" resource=""/>
        <meta rel="diagram:alternateVersion" xml:id="alternateVersion01" resource="">
            <meta property="dc:description">This description provides the mathematical explanation for calculating angles.</meta>
        <meta rel="diagram:repository" resource="">
            <meta property="diagram:queryConcept" content="angles"/>
            <meta property="diagram:queryConcept" content="calculating"/>
            <meta property="diagram:queryConcept" content="triangles"/>
        <d:summary xml:id="summary">
            <p>The image depicts two surveyors measuring the angles between themselves and a tree.</p>
        <d:longdesc xml:id="longdesc01">
            <p>Two surveyors, A and P, stand some distance apart on the south bank of a river, looking at a tree, T, that is on the north bank of the river. Points A, P, and T form a triangle. At points A and P, there are two parallel sight lines pointing north and forming angles outside of the triangle. At point P, angle TPA is 53 degrees. The adjacent angle between PT and the northern sight line is 37 degrees. At point A, angle TAP is not labeled, and the adjacent angle formed between AT and that northern sight line is 32 degrees. </p>
        <annotation ref="longdesc01" role="diagram:comment" by="teacher">
            <p>The distance between the points is not needed.</p>
        <d:simplifiedLanguageDescription xml:id="simpledesc01">
            <p>T, A, and P are the three points on a triangle. Angle TPA is 53 degrees with an adjacent angle of 37 degrees. The angle adjacent to angle TAP is 32 degrees.</p>
        <d:tactile xml:id="tactile01">
            <object src="" srctype="image/svg+xml"/>
                <p>In the upper left corner of the tactile…</p>
        <d:simplifiedImage xml:id="alt-image">
            <object src="…/angles-lv.svg" srctype="image/svg+xml"/>
                <p>Moving front the top left corner of the image…</p>

The Content Model is referenced in an EPUB 3, DAISY, or HTML5 file using the aria-describedat attribute which is currently under development. The code to reference the sample description file above (surveymap.xml) may look like:

<img src="images/survey.jpg" alt="survey map with angles" aria-describedat="" />