Image Accessibility 101: Complex Images

A complex image is an image that portrays detailed information. These images would include graphs, diagrams, illustrations, weather maps, or any other image that cannot be summed up in a short phrase or sentence.

Tips for writing the alt text:

1) This type of image requires two separate descriptions: one for the image itself and a longer description explaining the data and information being portrayed by the image.

2) The basic description for the image goes inside the image's alt attribute.

3) The long description needs to be available elsewhere either in the content on the same page as the image or through an associated link to another page.

4) There are a couple of different ways to approach the long description aspect for this type of image. I will discuss each one below and explain the pros and cons that each might have.

Examples:

These two photos display information regarding the yearly average TV ratings for World Wrestling Entertainment's weekly live episodic show, Monday Night Raw from 1996-2015. The first image is a bar graph that has the years listed across the x axis (1996-2015) and the average ratings listed on the y axis (1-7). The second image is the graph's long description that explains the graph's data in more detail. The first part of this description is an overview paragraph that reads...

The bar graph shows the per year average television ratings for World Wrestling Entertainment's flagship weekly show, Monday Night Raw, between the years 1996 and 2015. The years between 1998 and 2001 were the ones with the highest average rating. This period of time is often regarded by wrestling fans as the time when WWE was producing the best product. The high ratings and premiere product could be contributed to the company having direct competition with World Championship Wrestling (WCW) on Monday nights, the level of talent the company had with stars like The Rock and Stone Cold Steve Austin at the fore front, and the provocative and somewhat controversial segments that were being produced at the height of what is known as "The Attitude Era". 1996, 1997, 2015 were among the years with the lowest average rating. The remainder of the years were consistently between a 3 and 4 average rating.

The second part of this long description includes a table that lists out each year and its average rating as displayed in the graph. Those data points are as follows...

Long Description Approach #1

<figure role="group">
    <img src="img/raw96-15-1.png" alt="WWE Monday Night Raw TV Ratings by Year, 
1996-2015" />
    <figcaption>
        <a href="raw-ratings.html">
          Monday Night Raw TV Ratings details from graph above
        </a>
    </figcaption>
</figure>

The above approach includes having a link to a separate page where the long description for the graph can be found. We are wrapping the images and the long description link in a <figure> tag, while wrapping the link to the long description in a <figcaption> tag. This allows screen readers and assistive technologies to relay to users that the image and the link are related to each other.

Pros:

1) This approach is supported by all browsers and assistive technologies

2) This in turn makes the information inside the long description accessible to everyone.

Cons:

1) This approach does take the users to a separate page to view the long description information, which in some cases isn't always ideal.

Long Description Approach #2

    <section>
        <img src="img/raw96-15-1.png" alt="WWE Monday Night Raw TV Ratings by Year, 
1996-2015.  Described under the heading Monday Night Raw TV Ratings Details." />
    </section>
    [...]
    <section>
        <h2>Monday Night Raw TV Ratings Details</h2>
        <h3>Overview</h3>
        <p>The bar graph shows the per year average television ratings for World 
Wrestling Entertainment's flagship weekly show, Monday Night Raw,  between the 
years 1996 and 2015...</p>
        <h3>Values</h3>
        <p>Numerical values represented on the graph</p>
        <table>
            <caption>Average (Per Year) Ratings for Monday Night Raw 1996-2015</caption>
            <thead>
                <tr>
                    <th>Year</th>
                    <th>Average Rating</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>1996</td>
                    <td>2.64</td>
                </tr>
                [...]       
            </tbody>
        </table>
    </section>

Pros:

1) This approach allows for the long description to be on the same page as the image, which keeps users from having to navigate away from the original page to view the detailed description.

2) The long description is still available to everyone because it included inside the page's text content.

Cons:

1) This approach only works if the details for the location of the long description inside the alt text are very specific. If it isn't specific, then users could become confused as to where the right information is found or they would have to spend time searching for the information on the page.

Long Description Approach #3

<figure role="group">
    <img src="img/raw96-15-1.png" alt="WWE Monday Night Raw TV Ratings by Year, 
1996-2015." />
    <figcaption>
        <h2>Monday Night Raw TV Ratings Details</h2>
        <h3>Overview</h3>
        <p>The bar graph shows the per year average television ratings for World 
Wrestling Entertainment's flagship weekly show, Monday Night Raw, between the years 
1996 and 2015...</p>
        <h3>Values</h3>
        <p>Numerical values represented on the graph</p>
        <table>
            <caption>Average (Per Year) Ratings for Monday Night Raw 1996-2015</caption>
            <thead>
                <tr>
                    <th>Year</th>
                    <th>Average Rating</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>1996</td>
                    <td>2.64</td>
                </tr>
            </tbody>
        </table>
    </figcaption>
</figure>

Pros:

1) This approach also keeps the user from having to navigate away from the current page in order to view the long description.

2) The long description remains available to everyone as it is also included in the page content in this approach.

3) Because the long description is inside of the <figcaption> tag associated with the image's <figure> tag, which keeps users from having to potentially search the page looking for the content.

Cons:

1) Depending on the design needs for your page and the length of the information included in your long description, having it all included in the page content in this way might not be desirable. It could end up making a page rather long in length and give the user a lot of information to read through and process all at once.

Summary

An image that represents extremely detailed information and can't be explained or described in one short phrase or sentence is a complex image. These would be images like graphs, charts, weather maps, illustrations, or an image where the page content relies on the user understanding the image content. These images need a two part description: one that describes the basic context of the image and another longer description to explain the information and data provided by the image.

There are a few different approaches to including the long description within your code. Each one allows the information to be available to everyone who visits the page, however which one is used on your page could depend on design, user experience, and ultimately what makes the most sense for you site. As long as both descriptions are included and the long description is associated with the image in a way that includes proper semantics and makes it available to everyone, you should be all good to go!